No replies
chezshire
Offline
newbie
Seattle
Last seen: 12 years 5 weeks ago
Seattle
Timezone: GMT-7
Joined: 2009-10-28
Posts: 1
Points: 2

Hi,
Newb here (1st quarter college student) I've nested my banner div within my header div with the ultimate intention of creating an include of the entire header portion of the design.

WHAT I'M TRYING TO DO EXACTLY:
Create one Div (Box/Container) which holds three divs (Boxes/containers) in the header portion of my layout. Within the header div, I want to position the three following boxes as so:

#Indicia :: I want this to be position to the left with a total width of 200pxs and a height of 230 pixels (This is working - yeah for me!)

#Banner :: I want to position this to the upper right, with a total of 700pxs and a total height of 130pxs.

#navigation :: I want to position this to the bottom right of the header div. I want it have a total width of 700pxs and a total height of 20pxs.

A mock up of what I'm hoping to ultimately build can be seen here (it's rough, i'll be making some design adjustments etc - but i did do everything down to the logo art so thats kind of kewl it's my first quarter project and I'm told kind of ambitious so any help is appreciated - thanks!!!):

WHATS WRONG:
The Banner div appears to be offset from the top by about 20 pixels. I want it to be aligned to the top of the div that it is contained in. All my code, css, html and links to view are listed below. Any help is very much appreciated.

Thank you Everyone

Concept (it's done in tables with html):
http://xpg.us/xSCC/xFinalP/dinnersforsinners/index.php

Current template file as it and the problem currently exist: http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/index.html

MY CODE:
dfs_divs.css:

* { 
 padding: 0; 
 margin: 0; 
}
 
#wrapper { 
 width: 900px;
 margin: 0 auto;
}
 
#header {
 background-color:#ccc8b3;
 
 width: 900px; 
 height: 230px;
 
 margin: 0px;
 border: 0px;
 padding: 0px;
 
 float: left;
}
 
	#indicia {
	 background-color:#aa9f4e;
 
	 width: 200px; 
	 height: 230px;
 
	 margin: 0px;
	 border: 0px;
	 padding: 0px;
 
	 float: left;
	}
 
	#banner { 
	 background: #555;
	 width: 700px;
	 height: 190px;
 
	 margin: 0px;
	 padding: 0px;
	 border: 0px;
 
	 float: right;
	 display: inline;
	}
 
	#navigation { 
 
	 width: 700px;
	 height: 40px;
 
	 margin: 0px;
	 padding: 0px;
	 border: 0px;
 
	 float: right;
	 display: inline;
	}
 
#leftcolumn { 
 background: #aa9f4e;
 
 width: 200px;
 height: 350px;
 
 margin: 0px;
 border: 0px;
 
 float: left;
}
 
#rightcolumn { 
 background: #fffff1;
 width: 680px;
 height: 330px;
 
 margin: 0px;
 padding: 10px;
 border: 0px;
 
 float: right;
 display: inline;
}
 
#footer { 
 width: 900px;
 height: 30px;
 
 background-color:#aa9f4e;
 
 border: 0px;
 margin: 0px;
 padding: 0px;
 
 clear: both;
}
 
#login {
 width: 200px;
 height: 30px;
 
 border: 0px;
 margin: 0px;
 padding: 0px;
 
 float: left;
 }
 
 div.login {
 min-height: 30px;
 display: table-cell;
 vertical-align: middle;
 }
 
#legal {
 text-align: center;
 
 width: 700px;
 height: 30px;
 
 border: 0px;
 margin: 0px;
 padding: 0px;
 
 float: right;
 display: inline;
 }

dfs_style.css:
Code:

/* Wildcard & Body are in dfs_divs.css */
 
body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: .90em;
 color: #aa9f4e;	
 background-color: #000;
	}
 
p { color: #615c49;
	text-indent: 1.5em;
	margin-bottom: .5em;
	}
 
p:first-child {
	text-indent: 0em;
	color: #888;}
 
ol {
	list-style-type: none;
	}
 
li {	
	margin: 6px 0px;
	}
 
/* Navigation Links - listed vertically - left column div */	
a {
	display: block;
 
	text-align: center;
	text-decoration: none;
	color: #e7e2c4;	
 
	margin: 5px 0px;
	border: 0px;
	padding: 0px 5px;
	}	 
 
	a:link {color: #e7e2c4;}
 
	a:visited {color: #e7e2c4;}
 
	#leftcolumn a:hover {color: #aa9f4e; background-color: #fffff1;}
 
	#leftcolumn a:active{color: #aa9600; background-color: #fffff1;}
 
	#footer a {color: #e7e2c4; font-style: bold;}
 
	#footer a:hover {color: #615c49; font-style: bold;}

index.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>
 
<title>DINNERS for SINNERS - CSS TEMPLATE & Style Guide</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="dfs_divs.css" />
<link rel="stylesheet" type="text/css" href="dfs_style.css" />
 
</head>
 
<!-- Content Begins -->
<!-- Content Begins -->
 
<body>
 
<!-- Begin Wrapper -->
<div id="wrapper">
 
  <!-- Begin Header -->
  <div id="header">&nbsp;
 
	  <!-- Begin indicia -->
	  <div id="indicia"> 
	  	<a href="contact/contact.html">testlink</a>
	  </div>
	  <!-- End indicia -->
 
		  <!-- Begin banner -->
		  <div id="banner"> 
		  	<p>Welcome Sinners<p>
		  </div>
		  <!-- End banner -->
 
 
		 <!-- Begin Navigation -->
		  <div id="navigation"> 
		  	<p class="centered">Nav links will go here<p>
		  </div>
		  <!-- End Navigation -->
 
  </div>
  <!-- End Header -->
 
  <!-- Begin Left Column -->
  <div id="leftcolumn"> 
    <!--NavLinks2 -->
  	<a href="blog.html">Site Errata</a>
  	<a href="blog.html">Content messaging</a>
  	<a href="blog.html">Secondary Nav</a>
  	<!-- end NavLinks2-->
  </div>
  <!-- End Left Column -->
 
  <!-- Begin Right Column -->
  <div id="rightcolumn"> 
  <h1>RIGHT COLUMN H1 Style: main content area</h1>
  <h2>RIGHT COLUMN H2 Style: main content area</h2>
  <p>RIGHT COLUMN: This is where the main content area is and all things will be featured etc. Lorem ipsum morietariy tault leben  temp tot tic co monoco leotmtal i heav a vfeer of 103 degrees (103 hylo fkuc!)</p>
  <ol>
  	<li>Ordered List Bullet point</li>
  	<li>Ordered List Bullet point</li>
  	<li>Ordered List Bullet point</li>
  </ol>
  <p>Additional paragraph testing typographic style and consistancies as words flow inta noen egzistantce tructues lorem ipsum lbdne ni ffecte. Rem ipsum morietariy tault leben  temp tot tic co monoco leotmtal i heav a vfeer of 103 degrees (103 hylo fkuc!)</p>  
 
  <p>Style sheet issues are as follows:<br /> 
  First-Child non-indent to paragraphs not working - why?<br /> 
  li tags not indenting - why?<br />
  Manual formatting required to center copyright info - why?
  </p>
 
  </div>
  <!-- End Right Column -->
 
 
  <!-- Begin Footer -->
  <div id="footer">
 
  	<!-- Request help - not centering vertically -->
  	<!-- Request help - not centering vertically -->
  	<!-- Request help - not centering vertically -->
 
  	<!-- Begin Login -->
  	<div id="login">
  		<p><a href="login.php">LOGIN</a></p>
  	</div>
  	<!-- End Login -->
 
 
   <!-- Begin legal -->
  	<div id="legal" >
  		<p align="center" class="centered"><a href="contact/contact.html">&copy; 2009 Dinners for Sinners, LLC.</a></p>
  	</div>
  	<!-- end legal-->
 
  </div>
  <!-- End Footer -->
 </div>
<!-- End Wrapper -->
 
</body>
</html>