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
    Jan 2010
    Posts
    124
    Thanks
    50
    Thanked 0 Times in 0 Posts

    alignment problem.

    Hello there, Im having a problem on how to align my navigation exactly on the bottom of my header. I put my logo above the navigation to push it down but the navigation goes outside of my header.


    my question is, what is the best way to locate my navigation exactly at the bottom of my header. I mean inside and bottom of my header.

    please take a look at my html.

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    }
    body {
    	background: #99CCCC;
    	margin: 5px 0px 0px 0px;
    }
    
    #header {
    	width: auto;
    	height: 150px;
    	background-image:url(hbg.jpg)
    }	
    #main {
    	width: 90%;
    	height: 500px;
    	background-color:#ffffff;
    	margin: auto;
    	
    }
    #buttons {
    	width: 100%;
    	text-align:center;
    	height: 35px;
    
    }
    #buttons a{
    	margin: auto;
    	background:url(button.jpg) no-repeat;
    	width: 120px;
    	height: 35px;
    	font-size: 16px;
    	display: inline-block;
    	text-align: center;
    	text-decoration: none;
    	color: #000;
    	padding-top: 10px;
    }
    #buttons a:hover {
    	text-decoration: blink;
    	background: url(button_g.jpg) no-repeat;
    
    }
    #logo {
    	text-decoration: none;
    	font-size: 24px;
    	color: #000;
    	font-weight: bold;
    	padding-top: 20px;
    	display: block;
    }
    #logo h5 {
    	font-size: 12px;
    	background:none;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style: normal;
    		
    
    	
    	
    }			
    	
    
    
    -->
    </style></head>
    
    <body>
    <!-- header begins -->
    <div id="header">
    
    <div id="logo">
    <a href="#">LOGO</a><br>
    <a href="#">need help</a>
    <h5><a href="#">Design By:super noob</a></h5>
    
    
    
    </div>
    <div id="buttons">
    <a href="#" target="_self">Home</a>
    <a href="#" target="_self">Blog</a>
    <a href="#" target="_self">Gallery</a>
    <a href="#" target="_self">About Us</a>
    <a href="#" target="_self">Contact Us</a>
    
    
    </div>
    </div>
    <!-- header end -->
    <!-- main start -->
    <div id="main">
    
    
    
    </div>
    <!-- main end -->
    
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    what is the best way to locate my navigation exactly at the bottom of my header.
    Code:
    #header {
    	width: auto;
    	height: 150px;
    	background-image:url(hbg.jpg);
    	position:relative;
    }	
    
    #buttons {
    	width: 100%;
    	text-align:center;
    	height: 35px;
    	position:absolute;
    	bottom:0;
    	/*and some left/right value to correct the horizontal position*/
    }
    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
    Jan 2010
    Posts
    124
    Thanks
    50
    Thanked 0 Times in 0 Posts
    Hi sir abduraooft, yes I did align my navigation and thanks to you. Can you please help me also about my right side. I set the height to 100% and auto but still it wont go down through the bottom..

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	background: #000;
    	margin: 5px 0px 0px 0px;
    }
    	
    
    #header {
    	width: auto;
    	height: 150px;
    	background-image:url(hbg.jpg);
    	position: relative;
    	
    }	
    #buttons {
    	width: 100%;
    	text-align:center;
    	height: 35px;
    	position: absolute;
    	bottom: 0;
    
    }
    #buttons a{
    	margin: auto;
    	background:url(button.jpg) no-repeat;
    	width: 120px;
    	height: 35px;
    	font-size: 16px;
    	display: inline-block;
    	text-align: center;
    	text-decoration: none;
    	color: #000;
    	padding-top: 10px;
    }
    #buttons a:hover {
    	text-decoration: blink;
    	background: url(button_g.jpg) no-repeat;
    
    }
    #logo {
    	text-decoration: none;
    	font-size: 24px;
    	color: #000;
    	font-weight: bold;
    	padding-top: 20px;
    	display: block;
    }
    #logo h5 {
    	font-size: 12px;
    	background:none;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style: normal;
    }
    
    #wrap {
    	width: 90%;
    	min-height: 100%;
    	background-color:#ffffff;
    	margin: auto;
    	position: relative;
    }	
    		
    #right {
    	float: right;
    	width: 21%;
    	height: 100%;
    	text-align:center;
    	background: #999999;
    	margin: 2px 2px 2px 2px;
    	
    }
    #main {
    	position: relative;
    }
    #info1 {
    	width: 78%;
    	padding: 2px 0px 2px 2px;
    	height: auto;
    }
    #info2 {
    	width: 78%;
    	padding: 20px 0px 2px 2px;
    	height: auto;
    
    }
    #info1 h4{
    	font-family: Georgia, Arial, Helvetica, sans-serif;
    	font-size:18px;
    	font-weight:normal;
    	color: #892825;
    	padding-left: 7px;
    	text-align:left;
    }
    .b1 {
    	background: url(mbg.jpg) repeat-x;
    	padding: 2px 2px 2px 10px; 
    }
    
    .text {
    	padding: 0px 0px 0px 5px;
    }	
    .text img {
    	float: right;
    	padding: 4px 4px 4px 4px;
    	}
    .img_s {
    	margin-left: 10px;
    	}
    .view {
    	text-align:right;
    	padding-right:5px;
    	padding-top: 5px;
    	padding-bottom: 10px;
    }	
    -->
    </style></head>
    
    <body>
    <!-- header begins -->
    <div id="header">
    
    <div id="logo">
    <a href="#">My name</a>
    <h5><a href="#">Design By:noob</a></h5>
    
    </div>
    <div id="buttons">
    <a href="#" target="_self">Home</a>
    <a href="#" target="_self">Blog</a>
    <a href="#" target="_self">Gallery</a>
    <a href="#" target="_self">About Us</a>
    <a href="#" target="_self">Contact Us</a>
    
    </div>
    </div>
    <!-- header end -->
    
    <!-- wrap start -->
    <div id="wrap">
    
    <div id="right">wwwwwwwwwwww<br />
    wwwwwwwwwwwwwww<br />
    wwwwwwwwwwwwwww<br />
    wwwwwwwwwwwww<br />
    
    
    
    </div>
    
    
    <!-- main begin -->
    <div id="main">
    <div id="info1">
    <div class="b1">
    <h4> Welcome to my Site </h4>
    <hr />
    <div class="text">
    <img src="pic1.jpeg" width="150" height="150" />
    Nunc euismod imperdiet tellus a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin fermentum lorem quis neque euismod tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a ligula ante. Ut tincidunt ultricies vulputate. Nulla facilisi. Nam ac tempus neque. Donec interdum velit vel eros molestie at imperdiet eros tempus. Proin eget risus metus. Vestibulum pharetra eleifend sapien porta molestie. Quisque aliquam facilisis est sit amet eleifend. Nam hendrerit aliquam neque, quis malesuada elit tempus nec. Vestibulum ultricies leo
    adipiscing elit. Nunc euismod imperdiet tellus a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin fermentum lorem quis neque euismod tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a ligula ante. Ut tincidunt ultricies vulputate. Nulla facilisi. Nam ac tempus neque. 
    <div class="view"><a href="#">read more</a></div>
    </div>
    </div>
    </div>
    
    <div id="info2">
    <div class="b1"><h5>7 Wonders of the World</h5>
    <hr />
    <img src="pic2.jpeg" width="150" height="150" class="img_s" /><img src="pic3.jpeg" width="150" height="150" class="img_s" /><img src="pic2.jpeg" width="150" height="150" class="img_s" /><img src="pic3.jpeg" width="150" height="150" class="img_s" /><br /><br /><div class="view"><a href="#">view more</a></div>
    <hr />
    
    Mauris vitae odio odio, non convallis ante. Curabitur fermentum hendrerit velit a mollis. Nullam eget mi ut leo tempus tincidunt. Donec non neque ut purus ullamcorper aliquam. Cras adipiscing suscipit nisi quis mollis. Vestibulum in justo libero, ac aliquet erat. Nulla euismod eleifend orci sed malesuada. Nullam fermentum tempor viverra. Praesent adipiscing risus at nisl vulputate fringilla. Vivamus... 
    <div class="view"><a href="#">read more</a></div>
    
    
    
    
    
    
    </div>
    </div>
    </div>
    <!-- main end -->
    
    
    </div>
    <!-- wrap end -->
    
    
    
    </body>
    </html>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You'd need to use "faux columns", see http://www.communitymx.com/content/a....cfm?cid=afc58
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    finoy_ako (04-17-2011)


  •  

    Posting Permissions

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