Member Avatar for kained

Right I am doing a uni project and having real problems getting my template to allign properly. This
is what it looks like at the moment

Here is my CSS

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-image:url(Graphics/bkbeigbrst.jpg);
 background-repeat:repeat;
 
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#faux {
 background: url(faux-1-2-col.gif);
 margin-bottom: 5px;
 overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
 width: 100%
}
#header {
 color: #D8E8F6;
 width: 902px;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background-image:url(Graphics/topbanner.png);
 background-repeat:no-repeat;
 

}
#leftcolumn { 
 display: inline;
 color: #D8E8F6;
 margin: 10px;
 padding: 0px;
 width: 195px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 683px;
 display: inline;
 position: relative;
}

.clear { clear: both; background: none; }

/* Bottom Nav Bar */
#container {
	width:800px;
	height:600px;
	padding:0px;
}
ul#navbar {
	background:url(Graphics/bottombanner.png);
	background-repeat:no-repeat;
	margin:0;
	border-bottom:3px solid #98CB00;
	border-top:2px solid #00CCFF;
	list-style-type:none;
	height:31px;
	
}
ul#navbar li {
	float:left;
}
ul#navbar li a {
	display:block;
	padding:4px 10px px;
	font:bold 16px "Trebuchet MS";
	font-stretch:condensed;
	text-decoration:none;
	color:#00CCFF;
	letter-spacing: -0.1em;
}
ul#navbar li a:hover {
	color:#98CB00;
}
ul#navbar li a#current {
	background:url(Graphics/current.gif) no-repeat center bottom;
	color:#98CB00;
}
/* Bottom Nav Bar End */

/* Left NAV */
#menu2 {
	width: 200px;
	margin: 0px;
	border-style: solid solid none solid;
	border-color: #D8D5D1;
	border-size: 1px;
	border-width: 1px;
	}
	
#menu2 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu2 li a:link, #menu2 li a:visited {
	color: #3688BA;
	display: block;
	background:  url(Graphics/menu2.gif);
	padding: 8px 0 0 30px;
	}
	
#menu2 li a:hover {
	color: #3688BA;
	background:  url(menu2.gif) 0 -32px;
	padding: 8px 0 0 32px;
	}
	/* end of left nav */

Here is my HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
		 
		    	 
			   
		 </div>
		 <!-- End Header -->
		 
         <!-- Begin Faux Columns -->
		 <div id="faux">
		 
		       <!-- Begin Left Column -->
		       <div id="leftcolumn">
			   <div id="menu2">
		<ul>
			<li><a href="#1" title="Link 1">Home</a></li>
			<li><a href="#2" title="Link 2">Links</a></li>
			<li><a href="#3" title="Link 3">Report a Loo </a></li>
			<li><a href="#4" title="Link 4">Find a Loo </a></li>
			<li><a href="#5" title="Link 5">FAQ</a></li>	
		</ul>
</div>
		 
		             
		 
		       </div>
		       <!-- End Left Column -->
		 
		       <!-- Begin Right Column -->
		       <div id="rightcolumn">
		       
	                 
					 
					 <br /><br />
					 
					 <h1>Faux Column CSS Layouts</h1>	 
					 
				     <p>
					 
					       These 2 Column Faux CSS Layouts use a background image to make it look like the 
						   left and right columns are equal in height and independent of each other.
						   
						   <br />
						   <br />
						   
						   Things couldn't be further from the truth. I created a parent column called faux
						   and vertically tiled the image, that contained both the left and right child columns. 
						   I then vertically tiled the faux background image and viola. 
						   
						   <br />
						   <br />
						   
					       I first found about this method from the <a href="http://www.alistapart.com">
				           alistapart site</a> by a guy called <a href="http://simplebits.com/">Dan Cederholm</a>				   
						   
			     </p>
		       
			   <div class="clear"></div>
			   
		       </div>
		       <!-- End Right Column -->
			   
			   <div class="clear"></div>
			   
         </div>	   
         <!-- End Faux Columns --> 

         <!-- Begin Footer -->
         <div id="footer"><div id="container">
    <ul id="navbar">
      <li><a href="/" id="current">Home</a></li>
	  <li><a href="#">Links</a></li>
	  <li><a href="#">Report</a></li>
	  <li><a href="#">Find</a></li>
	  <li><a href="#">FAQ</a></li>
	      </ul>
  </div> </div>
		 <!-- End Footer -->
		 
   </div>
   <!-- End Wrapper -->
</body>
</html>

Any help would be greatly appreciated.


dave

  • 2 Contributors
  • 3 Replies
  • 85 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kained
Member Avatar for peter_budo

You need to be more specific about your problem. Just droping numerous lines of code on us wouldn't get you anywhere. Sort of "I'm trying to align to some element" would help

Member Avatar for kained

Yeah fair enough. Havn't done a coding question on here for ages.


Right basicly what i want to happen is everrything on the right line up to the panaramic garphic thing at the top.

So the white box with "faux colunm....." should line up to the top graphic as should the bottom navigational elements including those green and blue lines that extend a bit behonmd the rest of the nav bar for some reason.

Ideally i would also like the left hand nav bar elements to line up with the "your'e in London" logo in the top left. Then the small area of white in between the nav bar and the "faux columns" main content bit should be alligned to the gap between the logo and the panaramic graphic. Then the "faux....." box should be left hand alligned to the start of the panaramic graphic.

I think i have mucked up something in the container and the wrapper and i may have to resize a graphoic or two but can't really see what i have done wrong. Have played about the paddings and that was the best i could come out with thus far.

Any help much appreciated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.