SitePoint Sponsor

User Tag List

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

    some modifications with a css

    Hello everyone.
    I am using this menu http://www.cssplay.co.uk/menus/drop_definition.html but im having a problem.here is the code :

    Code:
    <style type="text/css">
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/drop_definition.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    #menu {list-style-type:none; margin:50px 0 100px 15px; padding:0;}
    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
    #menu li dl {position:absolute; top:0; left:0;}
    #menu li a, #menu li a:visited {text-decoration:none;}
    #menu li dd {display:none;}
    #menu li:hover, #menu li a:hover {border:0;}
    #menu li:hover dd, #menu li a:hover dd {display:block;}
    #menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}
    #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
    #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65 url(bottom.gif) no-repeat bottom left; text-align:center; cursor:pointer;}
    #menu dt {margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;}
    #menu .one {background: #669900 url(top.gif) no-repeat top left;}
    #menu .two {background: #993366 url(top.gif) no-repeat top left;}
    #menu .three {background: #FF6600 url(top.gif) no-repeat top left;}
    #menu .four {background: #FF0066 url(top.gif) no-repeat top left;}
    #menu .five {background: #0066FF url(top.gif) no-repeat top left;}
    #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
    #menu dd.last {border-bottom:1px solid #444;}
    .gallery dt a, .gallery dt a:visited {display:block; color:#444;}
    .gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
    background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
    }
    .gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}
    
    
    </style>
    
    <div id="info">
    
    <h2>A Definition List drop-down menu</h2>
    <h3>3rd November 2006</h3>
    
    <ul id="menu">
    
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    	<dt class="one"><a href="../menu/index.html">Who we are</a></dt>
    	<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
    	<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
    	<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
    	<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
    
    	<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
    	<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
    	<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
    	<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
    	<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    
    </li>
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    	<dt class="two"><a href="index.html">What we do</a></dt>
    	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
    	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
    	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
    	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
    
    	<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
    	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
    	<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    	<dt class="three"><a href="../layouts/index.html">Events</a></dt>
    
    	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
    	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
    	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
    	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
    	<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    
    </li>
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    	<dt class="four"><a href="../layouts/index.html">Get envolved</a></dt>
    
    	<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
    	<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
    	<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
    	<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
    	<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    
    </li>
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    	<dt class="five"><a href="../mozilla/index.html">Our Partners</a></dt>
    	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
    	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
    	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
    	<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
    
    	<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
    	<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
    	<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>

    I have changed the color of the tabs however I cannot change the color of the bottom of each drop-down menu to match the top because this color is set to standard for every tab is #c9ba65. Is there a way to fix it?I have attached a picture just to show you what I really want.

    thnx
    Attached Images Attached Images

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I understand without waiting for the attachment approval.

    A solution could be to give each definition list its own id or class. But as each list already has a different class for it's definition item, I suggest move those classes to the <dl> instead, then each dl can be styled also.

    Here the dt selectors are adjusted and each dl has got the same bg-color as its dt:
    Code:
    #menu dl.one {background-color: #669900;}
    #menu dl.two {background-color: #993366;}
    #menu dl.three {background-color: #FF6600;}
    #menu dl.four {background-color: #FF0066;}
    #menu dl.five {background-color: #0066FF;}
    #menu .one dt {background: #669900 url(top.gif) no-repeat top left;}
    #menu .two dt {background: #993366 url(top.gif) no-repeat top left;}
    #menu .three dt {background: #FF6600 url(top.gif) no-repeat top left;}
    #menu .four dt {background: #FF0066 url(top.gif) no-repeat top left;}
    #menu .five dt {background: #0066FF url(top.gif) no-repeat top left;}
    Here the first <dt class="one"> is moved to the <dl> instead:
    HTML Code:
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery one">
    	<dt><a href="../menu/index.html">Who we are</a></dt>
    		<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
    		<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
    		<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
    		<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
    		<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
    		<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
    		<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
    		<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
    		<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx a lot for your help.This is exactly what I wanted
    Just one last thing.The first tab is working the way it should but on the other tabs the bottom image doesn't appear .I have attached a picture to show u how it looks like

    Thnx
    Attached Images Attached Images

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't worry mate got it work
    Thnx a lot

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Heliand View Post
    ... The first tab is working the way it should but on the other tabs the bottom image doesn't appear ...
    Sorry, the lists two to five should also have the background-color property, the background shorthand resets all properties that are not specified.
    Code:
    #menu dl.one {background-color: #669900;}
    #menu dl.two {background-color: #993366;}
    #menu dl.three {background-color: #FF6600;}
    #menu dl.four {background-color: #FF0066;}
    #menu dl.five {background-color: #0066FF;}
    Happy ADD/ADHD with Asperger's


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
  •