Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

T

thextal

macrumors newbie
Original poster
Jul 10, 2009
5
0
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)

This is a mock-up of what I am trying to produce:
tabexample.png
Click to expand...

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!
 
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.
 
Also a transparency, as I've defined by #spacer in this example.
 
umiwangu said:
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.
Click to expand...

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.
 
thextal said:
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.
Click to expand...

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.
 
umiwangu said:
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.
Click to expand...

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
tabexample.png


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!
 
thextal said:
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
tabexample.png


I have already styled the tabs using transparent PNGs. 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!
Click to expand...

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.
 
umiwangu said:
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.
Click to expand...

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:
http://img30.imageshack.us/img30/310/picture2gwu.png
picture2gwu.png
Click to expand...

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. :)
 
thextal said:
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:




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. :)
Click to expand...

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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back