SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu buttons look different

    http://www.londonheathrowcars.com/previewthis.jpg

    the menu on the left is correct.. the menu on the rite is wrong.. i cant get them looking the same.. ive tried changing the code but it always shrinks the box and creates random little boxes underneath..

    please test this page in ff..

    can someone help me make this menu look like it should..

    css that works..
    Code:
    	#menu a,#menu li li a{
    	float:left;
    	width:73px;
    	display:block;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #666666;
    	padding:.3em 0 .3em 0 ;
    	text-decoration: none;
    	text-align: center;
    	border-width:1px 1px 1px 1px;
    	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
    	border-style:solid;
    
    	}
    	
    	#menu .bccor{border-color:#ffffff #ffffff #ffffff #ffffff;}
    	
    	#menu li li a{
    	background: #EBEBEB;
    	}
    	
    	/*#menu li li{height:50px;}*/
    	
    	#menu ul{
    	padding:0;
    	margin:0;
    	list-style: none;
    	}
    	
    	#menu li{
    	position:relative;
    	float: left;
    	width:75px;
    	
    	}
    	
    	#menu li {margin:0 0px 0 0;}/*margin between top li*/	
    	#menu li li{margin:0px 0 0 0;}/*margin between li li*/
    	
    	li ul{display:none;}
    	
    	li li,li:hover ul,li.over ul{display:block;}
    	
    	#nav li li a{
    	border-color:#EBEBEB #EBEBEB #EBEBEB #EBEBEB;
    	}
    	
    	#nav li li a:hover{
    	display:block;
    	background:#666666;
    	border-width:1px 1px 1px 1px;
    	border-color:#666666 #666666 #666666 #666666;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #F99C08;
    	}
    	.text{float:left;margin-top:30px;width:600px;}
    
    	#menu{position:relative;}
    	#nav{position:absolute;top:0;left:0;}
    
    
    a {color: #666666} :visited {color: #666666} a:active {color: #333333} a:hover {color: #F99C08}

    css that doesnt look rite but adds a new level to the menu which i need

    Code:
       #menu .bccor{border-color:#ffffff #ffffff #ffffff #ffffff;}
    
       #menu li li a{
    
       background: #EBEBEB;
    
       display:block;
    
    
       }
    
       * html #menu a{height:1%;/*ie hack, don't know if it breaks ie7*/
    
       }
    
       
    
       /*#menu li li{height:50px;}*/
    
       #menu ul{
    
       padding:0;
    
       margin:0;
    
       list-style: none;
    
       }
    
       #menu li{
    
        display:block;
        border-width:1px 1px 1px 1px;
    	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
    	border-style:solid;
        position:relative;
        font-family:arial;
        float: left;
        font-size:80%;
        color: #666666;
        width:73px;
        padding:.3em 0 .3em 0 ;
    
       background:white;
    
       text-align:center;
    
       }
    
       #menu li {margin:0;}/*margin between top li*/   
    
       #menu li li{margin:0;
    
       position:relative;}/*margin between li li*/
    
       li ul{display:none;}
    
       li li,li:hover ul,li.over ul{display:block;}
    
       #nav li li a{
    
    
    
    
    
       }
    
       #nav li li a:hover{
    
    	background:#666666;
    	border-width:1px;
    	border-color:#666666;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #F99C08;
    
       }
    
       
    
       #nav ul ul{
    
       left:75px;/*the same width as #menu li*/
    
       top:0px;
    
       display:none;
    
       position:absolute;
    
       }
    
       
    
       #nav ul li:hover ul, #nav ul li.over ul{
    
       display:block;
    
       }
    
       
    
       .text{float:left;margin-top:30px;width:600px;}
    
       #menu{position:relative;}
    
       #nav{position:absolute;top:0;left:0;}
    
       a {color: #666666;   text-decoration: none;}
    the 2 pages can be seen here..menu.htm works like i want.. newmenu2.htm is the lame one

    http://www.londonheathrowcars.com/menu.htm
    http://www.londonheathrowcars.com/newmenu2.htm

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Hull, England
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not too sure what you are asking for.

    You are trying to add another link to the drop down?
    Design is not just what it looks like and feels like.
    Design is how it works.

    www.cycadelic.org

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot.. you see there is an additional piece of javascript that goes with that menu.. but i took it out for the moment..

    IE7 doesnt need the script but older ie versions do..

    the problem is it freezes the older ie browsers..

    a message box appears saying UL.. and just keeps popping up..

    you have to ctrl alt and delete that code.. here it is if it is of any use at this time..

    Code:
    <!--[if IE]>
    
    <script type="text/javascript">
    
    startList = function() {
    
       if (document.all&&document.getElementById) {
    
          navRoot = document.getElementById("nav");
    
          for (i=0; i<navRoot.childNodes.length; i++) {
    
             node = navRoot.childNodes[i];
    
             if (node.nodeName=="LI") {
    
                node.onmouseover=function() {
    
                   this.className+=" over";
    
                }
    
                node.onmouseout=function() {
    
                   this.className=this.className.replace(" over", "");
    
                }
    
             
    
             if(node.childNodes[2]){
    
                 secondLevelUL = node.childNodes[2]
    
                alert(secondLevelUL.nodeName);
    
                for (i=0; i<secondLevelUL.childNodes.length; i++) {
    
                   alert("insisde secondlevelUL");
    
                      secondLevelUL.childNodes[i].onmouseover=function() {
    
                            this.className+=" over";
    
                      }
    
                      secondLevelUL.childNodes[i].onmouseout=function() {
    
                            this.className=this.className.replace(" over", "");
    
                      }
    
                }
    
             }
    
             }
    
          }
    
       }
    
    }
    
    window.onload=startList;
    
    </script>
    
    <![endif]-->

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi.. i have realised that i do not need the javascript.


    i have made some progress with the menu..i have cleaned up my code.. and have fixed the shrinking text problem.. and colour problems..

    im still gettin a problem with the third level appearing to the
    right of the 2nd level.. like it used to do in this picture..

    http://www.londonheathrowcars.com/third.jpg

    at the moment.. in my firefox browser it is doing this..

    http://www.londonheathrowcars.com/thisthing.jpg
    the page can be found here..

    http://www.londonheathrowcars.com/newmenu2.htm

    i have added the same padding properties the original home button has
    to the rollover items.. and the text stays the same now which is
    great..

    the only problems now are the third levels not appearing to the right..
    i think ill be able to align them.. but gettin this third level
    working is proving difficult..

    here is the new page code..
    Code:
    <!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>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Untitled Document</title>
    
    <style type="text/css" media="all">
    
    * {
      margin:0;
      padding:0;
    }
    
    body {
      background-color:#EBEBEB;
    }
    
    /*DIVS*/
    
    div#wrap {
      width:750px;
      position:absolute;
      left:50%;
      margin: 0 0 0 -375px;
      border:1px solid #666666;
      background-color:#ffffff;
    }
    
    div#main {
      width:750px;
      background-color:#ffffff;
    }
    
    div#menu .bccor {
      border-color:#ffffff #ffffff #ffffff #ffffff;
    }
    
    ul#nav {
      list-style-type:none;
    }
    
    ul#nav li.outerLi {
      display:block;
      border-width:1px 1px 1px 1px;
      border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
      border-style:solid;
      position:relative;
      font-family:arial;
      float:left;
      font-size:80%;
      color: #666666;
      width:73px;
      padding:.3em 0 .3em 0 ;
      background:white;
      text-align:center;
    }
    
    a {
     color: #666666;
     text-decoration: none;
    }
    
    ul#nav li ul {
      margin:0px;
      padding:0px;
      list-style-type:none;
      display:none;
    }
    
    /*ul#nav li ul li {
      padding:0px;
      height:16px;
    
    }*/
    
    ul#nav li ul li a {
      padding-top:3px;
      display:block;
      height:17px;
      padding:.3em 0 .3em 0 ;
    }
    
    div#menu ul li ul {
      display:none;
    
    }
    
    ul#nav li ul li a {
      background: #EBEBEB;
      display:block;
    }
    
    * html #menu ul li ul li a {
      height:1%;/*ie hack, don't know if it breaks ie7*/
    }
    
    ul#nav li ul li a:hover {
      background-color:#666666;
      border-width:1px;
      border-color:#666666;
      font-family:arial;
      font-weight:120;
      color: #F99C08;
      padding:.3em 0 .3em 0 ;
    
    }
    
    ul#nav li:hover ul, ul#nav li.over ul {
      display:block;
    }
    
    .text {
      float:left;
      margin-top:30px;
      width:600px;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="wrap">
    <div id="menu">
    
    <ul id="nav">
    
       <li class="outerLi"><a href="##">Home</a>
               <ul>
                  <li><a href="##">ITEM 1A</a>
    
              <li><a href="#">thirdlevel a</a></li>
    
                   <li><a href="#">thirdlevel a 2</a></li>
    
               </ul>
        </li>
    
    
     </ul>
    </div>
    <div id="main">
    <br><br><br><br><br><br><br><br><br><bR><bR>
    </div>
    </div>
    
    </body>
    
    </html>
    can someone please give me a hand here.. thanks.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I'm not really sure where you are going with this but you would need to do something like this to get the third level menus to the side.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    <style type="text/css" media="all">
    
    * {
      margin:0;
      padding:0;
    }
    
    body {
     background-color:#EBEBEB;
        text-align:center;
    }
    p {margin:0 0 1em 0}
    /*DIVS*/
    
    div#wrap {
      width:750px;
        margin:auto;
        position:relative;
      border:1px solid #666666;
      background-color:#ffffff;
        text-align:left;
    }
    
    div#main {
      width:750px;
      background-color:#ffffff;
    clear:both;
    }
    
    div#menu .bccor {
      border-color:#ffffff #ffffff #ffffff #ffffff;
    }
    ul#nav {
      list-style-type:none;
    
    }
    
    ul#nav li.outerLi {
      border-width:1px 1px 1px 1px;
      border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
      border-style:solid;
      position:relative;
      font-family:arial;
      float:left;
      font-size:80&#37;;
      color: #666666;
      width:73px;
      background:white;
      text-align:center;
    }
    
     a {
     color: #666666;
     text-decoration: none;
    }
    
    ul#nav li ul {
     list-style-type:none;
     display:none;
        position:absolute;
        left:-1px;
        top:23px;
        width:75px;
    }
    ul#nav li {position:relative;}
    ul#nav li li {height:23px;border:1px solid #ccc;}
    ul#nav li ul ul{
        position:absolute;
        left:74px;
        top:1px;
        background:#fff;
        width:100px
    }
    ul#nav li  a {
      display:block;
      height:17px;
      padding:3px 0 3px 0 ;
    }
    
    div#menu ul li ul {display:none;}
    
    ul#nav li ul li a {
      background: #EBEBEB;
      display:block;
    }
    
    ul#nav li ul li a:hover {
      background-color:#666666;
      font-family:arial;
      color: #F99C08;
    }
    
    ul#nav li:hover ul ul, ul#nav li.over ul ul {display:none;}
    
    ul#nav li:hover ul, ul#nav li.over ul,
    ul#nav li li:hover ul, ul#nav li li.over ul {
      display:block;
    }
    
    
    .text {
      float:left;
      margin-top:30px;
      width:600px;
    }
    
    
    /* clear without structural mark-up */
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
     /* mac hide \*/
     * html .clearfix {height: 1%;}
    .clearfix {display: block;}
     /* End hide */
    </style>
    </head>
    <body>
    <div id="wrap" class="clearfix">
        <div id="menu">
            <ul id="nav">
                <li class="outerLi"><a href="##">Home</a>
                    <ul>
                        <li><a href="##">ITEM 1A</a>
                            <ul>
                                <li><a href="#">thirdlevel a</a></li>
                                <li><a href="#">thirdlevel a 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="main"> 
        <p>test</p>
            <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    
        </div>
    </div>
    </body>
    </html>
    Your list structure was invalid and the third level needs to be a nested ul as above. I've added the js for ie6 and there should be no problems with it.

    You can always refer to the folllowing examples to see how to styles these type of menus.

    http://www.pmob.co.uk/temp/drop-down-multi2.htm
    http://www.pmob.co.uk/temp/drop-down-multi.htm

    Hope its of some use

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul.. you are a true legend.. one thing tho..

    sorry to nit-pick.. the third level item appears slightly below the second level one.. can they start from the same vertical position?

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i changed it.. thanks..

    Code:
    ul#nav li ul ul{
        position:absolute;
        left:74px;
        top:0px;

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.. really.. one last thing..

    in ie.. the second level works fine.. it looks like this..

    http://www.londonheathrowcars.com/iemenu.jpg

    in firefox however.. the second level.. when there are 2 lines of writing it looks like this..

    http://www.londonheathrowcars.com/ffmenu.jpg

    also.. i would need the third level to become 2 lines.. like the second level..

    that really will be all paul.. here is the code at the moment

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    <style type="text/css" media="all">
    
    * {
      margin:0;
      padding:0;
    }
    
    body {
     background-color:#EBEBEB;
        text-align:center;
    }
    p {margin:0 0 1em 0}
    /*DIVS*/
    
    div#wrap {
      width:750px;
        margin:auto;
        position:relative;
      border:1px solid #666666;
      background-color:#ffffff;
        text-align:left;
    }
    
    div#main {
      width:750px;
      background-color:#ffffff;
    clear:both;
    }
    
    div#menu .bccor {
      border-color:#ffffff #ffffff #ffffff #ffffff;
    }
    ul#nav {
      list-style-type:none;
    
    }
    
    ul#nav li.outerLi {
      border-width:1px 1px 1px 1px;
      border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
      border-style:solid;
      position:relative;
      font-family:arial;
      float:left;
      font-size:80&#37;;
      color: #666666;
      width:73px;
      background:white;
      text-align:center;
    }
    
     a {
     color: #666666;
     text-decoration: none;
    }
    
    ul#nav li ul {
     list-style-type:none;
     display:none;
        position:absolute;
        left:-1px;
        top:23px;
        width:75px;
    }
    ul#nav li {position:relative;}
    ul#nav li li {height:23px;border:1px solid #ccc;}
    ul#nav li ul ul{
        position:absolute;
        left:74px;
        top:0px;
        background:#fff;
        width:100px
    }
    ul#nav li  a {
      display:block;
      height:17px;
      padding:3px 0 3px 0 ;
    }
    
    div#menu ul li ul {display:none;}
    
    ul#nav li ul li a {
      background: #EBEBEB;
      display:block;
    }
    
    ul#nav li ul li a:hover {
      background-color:#666666;
      font-family:arial;
      color: #F99C08;
    }
    
    ul#nav li:hover ul ul, ul#nav li.over ul ul {display:none;}
    
    ul#nav li:hover ul, ul#nav li.over ul,
    ul#nav li li:hover ul, ul#nav li li.over ul {
      display:block;
    }
    
    
    .text {
      float:left;
      margin-top:30px;
      width:600px;
    }
    
    
    /* clear without structural mark-up */
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
     /* mac hide \*/
     * html .clearfix {height: 1%;}
    .clearfix {display: block;}
     /* End hide */
    </style>
    </head>
    <body>
    <div id="wrap" class="clearfix">
        <div id="menu">
            <ul id="nav">
                <li class="outerLi"><a href="##">Home</a>
                </li>
    
                <li class="outerLi"><a href="##">Services</a>
                    <ul>
                        <li><a href="##">Airport Transfers</a>
                            <ul>
                                <li><a href="#">Airport Transfers</a></li>
                                <li><a href="#">Airport Transfers</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
    
                <li class="outerLi"><a href="##">Fleet</a>
                </li>
    
    			<li class="outerLi"><a href="##">Accounts</a>
                </li>
    
    			<li class="outerLi"><a href="##">Rates</a>
                </li>
    			
    			<li class="outerLi"><a href="##">Bookings</a>
                </li>
    
    			<li class="outerLi"><a href="##">Enquiries</a>
                </li>
    
    			<li class="outerLi"><a href="##">Info</a>
                </li>
    
    			<li class="outerLi"><a href="##">Links</a>
                </li>
    
    			<li class="outerLi"><a href="##">Contact</a>
                </li>
    
            </ul>
        </div>
        <div id="main"> 
        <p>test</p>
            <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    
        </div>
    </div>
    </body>
    </html>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to remove the height from the anchor so that it will expand and then change the width on the sub list so that the text will wrap.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    <style type="text/css" media="all">
    
    * {
      margin:0;
      padding:0;
    }
    
    body {
     background-color:#EBEBEB;
        text-align:center;
    }
    p {margin:0 0 1em 0}
    /*DIVS*/
    
    div#wrap {
      width:750px;
        margin:auto;
        position:relative;
      border:1px solid #666666;
      background-color:#ffffff;
        text-align:left;
    }
    
    div#main {
      width:750px;
      background-color:#ffffff;
    clear:both;
    }
    
    div#menu .bccor {
      border-color:#ffffff #ffffff #ffffff #ffffff;
    }
    ul#nav {
      list-style-type:none;
    
    }
    
    ul#nav li.outerLi {
      border-width:1px 1px 1px 1px;
      border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
      border-style:solid;
      position:relative;
      font-family:arial;
      float:left;
      font-size:80&#37;;
      color: #666666;
      width:73px;
      background:white;
      text-align:center;
    }
    
     a {
     color: #666666;
     text-decoration: none;
    }
    
    ul#nav li ul {
     list-style-type:none;
     display:none;
        position:absolute;
        left:-1px;
        top:23px;
        width:75px;
    }
    ul#nav li {position:relative;}
    ul#nav li li {line-height:23px;border:1px solid #ccc;}
    ul#nav li ul ul{
        position:absolute;
        left:74px;
        top:0px;
        background:#fff;
        width:74px
    }
    ul#nav li  a {
      display:block;
      line-height:17px;
      padding:3px 0 3px 0 ;
    }
    /* mac hide \*/
    ul#nav li  a {height:1%}
    /* end hide */
    div#menu ul li ul {display:none;}
    
    ul#nav li ul li a {
      background: #EBEBEB;
      display:block;
    }
    
    ul#nav li ul li a:hover {
      background-color:#666666;
      font-family:arial;
      color: #F99C08;
    }
    
    ul#nav li:hover ul ul, ul#nav li.over ul ul {display:none;}
    
    ul#nav li:hover ul, ul#nav li.over ul,
    ul#nav li li:hover ul, ul#nav li li.over ul {
      display:block;
    }
    
    
    .text {
      float:left;
      margin-top:30px;
      width:600px;
    }
    
    
    /* clear without structural mark-up */
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
     /* mac hide \*/
     * html .clearfix {height: 1%;}
    .clearfix {display: block;}
     /* End hide */
    </style>
    </head>
    <body>
    <div id="wrap" class="clearfix">
        <div id="menu">
            <ul id="nav">
                <li class="outerLi"><a href="##">Home</a> </li>
                <li class="outerLi"><a href="##">Services</a>
                    <ul>
                        <li><a href="##">Airport Transfers</a>
                            <ul>
                                <li><a href="#">Airport Transfers</a></li>
                                <li><a href="#">Airport Transfers</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="outerLi"><a href="##">Fleet</a> </li>
                <li class="outerLi"><a href="##">Accounts</a> </li>
                <li class="outerLi"><a href="##">Rates</a> </li>
                <li class="outerLi"><a href="##">Bookings</a> </li>
                <li class="outerLi"><a href="##">Enquiries</a> </li>
                <li class="outerLi"><a href="##">Info</a> </li>
                <li class="outerLi"><a href="##">Links</a> </li>
                <li class="outerLi"><a href="##">Contact</a> </li>
            </ul>
        </div>
        <div id="main">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    </body>
    </html>
    You can play around with those to suit

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul.. it looks just like i want it

    now.. there is going to be a lot of css so obviously i want the css file separate..

    my limited experience with css tells me that when you use an external css file.. some things need to be altered..

    this is the problem im having now..

    i have the javascript and the css in different files..

    firstly.. the menu doesnt work like it did when the code was all in the same page.. and secondly when i tried to validate the page i got this error

    This page is not Valid XHTML 1.0 Transitional!

    Below are the results of checking this document for XML well-formedness and validity.

    1. Error Line 8 column 70: end tag for "link" omitted, but OMITTAG NO was specified.

    ...type="text/css" media="all" href="mystyle.css">

    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".


    2. Info Line 8 column 0: start tag was here.

    <link rel="stylesheet" type="text/css" media="all" href="mystyle.css">
    if you look at the menu.. now located here.. even with the includes it doesnt display correctly

    http://www.londonheathrowcars.com/tingz/newmenu2.htm

    below are the codes for the three items..

    newmenu2.htm
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <link rel="stylesheet" type="text/css" media="all" href="mystyle.css">
    
    <script src="mymenu.js" language="javascript" type="text/javascript"></script>
    
    </head>
    <body>
    <div id="wrap" class="clearfix">
        <div id="menu">
            <ul id="nav">
                <li class="outerLi"><a href="##">Home</a>
                </li>
    
                <li class="outerLi"><a href="##">Services</a>
                    <ul>
                        <li><a href="##">Airport Transfers</a>
                            <ul>
                                <li><a href="#">Airport Transfers</a></li>
                                <li><a href="#">Airport Transfers</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
    
                <li class="outerLi"><a href="##">Fleet</a>
                </li>
    
    			<li class="outerLi"><a href="##">Accounts</a>
                </li>
    
    			<li class="outerLi"><a href="##">Rates</a>
                </li>
    			
    			<li class="outerLi"><a href="##">Bookings</a>
                </li>
    
    			<li class="outerLi"><a href="##">Enquiries</a>
                </li>
    
    			<li class="outerLi"><a href="##">Info</a>
                </li>
    
    			<li class="outerLi"><a href="##">Links</a>
                </li>
    
    			<li class="outerLi"><a href="##">Contact</a>
                </li>
    
            </ul>
        </div>
        <div id="main"> 
        <p>test</p>
            <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    
        </div>
    </div>
    </body>
    </html>
    mystyle.css
    Code:
    * {
      margin:0;
      padding:0;
    }
    
    body {
     background-color:#EBEBEB;
        text-align:center;
    }
    p {margin:0 0 1em 0}
    /*DIVS*/
    
    div#wrap {
      width:750px;
        margin:auto;
        position:relative;
      border:1px solid #666666;
      background-color:#ffffff;
        text-align:left;
    }
    
    div#main {
      width:750px;
      background-color:#ffffff;
    clear:both;
    }
    
    div#menu .bccor {
      border-color:#ffffff #ffffff #ffffff #ffffff;
    }
    ul#nav {
      list-style-type:none;
    
    }
    
    ul#nav li.outerLi {
      border-width:1px 1px 1px 1px;
      border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
      border-style:solid;
      position:relative;
      font-family:arial;
      float:left;
      font-size:80%;
      color: #666666;
      width:73px;
      background:white;
      text-align:center;
    }
    
     a {
     color: #666666;
     text-decoration: none;
    }
    
    ul#nav li ul {
     list-style-type:none;
     display:none;
        position:absolute;
        left:-1px;
        top:23px;
        width:75px;
    }
    ul#nav li {position:relative;}
    ul#nav li li {height:23px;border:1px solid #ccc;}
    ul#nav li ul ul{
        position:absolute;
        left:74px;
        top:0px;
        background:#fff;
        width:100px
    }
    ul#nav li  a {
      display:block;
      height:17px;
      padding:3px 0 3px 0 ;
    }
    
    div#menu ul li ul {display:none;}
    
    ul#nav li ul li a {
      background: #EBEBEB;
      display:block;
    }
    
    ul#nav li ul li a:hover {
      background-color:#666666;
      font-family:arial;
      color: #F99C08;
    }
    
    ul#nav li:hover ul ul, ul#nav li.over ul ul {display:none;}
    
    ul#nav li:hover ul, ul#nav li.over ul,
    ul#nav li li:hover ul, ul#nav li li.over ul {
      display:block;
    }
    
    
    .text {
      float:left;
      margin-top:30px;
      width:600px;
    }
    
    
    /* clear without structural mark-up */
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
     /* mac hide \*/
     * html .clearfix {height: 1%;}
    .clearfix {display: block;}
     /* End hide */
    mymenu.js
    Code:
    <!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sorry for the delay but I've been out for a while.

    The validator error is just the self closing tag that you have omitted on the link tag.

    e.g.This is what it should be:

    <link rel="stylesheet" type="text/css" media="all" href="mystyle.css" />

    I thought you would have spotted that

    The external files are working ok except that you haven't added the code I gave you in post 9 otherwise there is no difference form external to local

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah.. i must have pasted the wrong stuff..

    i realised that it was something to do with the '/'

    its just somebody told me a little while ago that you shouldnt close tags with that..

    you must get it a lot.. when you help someone.. that person will sub-conciously look to you for every answer.. overlooking the obvious..

    thanks for the help again

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes.. in my current site.. i am using this declaration, thats where the confusion originated..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    correct me if im wrong.. but with the above you should not close tags with />

    is that right?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes in html you don't close the tags like that but in xhtml all tags are closed which is why you self close tags that don't have closing tags.

    e.g. <br> becomes <br /> but you don't do things like <p /> be cause p does have a closing tag already </p>


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
  •