Fill Empty space to left of <ul> tabbed menu bar

Discussion in 'Web Design and Development' started by thextal, Jul 10, 2009.

  1. thextal macrumors newbie

    Joined:
    Jul 10, 2009
    #1
    Hello

    I'm making a menu bar with transparent decorations and need some help.

    I am using an <li> for each tab, and am able to float them to the right, but I want to fill the empty space on the left.

    I imagine two ways of doing this: (see sample code)
    1. Insert a <div> that fills the entire remaining width, or
    2. Insert a new <li> that is styled to fill the entire remaining width.

    My problem is that I cannot get anything to automatically fill the width of the left side, while not overlapping with the floated tabs. (Overlapping becomes ugly due to transparency)

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>This is a test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    body {
    	
    }
    #header {
    	height: 20px;
    	width: 600px;
    	margin: 0 auto;
    	border: 1px solid black;
    }
    #header ul {
    	/*	width: 600px; */
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	border: 1px solid black;
    	float: right;
    }
    #header li {
    	float: left; /* or can use display: inline; */
    	margin: 0;
    	padding: 0;
    	background: url(http://img41.imageshack.us/img41/2629/glassblack.png);
    	height: 20px;
    }
    #spacer {
    	background: url(http://img41.imageshack.us/img41/2629/glassblack.png);
    	/* how to assign width here so that the #spacer occupies the remaining horizontal space? */
    	/* width: 100%; ???? */
    	/* width: auto; ???? */
    }
    
    </style>
    </head>
    <body>
    <div id="header">
    	<!-- could add a <div id="spacer"></div> here? -->
    	<ul>
    		<!-- Could add an <li id="spacer"></li> here? -->
    		<li>Tab 1</li>
    		<li>Tab 2</li>
    		<li>Tab 3</li>
    	</ul>
    </div>
    </body>
    </html>
    
    Thanks so much!
     
  2. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #2
    What are you planning on having in that remaining space? A solid colour? Also transparency?

    Edit: Ok, I see it now. Why not just have the transparency in the header div, instead of in the li's and a 'filler' div? Or, make the li's a set width, such as 10%, then make the div the remaining width.
     
  3. thextal thread starter macrumors newbie

    Joined:
    Jul 10, 2009
    #3
    Also a transparency, as I've defined by #spacer in this example.
     
  4. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #4
    ^ see edit above.
     
  5. thextal thread starter macrumors newbie

    Joined:
    Jul 10, 2009
    #5
    Thanks for your reply.

    The example I've posted is not completely representative of what I'm trying to produce; I am actually going to assign a different transparent decoration to the tabs than what is shown, and any overlap will look obviously incorrect.

    I have not tried setting <li> to a percentage because I want the tab widths to match the containing text.
     
  6. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #6
    Yes, I just mean put one transparent background on the header div and leave all of the li's blank (with no background). You can still have your borders and whatnot.
     
  7. thextal thread starter macrumors newbie

    Joined:
    Jul 10, 2009
    #7
    This does not accomplish my goal... I believe I need to explain the situation more fully.

    This is a mockup I just made, but it is essentially what I am creating here:
    http://img14.imageshack.us/img14/6559/tabexample.png
    [​IMG]

    Note that there is a background you are supposed to be able to see through the transparent images. The "background of filler space" is supposed to be transparent, but it's not very clear in the picture.

    I have already styled the tabs using transparent PNGs to create the rounded edges, so that is already accomplished. The only part I need help with is getting the area I've marked "filler space" on the left to take up the entire remaining space.

    I hope this is clear. :) thanks a bunch!
     
  8. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #8
    Yes, I do understand what you want, and your mock-up makes my point even more. Put your background filler across the entire header div, repeat-x, and then put the little tab background "no-repeat center" of your li's. That should work fine... I think.
     
  9. thextal thread starter macrumors newbie

    Joined:
    Jul 10, 2009
    #9
    I've created some new mock-up HTML here, with the following images:
    1px Transparent black #header background
    Tab background with rounded top-left corner (still oversimplified because it lacks the top-right rounded corner, but I think it works for the case of this example) Note that the tabs are not of fixed width.

    I tried to follow your directions, except for the <li> I used "no-repeat top left" for the rounded corner since these aren't fixed width tabs, and in this example the only rounded corner is in the top-left.

    Here is sample code and what it looks like:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>This is a test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    body {
    	background: url(http://img509.imageshack.us/img509/2516/patt4a57cd50c985a.jpg);
    }
    #header {
    	height: 20px;
    	width: 600px;
    	margin: 0 auto;
    	background: url(http://img41.imageshack.us/img41/2629/glassblack.png);
    }
    #header ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	float: right;
    }
    #header li {
    	float: left; /* or can use display: inline; */
    	margin: 0 5px;
    	padding: 0;
    	background: url(http://img37.imageshack.us/img37/6782/templatetab.png) top left no-repeat;
    	height: 20px;
    }
    /*
    #spacer {
    	background: url(http://img41.imageshack.us/img41/2629/glassblack.png);
    }
    */
    
    </style>
    </head>
    <body>
    <div id="header">
    	<ul>
    		<li>tab 1</li>
    		<li>tab 2.. </li>
    		<li>tab 3...</li>
    	</ul>
    </div>
    </body>
    </html>
    
    Assuming I did it correctly, we are faced with the problem of having the additive effects of the two transparent PNGs overlapping, which is ugly. Most prominent is the extra-dark top-left corner of each tab.

    I appreciate the help. :)
     
  10. umiwangu macrumors 6502

    Joined:
    Sep 4, 2006
    Location:
    Malawi
    #10
    No problem. I had assumed you would edit the images in order to get rid of the overlapping transparency. Just erase the corners of the tab images.

    Were you planning on having both tab corners visible? If so, you'll either have to make them different widths (the graphics), or a bit of fancy footwork, like putting a new LI on either side of your existing ones and using them for the corners. Then, put a 1px wide graphic as the background for your real LI tabs and have it repeat-x. That way, your graphics will automatically resize if your tab text is longer than the graphic itself.

    Hope that makes sense. I can put it in code if you want.
     
  11. memco macrumors 6502

    Joined:
    May 1, 2008
    #11
    I have a solution:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>untitled</title>
    	<style type="text/css">
    	#head { /*example styling*/
    		width : 750px;
    		margin : 0 auto;
    		background : #a9a9ff;
    		height : 150px;
    	}
    
           #pretab {float : however;}
    
    	#head ul {
                    clear : both;
    		width : 100%;
    		background : ('url/of/transparent-bg.png');
    		float : right;
    		margin-top : 125px;
    	}
    	
    	#head ul li {
    		float : right;
    		background : white;
    	}
    	</style>
    </head>
    <body>
    <div id="head">
            <div id="pretab">
                  Content above tab Goes here
            </div>
    	<ul>
    		<li>Item5</li>
    		<li>Item4</li>
    		<li>Item3</li>
    		<li>Item2</li>
    		<li>Item1</li>
    	</ul>
    </div><!-- #head -->
    </body>
    </html>
    
    Notice the trick here is that you'll have to order your tabs in reverse of how you want them to appear (source goes 5-1, but displays 1-5). You use the margin-top to control how far from the top of the header you want the bar to appear. I don't believe the header needs an explicit height, but I used it in the example to simulate whatever height you'd get from any other content in the header. Also, because you're floating the bar it's a good idea to use the clear to make sure it's below whatever is above it.
     

Share This Page