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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    header and nav probs

    I have the header and then two inner divs to the header, one for the left and one for the right. Now I cannot get them to line up or show the background image correctly.

    Also my nav bar will not sit on the top of the maintextarea, instead it has decided to lift itself up.

    I enclose the 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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content=">
    <meta name="description" content="" />
    <title></title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header"><div id="left_header"><h1><a href="index.html" title="Lee Oasis Furniture Project HomePage">
    <img height="86" alt="logo" src="logo.gif" width="231" /></a></h1></div><div id="right_header"><p>Re-use Re-cycle</p></div></div><div class="clear"></div>
    <div id="nav">
    <ul class="nav">
    <li><a href="index.html">Menu</a></li><li><a href="index.html">Project</a></li><li>
    <a href="index.html">Links</a></li>
    <li><a href="index.html">Link 1</a></li><li><a href="index.html">Link 2</a></li><li>
    <a href="index.html">Link 3</a></li>
    <li id="last"><a href="index.html">Link 4</a></li></ul>
    </div>
    <div class="clear"></div><div id="main_textarea">
    <div class="textbox_outer">
    <div class="textbox_inner">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede 
    justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, Quisque rutrum. Aenean 
    imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
    Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
    sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, 
    blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante 
    tincidunt tempus. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
    sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p></div>
    <div class="clear"></div><div id="footer"><p>Copyright &copy; 2010</p>
    </div></div></div></div>
    </body>
    </html>
    the css is
    Code:
    html body #container {
    	height: 99.5%;
    	width: 65%;
    }
    html {
    	
    	margin: 0;
    	padding: 0;
    }
    body {
    	text-align: center;
    	font-size: 1em;
    	font-family: Helvicta, Arial, Sans Serif;
    	height: 1%;
    	line-height: 1.5;
    	background: #fff;
    }
    #container {
    	text-align: left;
    	margin: 0 auto;
    	padding: 0;
    }
    
    img, img a {
    	border: 0px;
    }
    a:link {
    	color: #00CC00;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:visited {
    	color: green;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:hover, a:active {
    	color: #CCCCCC;
    	font-weight: bold;
    	text-decoration: underline;
    }
    #nav {
    	height: 65px;
    	width: 95%;
    	margin: 0 auto;
    }
    #nav ul {
    width: 95%;
    margin: 0 auto;
    	
    }
    #nav ul li {display: inline; list-style: none;}
    
    #nav ul li a{
    	width: auto;
    	text-align: center;
    	text-decoration: none;
    	margin: 0;
    	padding: 2%;
    	border-right: 1px solid #660066;
    	font-size: 1.10em;
    	font-weight: bold;
    	color: #660066;	
    	text-transform: uppercase;
    }
    	
    #nav a:hover {text-decoration: underline; background-color: #CCC; padding: 2%;}
    	
    #nav ul li#last a{border-right: 0;}
    
    #header {
    	display: block;
    	width: 95%;
    	padding-top: 3%;
    	padding-bottom: 3%;
    	padding-left: 5%;
    	background: #fff;
    	margin: 0 auto;
    	}
    #right_header {background: #CCC url('recycle_cm1.jpg'); 
    		background-repeat: no-repeat;
    		width: 45%;
    		margin-left: 45%;
    }
    
    #left_header {width: 45.5%; float:left; position: relative;}
    	
    h1 {color: #000; font-family: sans-serif, Arial Black, helvicta}	
    h1 a:visited {color: green; text-decoration: none;}
    h1 a:link {color: #000; text-decoration: none;}
    h1 a:hover, a:active {color: #CCC; text-decoration: none;}
    h2 {color: #3B6B9C; margin-bottom: 5%;}
    h3 {color: #3399CC;}
    
    #maintextarea {float:left; width:99.5%;}
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    
    .textbox_outer {
    	background: #33CC33; 
    	border: 1px solid #CCC;
    	width: 90%;
    	
    }
    .textbox_inner {background: #fff;
    	width: 80%;
    	padding: 5%;
    	margin: 5%;}
    
    #footer 
    {
    height:40px;
    background:#CCC;
    width:99.6%;
    text-align: right;
    font-weight: bold;
    padding-right: 3px;
    padding-top: 3px;
    }
    Its been awhile since I have done css and I am at a loss on where to start to fix things. Though I have tried.

    url puddypaws.co.uk/test.html

    I needed to give the header an height of 150px, as it would not show with height: auto; so that problems is fixed now.
    Last edited by quartzy; 11-14-2010 at 06:33 PM. Reason: Resolved

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove float from the second div and add margin-left:48%; to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    thanks for your helpful comments, I have done what you say and it makes sense now.

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Don't forget to placed this as resolved.

    Steps:
    edit opening post>go advanced>set the prefix before the title as resolved
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

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