Confused at how CSS layouts work - need help!

MarkGatESS · #1 (**permalink**) 08-05-2009, 06:19 PM

I got this CSS layout scheme online that I've been playing around with to make it look the way I want it to.

I'm working on trying to make a 1-1-3-1-1 column layout. The CSS uses a "container" DIV to try and separate all the different elements on the page (ie: header, content, footer). The original design was to have a header - divided into a "masthead" for the logo graphics and top page information and "top_nav" to put your header navigation bar. Then it was a 3-column layout to display information, then a footer.

Problem is, in between the header and footer sections, I wanted to have one area that spans across the page (same as the header and footer), three columns with a gap, then another section that would span across the page yet again before you get to the footer section.

I've tried using the "container" DIV for every section beyond what the original CSS layout called for in order to make it work as I described above. Problem is that it works fine in IE7, but is screwed up in Firefox 3.

Heres the URL for the test page. Open in IE7, then in FF3 and you'll see what happens:
Endoscopy.com - Endoscopy Support Services, Inc. of Brewster, NY
The stylesheet: http://essincny.x10hosting.com/style...mainstyles.css

The DIV section colors are just so I can see where everything is falling on the page - final design will be different but I need to get the layout sorted out first. I have the feeling that the CSS is in error and that IE7 is just "error correcting" to make it work since it's the only one it works in. I just don't know how to get the effect I want. Years ago, I could easily do it using nested tables and spanning cells, but I can't get the same effect with CSS!

Got any suggestions?

**weegillis** · #2 (**permalink**) 08-05-2009, 09:06 PM

Starting from scratch, lets look at the simplified version:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>1-1-3-1-1 stacked layout</title>
<style type="text/css">
#header,
#feature,
#segments,
#supplement,
footer {
 width: 100%;
 margin: 1em 0;
 padding: 0;
}
div#segments {
 overflow: auto;
}
#segments div {
 float: left;
 width: 31%;
 margin: 10px;
 padding: 0;
 color: #099;
 background-color: #eee;
 -moz-border-radius: 10px;
}
#segments div * {
 margin: 10px;
}
ul.nav {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}
ul.nav li {
 display: inline;
 margin: 1em;
)
</style>

</head>
<body>
<div id="outerwrap">
 <div id="header">
  <div>Masthead</div>
  <ul class="nav"><li><a href="#">Home</a></li><li>|</li><li><a href="#">About</a></li><li>|</li><li><a href="#">Products</a></li><li>|</li><li><a href="#">Contact</a></li></ul>
 </div>

 <div id="innerwrap">

  <div id="feature">
   <h1>The full width main feature section of the page</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu augue 
      nibh. Nullam vel tortor ut lectus faucibus varius non eget ligula. Vestibulum 
      viverra orci quis risus posuere eget rutrum nunc gravida. Proin iaculis 
      dapibus justo in elementum. Mauris iaculis sapien elit. Cras sodales, justo id 
      condimentum porttitor, nisi nunc interdum erat, a porta est justo ac massa.</p>
  </div>

  <div id="segments">
   <div>
    <h2>column 1</h2>
    <p>Donec ipsum nibh, mollis nec rhoncus at, euismod pretium nulla. Donec 
       hendrerit ultricies dui, eu adipiscing ante commodo non. In tempor dolor 
       vitae arcu dapibus suscipit. Sed commodo elementum pellentesque. Aliquam 
       erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et 
       ultrices posuere cubilia Curae; Suspendisse venenatis placerat nibh, in 
       pulvinar mauris pellentesque eget.</p>
   </div>
   <div>
    <h2>column 2</h2>
    <p>Aenean ac purus eu est tristique congue sit amet in magna. Ut enim 
       magna, elementum et tincidunt sagittis, vestibulum ac tellus. Praesent 
       tortor quam, auctor nec porttitor eu, suscipit at diam. Vestibulum ut 
       ultrices erat. Pellentesque pulvinar tincidunt justo at rhoncus.</p>
   </div>
   <div>
    <h2>column 3</h2>
    <p>Suspendisse nec nunc tristique eros scelerisque consectetur a vitae 
       tortor. Praesent nulla tellus, blandit in venenatis convallis, euismod 
       eu ante. Nam consequat, metus quis interdum vulputate, urna felis 
       condimentum nibh, vitae aliquet est neque ac risus. Fusce nec massa 
       tellus, nec bibendum risus.</p>
   </div>
  </div>

  <div id="supplement">
   <h2>The lower full width section</h2>
   <p>Cras vehicula augue et erat egestas ac pretium turpis scelerisque. Donec et 
      lobortis nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Curabitur vel turpis non sapien dictum aliquam in eu massa. Mauris vel luctus
      ligula. Cras fringilla nulla ut purus tincidunt quis tristique ligula elementum.</p>
  </div>
 </div><!-- /innerwrap -->

 <div id="footer">
  <ul class="nav"><li><a href="#">Footer</a></li><li>|</li><li><a href="#">navigation</a></li><li>|</li><li><a href="#">inline</a></li><li>|</li><li><a href="#">over full width</a></li><li>|</li><li><a href="#">of the page</a></li></ul>
  <p>The full width footer section of the page</p>
 </div>

</div><!-- /outerwrap -->
</body>
</html>

I believe this is what you're after, right?

MarkGatESS · #3 (**permalink**) 08-06-2009, 01:32 PM

Thanks - that does put the sections where they belong without them overlapping each other like how it was before, but I'm still a bit confused.

There are two DIV tags that have the id's "outerwrap" and "innerwrap" that apparently aren't associated with any specific CSS code in the stylesheet. Can just a generic, default-settings DIV tag be the container for everything or did I miss something in the stylesheet?

Also, can this stylesheet be modified with background images/colors, have a set width instead of a fluid width, and center the layout in the browser window?

What would I modify to accomplish that?

ran_dizolph · #4 (**permalink**) 08-06-2009, 05:12 PM

For centering the layout, you would apply your fixed width to the main DIV tag, then add margin:auto;

**weegillis** · #5 (**permalink**) 08-06-2009, 07:36 PM

None of the code from your page was used in the example. It's all from scratch. Your layout is simple enough to cross-match to this one, though, so you should be able to use much of the style sheet, above.

The "outerwrap" is an unstyled DIV that wraps everything in one nice bundle within the BODY. You can style it with background color and/or image and border. The "innerwrap" is also unstyled, but may have the above mentioned properties added to it. Notice that the "header", "innerwrap" and "footer" all reside just inside the outerwrap. They are said be first children of their parent element, "outerwrap".

To set the wrapper to a fixed width in the center of the screen, we would apply these CSS properties to that ID:

Code:

div#outerwrap {
 width: 780px;
 margin: auto;
 text-align: left;
}

and we would need to add a centering property to the BODY:

Code:

body {
 text-align: center;
}

The earlier example does not take into account font family, or other composition aspects, just the positioning of page elements. We could declare a default font family in the outerwrap, which all elements would inherit, outerwrap being the parent element for the whole page (inside the body). For instance:

Code:

html, body {
 margin:0;
 padding: 0;
 text-align: center;
 font-size: 100%;
 color: #000;
 background-color: #fff;
}
div#outerwrap {
 width: 780px;
 margin: auto;
 text-align: left;
 font: normal 75% Tahoma, Arial, Helvetica, sans-serif;
}

To incorporate these changes, lets just swap out the style sheet above with this one:

HTML Code:

<style type="text/css">
html, body {
 margin:0;
 padding: 0;
 text-align: center;
 font-size: 100%;
 color: #000;
 background-color: #fff;
}
body {
 background: transparent url(camera.gif) repeat fixed 0% 0%;
}
div#outerwrap {
 width: 780px;
 margin: auto;
 text-align: left;
 font: normal 75% Tahoma, Arial, Helvetica, sans-serif;
 background-image: none;
 background-color: #f7f7f7;
}
#header,
#feature,
#segments,
#supplement,
footer {
 width: 100%;
 margin: 1em 0;
 padding: 0;
}
div#segments {
 overflow: auto;
}
#segments div {
 float: left;
 width: 31%;
 margin: 1%;
 padding: 0;
 color: #099;
 background-color: #eee;
 -moz-border-radius: 9px;
}
#feature *,
#segments div *,
#supplement *,
#footer * {
 margin: 12px;
}
ul.nav {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}
ul.nav li {
 display: inline;
}
ul.nav a {
 margin: 1em;
}
#footer ul li {
 margin: 0;
}
</style>

camera.gif

I've taken it a little farther, in that some extras have been added, and a couple tweaks done to work with fixed width.

The body properties are RESET values to clear margins, paddings, and set foreground and background to black on white. The user's system font size is adopted as the base reference for fonts in the page.
A background image is added to the body. This one uses a small image tiled from left top (0% 0%) to bottom right (repeat). I wouldn't actually use this image, it's just here as an obvious example.
width is fixed and centered
font properties added. Note size is proportional to the base reference set in the body.
Tweaked margins slightly.
applied margin to li a in nav, rather than li, to keep it from being applied twice, once by li, and again by li a.

Notice that I don't use padding in any of this. I prefer to use margins on child elements over padding on parent elements as it is better supported and gives more predictable results. Use padding at your peril. Which is to say, test, test, test to be sure your page is rendering without surprises in all browsers. The same can be said for italics or oblique font styles. They too can serve up little surprises of their own, especially if the line wraps. This may be an old problem, but I'll bet it still exists for IE.

Let us know how you're doing once you study and absorb this new example.

mikefromvt · #6 (**permalink**) 08-06-2009, 08:56 PM

Hi.

There are substantial differences as to how IE7 renders web pages vs Firefox/Chrome/Safari. You can find workarounds on the Microsoft web site. In general, you want to utilize your web server's ability to detect browsers and to serve a different style sheet to different browsers, as required.

Hope that helps

Mike

darocha · #7 (**permalink**) 08-06-2009, 09:38 PM

Hi MarkGatESS,

The fix for your problem is a lot easier than you think.

1. Add float and width to the #main_contentdown css rule, like so:

#main_contentdown {

background-color:#FFCCFF;
float:left;
margin: 4px 0;
width:100%;

}

2. Remove the padding from #main_contentdown and add it to the P tag inside the #main_contentdown, like so:

#main_contentdown p {

padding:10px;

}

Tested in IE7 and Firefox 3.0, but shoud work in all css compliant browsers.

Thank you,

Darocha

**weegillis** · #8 (**permalink**) 08-06-2009, 10:29 PM

It's not fair to just throw stuff out at you if their simplicity still leaves you in a cloud. Sorry for that.

There are some basics to understand about CSS, understanding without which it's impossible to make sense of even a simple style sheet. A great starting place would be W3C (w3.org) and W3 Schools (w3schools.com). They have published specifications and recommendations for all versions of CSS, 1, 2 and 3.

SitePoint Books (sitepoint.com) is an excellent source of books for the beginner right on up to the hardened pro.

Cascade

Briefly, we will want to understand the meaning in the name Cascading Style Sheet. That it's a presentational aid is obvious enough, but what's with the 'cascading' part?

In a nutshell? Think "top, down." Properties that appear later in the style sheet order will have precedence over those that appear earlier. If one declaration disagrees with an earlier one, the later one wins out.

The cascade order begins with the browser defaults, followed by the system user style sheets, then by the first loaded external style sheet,

<link rel="stylesheet" href="#" type="text/css" />,

and possibly others, followed by embedded style sheets (those in the HEAD section of the HTML),

<style type="text/css">
/* Declaration */
selector {
property: value;
}
/*
type {}
#id {}
.class {}
:pseudo {}
*/
</style>

followed by inline styles that appear directly in the document body at element node level,

style="property: value;".

The document node is the end of the cascade, and any properties declared here will override all others should there be any disagreement.

It's possible to import a style sheet into another style sheet. Since the @import statement must be the first thing to appear in a style sheet, the imported style sheet would be higher in the cascade than the sheet that is importing it.

A typical site could be reduced to a handful of basic layouts with a few extras sprinkled about. The whole site will share presentational properties which can be in a primary CSS file; some layouts may need certain custom elements or variations which could be in various secondary CSS files; and specific sections might have further custom requirements, which properties would be in various tertiary CSS files.

To arrive at the correct cascade order, the tertiary would be loaded in the link element, and would import the secondary, which would in turn import the primary. The primary would import nothing.

Once parsed into the array, the cascade would be, Browser, User, Primary, Secondary, Tertiary, Embedded, Inline. Every page could take on customization, yet would all conform to the general site layout.

That's the cascade, in a nutshell. You'll want to study this concept carefully because it can be the cause of a lot of problems. In CSS, order does count.
Inheritance

The next concept to wrap your head around is INHERITANCE. This refers mainly to the family relationships established in the document tree. HTML is the patriarch of the whole affair, being the most outer element in the spec. BODY is the first child of HTML (as is HEAD, but we don't style it--it's meta data) and inherits all properties declared for HTML.

Subsequent elements in the body element inherit its properties (those that apply), and right on down to the innermost nodes in the page. Child elements inherit everything from all parent elements right out to HTML.

Let's say we declare a font family in BODY.

<body><div><p>this text will be in that font</p></div></body>

You'll run into inheritance problems with font sizes and background images, like everyone has. If a font is set to certain percentage, or em, for a parent element, its child elements will inherit the same property and set the font size to a percentage of the one set for its parent. This is especially evident in nested lists. Some 'RESET rules are in order to counteract this:

li li { font-size: 100%; }

This would tell the nested list to maintain a size consistent with other text elements in the parent container.

To reiterate, inheritance is a major concept, requiring a clear understanding. Many problems you will encounter can be traced back to inheritance issues. This should not be confused with the cascade. It plays just as important a role in determining which properties apply, where.
Specificity

The next real challenge to grasp is SPECIFICITY. This refers to the weight of a selector and has the ability to override the cascade. It's a cleaner form of brute force than that nasty little inline style, but because of where it may appear in the cascade, it may need some extra weight to mitigate properties declared further down.

Weight is assigned first to each part of a selector according to a set table of values for each part, set into four columns and the concatenation of each columns total equals to the specificity of the selector.

link: Assigning property values, Cascading, and Inheritance

If somewhere up in the cascade I give div#foo a font property, and give div.bar a different font property, then apply <div id="foo" class="bar">, the font declared in the #id {} rule would supersede the .class, but only for the element bearing this fragment identify (which can be only one in a page).

Greater specificity is the final trump card. You will want to keep specificity low when starting up, so it will be easier to up the ante further into the development as things start heating up. If a primary style sheet has an all powerful rule, nothing short of a sledge hammer will undo it at node level.

I won't presume to know so much as go any further than this. The above link should help get you started.

And if this is not enough to keep you busy, include DHTML, AJAX, and other forms of dynamic programming in your studies. There is a direct relationship between CSS and DOM event triggered behaviors.

In programming, a class will more likely relate to a function, not a style property, though node style properties may be directly written to via the DOM. It gets real exciting at this point because now CSS gets to show its real usefulness.

There are three parts to any web page: Content, Presentation, and Behavior.

Javascript calls to manipulate the style sheet are at the core of dynamic web pages, and Web 2.0 now has Javascript making calls to PHP, and PHP making calls back to Javascript. I'm guessing that anyone who is going to move up in this field will want to have a hand in the programming side of things, too.

**weegillis** · #9 (**permalink**) 08-06-2009, 10:59 PM

Oh, crickets! Found a confounded typo:

HTML Code:

/* This... */
#header,
#feature,
#segments,
#supplement,
footer {
 width: 100%;
 margin: 1em 0;
 padding: 0;
}

/* should read */

#header,
#feature,
#segments,
#supplement,
#footer {
 width: 100%;
 margin: 1em 0;
 padding: 0;
}

My apologies. WG

dyahnne · #10 (**permalink**) 08-07-2009, 12:18 AM

Not sure but it appears you may have an extra </div> tag.
<div id="container"> <div id="main_contentdown"> <p>bottom of the page information (again, hopefully)</p> </div> </div> </div>

MarkGatESS · #11 (**permalink**) 08-07-2009, 11:26 AM

Quote:

Originally Posted by dyahnne

Not sure but it appears you may have an extra </div> tag.
<div id="container"> <div id="main_contentdown"> <p>bottom of the page information (again, hopefully)</p> </div> </div> </div>

How could that be??! I went line-by-line to make sure that every open DIV tag had a closing /DIV tag - because that was my first thought of why it wasn't working properly! I even tabbed in each DIV I encountered when looking at it so that I could see the flow of open and closed tags?!

How'd I miss it???!!!
.
.
.
.
.
.
I hate coding!! :'(

jpatriar · #12 (**permalink**) 08-07-2009, 01:40 PM

It can be confusing to keep track of nested divs so I usually add a comment next to the closing div as to what class or id it belongs to. You can also temporarily set the background colors different to check alignment in different browsers.

I also run the page through an HTML Validator to check for any open tags.

**weegillis** · #13 (**permalink**) 08-07-2009, 04:16 PM

I'd like to see what your page is really doing but my firewall keeps blocking JS.Shellcode.AD. Can you remove any third party scripts that are currently running in this test page, please?

**weegillis** · #14 (**permalink**) 08-07-2009, 05:35 PM

Let's start at the top, and work our way down, cleaning and tweaking as we go.

DTD Check.
HTML element OPENTAG, Check; ENDTAG, Check.
- XML namespace Check.
- XML language Missing, xml:lang="en".
- HTML language Missing, lang="en".
- HTML dir attribute Included. Not needed. LTR is the browser default.
HEAD element OPENTAG, Check, ENDTAG, Check.
TTILE element OPENTAG, Check, ENDTAG, Check.
- Title length 64 characters. Domain name does not to be present.
- Title relevance May need further SEO.

META Content-Type Check. Could be in .htaccess or server config.

Code:

MIME type 'text/html' is already set, so you just need to add the character set.

.htaccess

AddDefaultCharset UTF-8

META Content-Language Check. Could be in .htaccess or server config.
Code:
```
.htaccess,

AddLanguage en-US .html .htm .php
```
META Language Missing, <meta name="Language" content="en-US" />.
LINK element:
- REL, stylesheet. Check.
- HREF, *.css. Check.
- TYPE, text/css. Check.
META Description Check.
- Length 319 characters. Excessive.
- Relevance "Official website of..." could be removed.
META Keywords Missing.

Here is a snippet that you can use to construct future pages. It assumes you have done the .htaccess configiuration so leaves out http-equiv meta data.

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" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="Language" content="en-US" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="#" type="text/css" />
</head>

And this is just the HEAD. In the BODY it starts getting messy because of the CSS, but it really does take a thorough going over to find problems and fix them. The learning you gain helps to tighten your methods and prevent the same errors in future.

One thing I did notice right off, though, is that you have assigned id="container" on multiple elements. It should be a class, not a fragment id if you wish to re-use the defined properties in the same page. There can be only one id="container" in any one page.

MarkGatESS · #15 (**permalink**) 08-11-2009, 01:13 PM

weegillis;
This was just a test on a free server. I was just working out the layout to get it to work so there's nothing really done on SEO or content other than something basic to get it to work. Content will be filled in later on the actual web server.

Sorry if there was some confusion. All that's been posted here is very helpful. Thanks!

**weegillis** · #16 (**permalink**) 08-11-2009, 02:59 PM

As a token of this project, I've kept the layout for an index page in the folder the image is in. Just follow the camera.gif link, but leave off the file name. The page is copyright, but you may use the methodology as it's been spelled out here already.

For a study piece it contains some interesting concepts. Notice the example of specificity (open the css) at work in resetting the margin for an inline link (class="context"). Comment out that rule and you'll see the inherited properties as they would apply to the inserted anchor element.

This is also a perfect example of making an earlier rule (higher in the cascade) a bit too strong, so as not to be overridden except with tougher measures, either adding specificity or adding !important to the value.

Code:

CSS

/* this margin is inherited and needs to be reset in (some) child elements */

#feature *,
#segments div *,
#supplement *,
#footer * {
 margin: 12px;
}

/* links in context have no margins */

#outerwrap a.context {
 margin: 0;
}


/* same as {margin: 0 !important;} choosing specificity over brute force */

Keep us posted on the boards, eh? Break a leg!

slimwoman · #17 (**permalink**) 08-17-2009, 06:20 PM

Thanks for teaching me more about CSS. I have gotten my feet wet with putting sites up on the net. I recommend W3C and all the free tutorials for all of us novice folks. Danielle Parsons

pmorrison2588 · #18 (**permalink**) 08-18-2009, 02:52 PM

Thanks a lot. But the whole process is much lengthy. But again it is important too, and I must learn it. I am studying some books on it, and thanks to you for the additional information.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Tracing DIV vs Table Layouts	morestar	Graphics & Design Discussion Forum	2	08-24-2009 10:37 AM
Search Engine Friendly Layouts	ADAM Web Design	Submit Your Site For Review	6	02-23-2006 03:41 AM
Menu layouts	eightpoint	Graphics & Design Discussion Forum	13	08-29-2004 05:09 PM