[SOLVED] Div Error (Nesting issue)

Chezshire · October 28, 2009

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:

/* 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"> 
  
  <!-- 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">© 2009 Dinners for Sinners, LLC.</a></p>
  	</div>
  	<!-- end legal-->
  
  </div>
  <!-- End Footer -->
</div>
<!-- End Wrapper -->

</body>
</html>

haku · October 28, 2009

Move div#banner above div#indicia.

Chezshire · October 29, 2009

Thank you Haku,

I've done as you instructed, moving the div#banner above the div#indicia in the index.html file (See html snippet below). Now that i've done that, the banner is meeting the top of the page as I had intended, but the indicia div is now tucking down by the same amount that the indicia div had been. I'm very confused and hoping to get this done tonight so i can go crawl in to bed (i've got the swine flu and it's horrible. Boring and horrible).

Thank you for your help Haku, if you have any other thoughts, or if i misunderstood what you meant for me to do please let me know.

Thank you.

Oops forgot the snippet:

  <!-- Begin Header -->
  <div id="header"> 
  

	  <!-- Begin banner -->
	  <div id="banner"> 
	  	<p>Welcome Sinners<p>
	  </div>
	  <!-- End banner -->

  <!-- Begin indicia -->
  <div id="indicia"> 
  	<a href="contact/contact.html">testlink</a>
  </div>
  <!-- End indicia -->
  
	 <!-- Begin Navigation -->
	  <div id="navigation"> 
	  	<p class="centered">Nav links will go here<p>
	  </div>
	  <!-- End Navigation -->

  </div>
  <!-- End Header -->

haku · October 29, 2009

Float all the divs inside the header left. But before that, fix your validation errors:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fxpg.us%2FxSCC%2FxFinalP%2Fdinnersforsinners%2Ftemplate%2Findex.html

Chezshire · October 29, 2009

I've done as instructed and validated my CSS and XHTML (I thought I was doing transitional, turns out i did strict - impressed myself - laughs) I've also set all the floats inside the header diver to the left. This caused the indicia to switch locations so now it is on right rather then being in the left and it's still 'scouched' down rather then butting the top of the screen as intended.

Thank you for the help thus far!

Revised DIV CSS:

#header {
background-color:#ccc8b3;

width: 900px; 
height: 230px;

margin: 0px;
border: 0px;
padding: 0px;

float: left;
}

#banner { 
 background: #555;
 width: 700px;
 height: 190px;

 margin: 0px;
 padding: 0px;
 border: 0px;

 float: left;
 display: inline;
}

#indicia {
 background-color:#ff9900;

 width: 200px; 
 height: 240px;

 margin: 0px;
 border: 0px;
 padding: 0px;

 float: left;
}



#navigation { 	 
 width: 700px;
 height: 40px;

 margin: 0px;
 padding: 0px;
 border: 0px;

 float: left;
 display: inline;
}

haku · October 30, 2009

Heh, I don't know how I missed this before. You have an &nbsp after the header tag. Remove this.

And float everything left. And put the indica div before the banner div again.

Chezshire · October 30, 2009

Thank you Haku, I feel so embarrassed. I was completely looking in the wrong place (I always plop little tags when i first build a table and old habits die hard (not that i've been doing this very long but evidently i've been doing it long enough to develop some bad habits - ugh).

Thank you for your assistance Haku

-Chez

Sign In

[SOLVED] Div Error (Nesting issue)

Recommended Posts

Chezshire

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information