nested Background CSS help

**yankeedoodles** · Jul 21, 2008, 19:06

Hello guys,
I would like to make a nested CSS for a bunch of tabs for a site I am making and for this I was hoping to use a CMS like mambo or drupal. Ok so anyway, I am having a go at it and this is where im stuck.
[IMG]sowebme.com/hello.jpg[/IMG]
The middle image : active-menu-m.png which is supposed to tile x is not appearing.
Any help would be appreciated. THANKS!

The code is as follows:
HTML:

HTML Code:

            <div id="horiz-menu">
            <div id="horiz-menu1">
            <ul>
            <li class="active" id="horiz-menu1">
           <a href="dsds.html">hello</a>
            </li>
            </ul>
                        </div>
                </div>

CSS:

Code:

#horiz-menu1{
    background: url(images/active-menu-m.png) 0 0  repeat;
}
#horiz-menu {
    height: 56px;
}

#horiz-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#horiz-menu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background: none;
}

#horiz-menu a {
    white-space: nowrap;
    font-family: Arial Narrow, Helvetica, sans-serif;
    color: #fff;
    display: block;
    float: left;
    height: 53px;
    line-height: 53px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 0px 27px 0px 27px;
    background: url(images/menu-divider.png) 100% 0 no-repeat;
}
#horiz-menu li.active,
#horiz-menu li.active_menu {
    background: url(images/active-menu-r.png) 100% 0 no-repeat;
}
#horiz-menu li.active a,
#horiz-menu li.active_menu a {
    background: url(images/active-menu-l.png) 0 0 no-repeat ;
    color: #000;
}

**Centauri** · Jul 21, 2008, 20:57

As the <li>s are floated, the height of the <ul> will collapse to zero, and therefore so will the height of #horiz-menu1. Adding overflow:hidden; to the <ul> style will force it to surround the floats. You may also need to add width:100%; so that the <ul> gets HasLayout in IE.

**yankeedoodles** · Jul 21, 2008, 21:20

Hello
Thanks for your reply, but now i noticed that the entire line gets the BG not just the "active" tab.
SO is there a way to limit it from active-menu-l.png to active-menu-r.png basically so that only that particular tab gets a bg?

Thanks
Murtaza

**Centauri** · Jul 21, 2008, 21:39

Well it would, as that background is on the containing div. Can you upload what you have, or attach the graphics so we can see what you are doing?

**yankeedoodles** · Jul 21, 2008, 22:26

Hello please find the attached.
This is a sample of the file. If you want the actual site files please tell me cos i think its about 200kb and i'd prefer to send it to you privately.

Thanks
Murtaza

**yankeedoodles** · Jul 21, 2008, 22:27

since its "pending approval" now, you can find the attachment at sowebme.com/html.zip

**Centauri** · Jul 22, 2008, 03:58

The easiest way to do these variable width tabs is by using the sliding doors approach, where at least one side of the graphic is much longer than needed. Normally, this method overlaps the end graphic on top of the long graphic to finish it, but when transparency is involved, the graphics cannot overlap. The two halves also do not need to be separate graphics, nor do the various states (rollover, active, etc) need to be separate graphics - it can be the one file. Refering to the attached sample graphic, the tab is wider than needed, and the two states appear under each other:

The html is set up with empty spans inside the menu list <a> links. The <a>s can get a left margin, and the floated spans pulled out into this margin area via a negative left margin - this will then sit the span and <a> side by side, and each gets the appropriate end of the tab graphic. Hover just shifts the background graphic to reveal the bottom section.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
p {
	margin-bottom: 1em;
}
#wrapper {
	width: 800px;
	margin: 0 auto;
	padding-top: 20px;
}
#nav {
}
#nav li {
	list-style: none;
	float: left;
}
#nav a {
	float: left;
	height: 56px;
	line-height: 56px;
	padding: 0 17px 0 5px;
	margin-left: 12px;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(images/menutab.png);
	background-repeat: no-repeat;
	background-position: right top;
}
#nav a span {
	float: left;
	width: 12px;
	height: 56px;
	margin-left: -17px;
	background-image: url(images/menutab.png);
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
}
#nav a:hover {
	background-position: right bottom;
	color: #000000;
}
#nav a:hover span {
	background-position: left bottom;
}
-->
</style>
</head>

<body>
<div id="wrapper">
	<ul id="nav">
		<li><a href="#"><span></span>Link 1</a></li>
		<li><a href="#"><span></span>A longer Link</a></li>
		<li><a href="#"><span></span>C</a></li>
	</ul>
</div>
</body>
</html>

**yankeedoodles** · Jul 23, 2008, 02:35

Hey ,
thanks that worked and now its so much easier. I totally understand what you did and how you are doing it

thanks alot for helping me with this.

Murtaza

The SitePoint Forums have moved.

User Tag List

Thread: nested Background CSS help

Thread Tools

Display

nested Background CSS help

Bookmarks

Bookmarks

Posting Permissions