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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Restaurant Menu Layout question

    Hi, I'm trying to use php to display several menu pages here:
    http://www.dreamcateringla.com/menutest.php

    What must I add to my code or style sheet to get the two columns to align at the top? Thanks if you have any advice, I'm a beginner.

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    You have multiple <body> and <head> tags, amongst others, which will invalidate your markup. Fix the errors in your code and hopefully that will fix:

    Click Here to view your page errors.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello charissa,
    One column should be floated and the other margined over enough to make room for the floated one.
    Your #menunav is not floated so #menulist cannot come up beside it.
    Try making these changes highlighted in red to your CSS-

    Code:
    		
    /*#container{width:780px; margin:0 auto;}*/
    #topbar {
    	width:auto; 
    	display:block; 
    	height:80px;
    	}
    	
    #menunav {
    /*display: block; */
    	width: 135px;
    float: left;
    	padding-left: 20px;
    	}
    	
    #main {
    	width:auto; 
    	display:block;
    	}
    
    /*
    div.spacer, solve an issue with #container height 
    in css 2 column layout.
    */
    
    div.spacer {
    	clear:both; 
    	height:10px; 
    	display:block;
    	}
    
    /* ------------------------------
    PAGE ELEMENTS #NAVBAR
    ------------------------------ */
    #menunav ul, #menunav ul li {
    	padding:0; 
    	margin:0; 
    	list-style:none; 
    /*float:left;*/
    	}
    	
    #menunav a {
    	color:#96454d; 
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serifbold;
    	font-weight: bold;
    	}
    	
    #menunav a:hover {
    	color: #a87a11;
    	}
    	
    
    #menunav li a:link, #menunav li a:visited  {
    	text-decoration:none; 
    	height: 14px; 
    	line-height: 40px; 
    /*display: inline; 
    float: left;*/ 
    	width: auto;
    	padding:0px;
    	margin-top: 5px;
    	}
    
    #menulist {
    	/*float: right;
    	top: 0px;
    	margin-left: 15px; */
    margin: 0 0 0 145px;
    }
    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
    •