Results 1 to 6 of 6

Thread: Lists - Getting the hover to fill

  1. #1
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Lists - Getting the hover to fill

    I've reworked the site completely, and I'd like to know if anyone can tell me how to get the hover function to fill the entire list bar with a solid block background color. Please see my site to see what I mean... www.usejeff.com

    The content and everything is jacked for now, gonna deal with reducing it a ton later.

    Another thing I'm wondering... is if anyone can tell me how to round out the bottom of these lists, and also round out the main white content window. Kinda like in this picture...



    Image doesn't show up inbedded in this message in preview, here's a link to it.... http:..www.usejeff.com/rounded.html

    Thank you in advance!!!

  2. #2
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    I would make the links in the sidebar block:

    Code:
    #sidenav a{
    display: block;
    padding: 4px;}
    _____________________________________

    To round out the divs, make a background image the width of the div and do the following:

    Code:
    #divname{
    background: rgb(250,219,183) url(imgs/roundcorn1.gif) no-repeat bottom center;}
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Sliight View Post
    Another thing I'm wondering... is if anyone can tell me how to round out the bottom of these lists, and also round out the main white content window.
    There are various ways of doing it. It can be achieved using purely CSS without a single modification to the mark-up (other than including the style sheet, of course), but it has relatively limited support. Scripting can be used which reduces the messiness somewhat, allowing fairly clean mark-up, though obvious the effect won't appear if scripting is disabled. Finally, there's the add-lots-of-elements method, which always works (unless CSS is disabled), but involves adding a fair few content-less elements (usually div). It also depends if you want a border or just rounded background colours.

    Quote Originally Posted by alexjewell View Post
    To round out the divs, make a background image the width of the div [...]
    No, please don't. This requires using pixel dimensions which isn't suitable for text containers. The methods I mention above can all be used to create perfectly fluid corners and edges.
    Mike

  4. #4
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Well, there's interesting CSS corners out there:

    http://www.html.it/articoli/nifty/index.html
    http://www.smileycat.com/miaow/archives/000044.php
    http://www.spiffycorners.com/
    http://www.albin.net/css/roundedcorners

    Now, the way I would do it if the div wasn't an exact width would be with 4 different divs, each with one background image:

    HTML Code:
    <div id="r_one">
    	<div id="r_two">
    		<div id="r_three">
    			<div id="r_four">
    				<div id="r_content">
    			
    					<!-- DIV CONTENT HERE -->
    
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    With CSS along these lines:

    Code:
    #r_one, #r_two, #r_three, #r_four{
    width: 20&#37;;
    height: 10%;}
    
    	#r_one{
    	background: red url(imgs/r_top_left.gif) no-repeat top left;}
    
    	#r_two, #r_three, #r_four, #r_content{
    	background: transparent;}
    
    	#r_two{
    	background: url(imgs/r_top_right.gif) no-repeat top right;}
    
    	#r_three{
    	background: url(imgs/r_bot_left.gif) no-repeat bottom left;}
    
    	#r_four{
    	background: url(imgs/r_bot_right.gif) no-repeat bottom right;}
    
    #r_content{
    margin: 5px;}
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  5. #5
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for all your help on this... I used one of the links and found a "corner rounder" site that just generates the code, css, and graphics for me. Quite nice I also was able to figure out how to make the hover background take up the entire width of the list.

    Thanks!
    Last edited by Sliight; 07-17-2007 at 06:16 AM. Reason: Solved issue

  6. #6
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Mind giving us the link?
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •