SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested Background CSS help

    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;
    }
    Last edited by yankeedoodles; Jul 21, 2008 at 18:08. Reason: want to add image

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37;; so that the <ul> gets HasLayout in IE.

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Files Attached Files

  6. #6
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    since its "pending approval" now, you can find the attachment at sowebme.com/html.zip

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


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
  •