Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Menu items - not displaying as a row ???

    Hi,

    I am now trying to get to grips with
    HTML5 and css.

    I have a simple html page here:

    My test Site

    This is the HTML:
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <title>Auto World</title>
    <meta name="keywords" content="A Website">
    <meta name="description" content="The Maddest Auto Community">
    <meta name="revisit-after" content="2 days">
    <meta name="robots" content="all, index, follow">
    <meta name="author" content="SimplePage.net">
    <meta name="Rating" content="General">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <noscript>
     <p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
    </noscript>
    
    
    	<header>
    		<section>
    			<h1>Auto World</h1>
    			<h2>The Maddest Auto Community</h2>
    		</section>
    	</header>	
    	<nav>
    		<u1>
    			<li><a ref=" ">Home</a></li>
    			<li><a ref=" ">Product a</a></li>
    			<li><a ref=" ">Product b</a></li>
    			<li><a ref=" ">Services</a></li>
    		</ul>
    	</nav>	
    	<footer>
    		
    		
    	</footer>	
    </body>
    </html>
    MY CSS is:
    Code:
    * 
    {
    margin:0 0;
    padding:0 0;
    }
    
    h1 
    {
    font-family:comic sans;
    font-size:30px;
    color:#FF0000;
    }
    
    h2 
    {
    font-family:comic sans;
    font-size:16px;
    color:#777;
    }
    	
    h3,h4,h5,p,li,a 
    {
    font-family:Helvetica,Arial,sans-serif;
    }  
    
    header nav
    {
    display:block;
    width:900px;
    margin:0 auto;
    }
    
    	header section
    	{
    	display:block;
    	height:60px;
    	background:555;
    	padding:30px 30px 30px 30px;
    	-moz-border-radius:0px 0px 25px 25px;
    	-webkit-border-radius:0px 0px 25px 25px;
    	}
    	
    nav
    {
    background:#332F28;	
    height:30px;
    border:1px solid #777;
    border-width:0px 1px 1px 1px;
    }
    
    	nav ul 
    	{
    	list-style:none;
    	}
    
    		nav ul li 
    		{
    		float:left;
    		margin:0px 24px;
    		}
    
    
    			nav ul li a
    			{
    			font-size:15px;
    			color:#777;
    			text-decoration:none;
    			display:block;
    			padding:6px 10px 4px 10px;
    			height:29px;
    			border-width:0px 2px;
    			border-style:solid
    			border-color:fff;
    			}
    Now, this is supposed to give me a rounded corner header
    and the menu items should be on the menu bar displayed nicely.

    For some reason I am not getting any of this.

    Can anyone see where I have gone wrong ?

    Thanks.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hey jeddi,
    Your rounded corners might work better like this -
    Code:
    	header section
    	{
    	display:block;
    	height:60px;
    	background:#555;
    	padding:30px 30px 30px 30px;
      border-radius: 0 0 25px 25px;
    	-moz-border-radius:0px 0px 25px 25px;
    	-webkit-border-radius:0px 0px 25px 25px;
    	}
    Your menu items will need to be floated to make them sit in the nav bar you've made. Look at this example - http://nopeople.com/CSS%20tips/ulmenu/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thank you

    As this my first foray into HTML5, I was beginning to think
    it was a hoax ha ha.

    Does anyone know why my menu isn't working


    My test site

    Thanks again.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You set a height on "nav" of 30px, but the list is 76px. It is dropping below the container. The container color is (to my eyes and monitor) hiding the top 30px of the menu.

    Remove the height from nav and let it set itself automatically and if you have color, make it friendly to the text.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Quote Originally Posted by jeddi View Post

    Does anyone know why my menu isn't working


    You probably want to float your li's to get them to sit side by side on your nav. Did you look at that example I linked you to? It has a horizontal menu much like this one, click on the Markup/CSS to see how it's coded.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi Excavator,

    yes I did take a look at the example.

    EDIT
    OK - see my problem
    I had a 1 (one) instead of an L in my <ul> tag

    Code:
    <nav>
    	<u1>
    		<li><a ref="#">Home</a></li>
    		<li><a ref="#">Product a</a></li>
    		<li><a ref="#">Product b</a></li>
    		<li><a ref="#">Services</a></li>
    	</ul>
    </nav>

    That was the problem
    Thanks.


    .
    Last edited by jeddi; 01-28-2013 at 01:13 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Quote Originally Posted by jeddi View Post
    EDIT
    OK - see my problem
    I had a 1 (one) instead of an L in my <ul> tag
    Check out the links about validation in my signature line. They can really help when looking for little errors like that.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •