SitePoint Sponsor

User Tag List

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

    css list menu help needed

    ok i have a drop down menu.. i just need to make the items closer to each other.. how can i do this.. here is my code

    Code:
    <ul id="nav">
    
    	<li class="home"><img src="home.jpg"/>
    		<ul>			
    		</ul>
    	</li>
    
    	<li><img src="services.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','fleet2.jpg',1)"><img 
    src="fleet.jpg" name="Image1" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','exec2.jpg',1)"><img 
    src="exec.jpg" name="Image2" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','acc2.jpg',1)"><img 
    src="acc.jpg" name="Image3" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    	<li><img src="rates.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','quote2.jpg',1)"><img 
    src="quote.jpg" name="Image4" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','air2.jpg',1)"><img 
    src="air.jpg" name="Image5" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','sea2.jpg',1)"><img 
    src="sea.jpg" name="Image6" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','day2.jpg',1)"><img 
    src="day.jpg" name="Image7" width="144" height="26" border="0"></a></li>
    			
    		</ul>
    	</li>
    
    		<li><img src="enqbook.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','enq2.jpg',1)"><img 
    src="enq.jpg" name="Image8" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','book2.jpg',1)"><img 
    src="book.jpg" name="Image9" width="144" height="26" border="0"></a></li>
    
    		</ul>
    	</li>
    
    		<li><img src="info.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','faq2.jpg',1)"><img 
    src="faq.jpg" name="Image10" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','tc2.jpg',1)"><img 
    src="tc.jpg" name="Image11" width="144" height="26" border="0"></a></li>
    <li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','site2.jpg',1)"><img 
    src="site.jpg" name="Image12" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    		<li><img src="links.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','gen2.jpg',1)"><img 
    src="gen.jpg" name="Image13" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','hotels2.jpg',1)"><img 
    src="hotels.jpg" name="Image14" width="144" height="26" border="0"></a></li>
    <li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','events2.jpg',1)"><img 
    src="events.jpg" name="Image15" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    		<li><img src="contact.jpg"/>
    		<ul>
    
    		</ul>
    	</li>
    </ul>
    Code:
    body {
    	font-family: arial, helvetica, serif;
    }
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	width: 10em;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1em;
    	left: 0;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #content {
    	clear: left;
    }
    here is what the page looks like.. http://www.heathrowminicab.com/menu/menu.html

    in firefox the menu works fine but is too spaced.. in my IE, the menu dont work past the second button in the submenu.. again. help is needed here.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't checked IE, but this should fix the spacing issue. Move the width to the sub-ul...
    Code:
    li { /* all list items */
    	float: left;
    	position: relative;
    /* cut-- width: 10em; --cut */
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1em;
    	left: 0;
            width: 10em;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok the spacing works fine now.. but in IE it is still acting very strange.. pretty much not working.. here is the css

    Code:
    body {
    	font-family: arial, helvetica, serif;
    }
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1em;
    	left: 0;
    	width: 10em;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #content {
    	clear: left;
    }
    http://www.heathrowminicab.com/menu/menu.html

    so basically it seems 100% fine in firefox, but completely wrong in IE..
    has it got to do with the javascript.. or the css? i really dont know.. can anyone see the problem?

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    li { /* all list items */
    	float: left;
    	position: relative;
    	background-color:#fff;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1.7em;
    	left: 0;
    	width: 10em;
    }

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok cool, im making some progress.. i have integrated the menu into my original website where all the content/divs are placed within a centred div container called 'wrap'

    http://www.heathrowminicab.com/menu/menu.htm

    once again the site seems completely fine in firefox..

    in IE tho there are 2 little problems.. firstly there is a white space on the right hand part of the page.. so IE thinks there is something too wide to fit in my wrap layer..

    also when you mouse over the submenu buttons.. the outline seems cut off just as the button reaches the left hand side of the next menu header.. i hope this can be seen in IE as it will be much clearer when it is seen.. anyway.. can anyone see why these two things are happenin??

    below is the page code and the css..

    page
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title>Heathrow Minicab | 24 Hour London Airport Taxi Transfer Service</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    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", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    </script>
    <script type="text/javascript" src="image.js">
    </script>
    <script type="text/javascript"> MM_preloadImages('fleet.jpg','fleet2.jpg','exec.jpg','exec2.jpg','acc.jpg','acc2.jpg','quote.jpg','quote2.jpg','air.jpg','air2.jpg','sea.jpg','sea2.jpg','day.jpg','day2.jpg','enq.jpg','enq2.jpg','book.jpg','book2.jpg','faq.jpg','faq2.jpg','site.jpg','site2.jpg','tc.jpg','tc2.jpg','gen.jpg','gen2.jpg','hotels.jpg','hotels2.jpg','events.jpg','events2.jpg')
    </script>
    
    </head>
    <body>
    <div id="wrap">
    <div id="top">
    <img class="logo" src="Heathrow-Minicab-Logo.jpg" title="Heathrow Minicab Header" alt="Heathrow Airport Logo Transfer Header Image along the top of the website"/>
    </div>
    <div id="menu">
    <ul id="nav">
    
    	<li class="home"><img src="home.jpg"/>
    		<ul>			
    		</ul>
    	</li>
    
    	<li><img src="services.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','fleet2.jpg',1)"><img 
    src="fleet.jpg" name="Image1" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','exec2.jpg',1)"><img 
    src="exec.jpg" name="Image2" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','acc2.jpg',1)"><img 
    src="acc.jpg" name="Image3" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    	<li><img src="rates.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','quote2.jpg',1)"><img 
    src="quote.jpg" name="Image4" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','air2.jpg',1)"><img 
    src="air.jpg" name="Image5" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','sea2.jpg',1)"><img 
    src="sea.jpg" name="Image6" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','day2.jpg',1)"><img 
    src="day.jpg" name="Image7" width="144" height="26" border="0"></a></li>
    			
    		</ul>
    	</li>
    
    		<li><img src="enqbook.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','enq2.jpg',1)"><img 
    src="enq.jpg" name="Image8" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','book2.jpg',1)"><img 
    src="book.jpg" name="Image9" width="144" height="26" border="0"></a></li>
    
    		</ul>
    	</li>
    
    		<li><img src="info.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','faq2.jpg',1)"><img 
    src="faq.jpg" name="Image10" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','tc2.jpg',1)"><img 
    src="tc.jpg" name="Image11" width="144" height="26" border="0"></a></li>
    <li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','site2.jpg',1)"><img 
    src="site.jpg" name="Image12" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    		<li><img src="links.jpg"/>
    		<ul>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','gen2.jpg',1)"><img 
    src="gen.jpg" name="Image13" width="144" height="26" border="0"></a></li>
    			<li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','hotels2.jpg',1)"><img 
    src="hotels.jpg" name="Image14" width="144" height="26" border="0"></a></li>
    <li><a href="prop_other.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','events2.jpg',1)"><img 
    src="events.jpg" name="Image15" width="144" height="26" border="0"></a></li>
    		</ul>
    	</li>
    
    		<li><img src="contact.jpg"/>
    		<ul>
    
    		</ul>
    	</li>
    </ul>
    
    
    
    </div><div id="bleft">
    <h1>Heathrow Minicab Services</h1>
    <p class="main">We are an established London based company. We specialise in speedy and efficient 24 hour Heathrow <b>Taxi</b> & <b>Minicab</b> services to and from <b>London Heathrow</b> (LHR). Our main base is located five minutes away from the airport and we can provide reliable pick-ups and drop-offs to any destination in the UK.</p>
    <p class="main">Our team of trained staff will do everything they can to make your journey quick, safe, and most importantly, stress free. You will have your own car and driver waiting for you at the airport when you arrive. They will assist you with your luggage and wait for you if you need to change money or pay a quick visit to the bathroom. Just let us know what you need and we'll be happy to help.</p>
    
    </div>
    <div id="bright">
    
    
    </div>
    </div>
    </body>
    </html>
    stylesheet
    Code:
    body {margin:0; padding:0; background-color:#EBEBEB;}
    
    div#wrap {width:750px; position:absolute; left:50%; margin: 0 0 0 -375px; border:1px solid #666666; padding:0; background:#ffffff;}
    
    div#top {width:750px; height:160px; background:#666666; text-align:left;}
    
    div#menu {width:750px; background:#fff; text-align:left; margin-top:25px; margin-left:35px;}
    
    div#bleft {width:374px; background:#fff; float:left; text-align:left;}
    
    div#bright {width:374px; background:#fff; float:right; text-align:left;}
    
    
    h1 {margin-top:30px; margin-left:35px; margin-bottom:20px; font-family:arial; color:#F99C08; font-size:13pt;}
    
    p.main {margin-top:0px; margin-left:35px; margin-bottom:30px; margin-right:40px; color:#666666;
    font-family:arial; font-size:9pt;}
    
    img.logo {float:left; margin-left:0px; margin-top:0px;}
    
    img {border:0px;}
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	background-color:#fff;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1.7em;
    	left: 0;
    	width: 10em;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #content {
    	clear: left;
    }

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and also i managed to move the submenus down slightly**by changin the 1.7 to 2.0** (removing the 2nd border problem being cut off by the white bit) . but that caused the submenu to dissappear when the mouse moved towards it from being on the menu header so that was no good..

    Code:
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1.7em;
    	left: 0;
    	width: 10em;

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, remove the width value for the menu div.
    Second, try putting this in your head:
    Code:
    <!--[if IE]>
    <style type="text/css">
    #nav li ul li{
    position:relative;
    top:1px;
    }
    </style>
    <![endif]-->

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes thank you.. i think that has fixed it..

    there is one more small thing annoying me..

    in firefox, if you mouse over services.. the menu below it appears.. if you then move the mouse down towards the first item in the subemnu as slow as possible.. it works fine..

    if you do this in IE.. the menu below dissappears.. do you know why this is?

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you still have a problem if you change that 'top' value back to 1.7em as I suggested earlier?

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES that has fixed it...

    doe-moe ah-ree-gah-toe

    koe-ray gah ski dess


    can i ask tho.. why does 0.1 difference in em do this?

  11. #11
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That extra space caused the gap. Simple as that.

    However, what is 'koe-ray' supposed to be?

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is the phoentic way in japanese to say i like this apparently

  13. #13
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! You mean 'kore'... ko (as in 'cop') re (as in 'red').


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
  •