15 replies [Last post]
SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Im trying to set up a layout that isnt going exactly as I would like. All went well until I tried to set up the subheader-middle and I cannot get it to come up against the subheader-left. Below is the code Im using thus far. I know its crude, Im just trying to learn at this point. Ultimately what I wanted was a header then three blocks below the header (subheader-left, middle & right) then the menu block below that.

After I get the layout on that I would like to create two maybe three blocks on the left side below the menu secion and then a content section to the right of that and then a footer.

I may be going about this all wrong, so Im leaving room for that, so please be kind. I wanted it fluid but I was under the impression that a float would take the section out of the normal flow so I havent used that and Im not sure the best way to use absolute or relative positioning. The comments that are in there are kind of notes to myself 'cause Ive been working on this over the course of a few days and was attempting to keep track of any thoughts or things I learned from tutorials, so if they dont make sense of if they explain why I got this all messed up please let me know. Thanks in advance for your help.

At any rate, if you could offer some suggestions I'll do my best.

<html>
<body>
<div id="container">
	<div id="header">header</div>
	<div class="subheader-left">subheader-left</div>
	<div class="subheader-middle">subheader-middle</div>
	<div id="menu">menu</div>
	</div>
</body>
</html>

body {
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

a:link {}
a:active{}
a:hover{}
a:visited{}

#container {
border: 1px #000000 solid;
background: silver;
/*Centers container box*/
margin-left: auto;
margin-right: auto;
/*End Centering*/
height: 400px;
width: auto;
}

/*Use margin %'s to line up, in fluid manner, the boxes inside the container such as the header, sub-header and contentboxes.*/

#header {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: auto;
height: 50px;
}

.subheader-left {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: 20%;
height: 20px;
}

.subheader-middle {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
width: 40%;
height: 20px;
}

#menu {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: auto;
height: 20px;
}

Scotty Hall
Bartlesville, OK

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with a layout

floats do take the element out of the flow, but that's alright. Just float:left; the subheader-left and subheader-middle.

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

wolfcry911 wrote:
floats do take the element out of the flow, but that's alright. Just float:left; the subheader-left and subheader-middle.

I did tried that as you suggested and it had the desired effect on the subheader sections, but it also brought up the menu section on the same line, which I wanted it below the three subheader sections. Is there a way to force it below the three subheader sections yet still stay fluid?

Thanks for your help, I do appreciate the assistance.

Scotty Hall
Bartlesville, OK

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with a layout

yes, put clear:left on the menu

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

wolfcry911 wrote:
yes, put clear:left on the menu

Yep, that did it. I'll be so glad when I have a better grasp on this. Im really pumped up about what can be done with CSS I just gotta get past the learning curve.

I appreciate the help indeed, I guess I can get back to the rest of it now.

Scotty Hall
Bartlesville, OK

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

Okay, here's what I got so far and hopefully it will be a decent layout. Its certainly not the most sophisticated but I thought I would post it up and see if anyone has any suggestions on improvements or any problems and so forth.

<html>
<body>
<div id="container">
	<div id="header">header</div>
	<div class="subheader-left">subheader-left</div>
	<div class="subheader-middle">subheader-middle</div>
	<div class="subheader-right">subheader-right</div>
	<div class="menu">menu</div>
	<div id="content">Main Content</div>
	</div>
<div id="footer">Footer</div>
</body>
</html>

body {
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

a:link {}
a:active{}
a:hover{}
a:visited{}

#container {
border: 1px #000000 solid;
background: transparent;
/*Centers container box*/
margin-left: auto;
margin-right: auto;
/*End Centering*/
height: auto;
width: auto;
}

/*Use margin %'s to line up, in fluid manner, the boxes inside the container such as the header, sub-header and contentboxes.*/

#header {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: auto;
height: 75px;
}

.subheader-left {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: 5px;
margin-right: 3px;
margin-bottom: 3px;
width: 20%;
height: 25px;
float: left;
}

.subheader-middle {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
width: 57.75%;
height: 25px;
float: left;
}

.subheader-right {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-bottom: 3px;
width: 20%;
height: 25px;
float: left;
}

.menu {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: auto;
height: 25px;
clear: left;
}

#content {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
margin-left: .5%;
margin-right: .5%;
width: auto;
height: 450px;
margin: 5px;
}

#footer {
background: transparent;
border: 1px #000000 solid;
margin-top: 3px;
width: auto;
height: 50px
}

Scotty Hall
Bartlesville, OK

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

Well I see one issue now. I was checking this in FireFox and after I made the post I pulled it up in IE and noticed that the margins aren't right in IE.

The top, left & right of the header section is up against the container even though I specified the margins, but its perfect in FF. The three sub-headers are shifted to the right in IE and the bottom margin is not set in IE. Anyone have any ideas? I'll go back and experiment a little and see if I can come up with anythin. Geeesh, aren't they called 'standards' or something like that. Wasnt that supposed to mean everything was supposed to react the same way? Oh, well, what fun would it be then I guess.

Scotty Hall
Bartlesville, OK

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 2 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Help with a layout

SyntheticShield wrote:
The top, left & right of the header section is up against the container even though I specified the margins, but its perfect in FF. The three sub-headers are shifted to the right in IE and the bottom margin is not set in IE. Anyone have any ideas?

Firefox is right. I.E. is wrong.

Quote:
I'll go back and experiment a little and see if I can come up with anythin. Geeesh, aren't they called 'standards' or something like that. Wasnt that supposed to mean everything was supposed to react the same way? Oh, well, what fun would it be then I guess.

Bill and the guys seem to think they can make their own, better standards.

Make sure you have a DTD that puts IE6 in standards mode. The wrong one and it goes into quirks mode and uses an incorrect box model.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

You know, I hadnt thought of the DTD, primarily because I havent read up on that a lot. Ive run across it in the stuff I have printed out on CSS, but didnt pay a whole lot of attention to it. Here's what I got and if you can let me know if its right or wrong I'll go back through my material and see if I can come up with the right one. I suspect Im needing to use the strict rather than the transitional, would that be correct.

<!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">

Scotty Hall
Bartlesville, OK

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 2 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Help with a layout

<!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">

I believe that should be OK as far as putting IE into "standards" (speaking rather broady!) mode. But if you are coding a page from scratch why not use strict? If you use strict and take the time and care to fully validate your code, you are likely to have a much more portable page.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

I can do that, I just hadnt paid that much attention to the DTD as I was trying to get my head around CSS. CSS isnt that hard, its rather intuitive in a way but the positioning keeps throwing me. Should I float, do I need to clear, do I want to position relative, absolute, static, etc., all those good aspects.

But anyway, you are correct I should probably now, in the beginning of the learning, get used to validating and doing so frequently. I will try and use strict. Its just another aspect of the attempted transition from tables to CSS that Im going to have to learn.

Scotty Hall
Bartlesville, OK

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 2 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Help with a layout

SyntheticShield wrote:
I can do that, I just hadnt paid that much attention to the DTD as I was trying to get my head around CSS.

I haven't found it really any harder to code in strict than in transitional.

Quote:

CSS isnt that hard, its rather intuitive in a way but the positioning keeps throwing me. Should I float, do I need to clear, do I want to position relative, absolute, static, etc., all those good aspects.

The philosophy around here seems to be to layout your page in natural flow as much as possible, from top to bottom. Then use floats to place objects side by side when necessary or desired. The resulting code is felt to be much more readible and maintainable in the long run.

There are a number of messages on this board on why this is a better way to code, so take some time to look around.

Quote:

But anyway, you are correct

And so modest, too. Tongue

Quote:

I should probably now, in the beginning of the learning, get used to validating and doing so frequently. I will try and use strict. Its just another aspect of the attempted transition from tables to CSS that Im going to have to learn.

It will save you a lot of time and trouble. Needless to say I didn't do things at all that way myself, but I think now it would have saved *me* endless time and trouble.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

I assure you I will be looking around this board a lot more. I think that is another transition Im going to have to make is the way I look at the flow of things. I had not given that much thought to that either prior to getting into css. I would just layout the tables, save as a template, add the content, repeat, over and over and over. In fact I never used, intentionally anyway, css to even style the tables, I just used in line formatting.

Even if I should use *gasp* tables again, I'll definately be using css to control the presentation of it. It just seems silly now to do otherwise. The sites I have now and am trying to transition to css are a complete mess when I look at them through the possibilities of css. At the time though it all looked pretty good. However, I consider the time now that I spent on getting everything looking the way I wanted when I could have just easily changed a little css code and done the same thing, geeesh, what a waste of time.

I wont even get into whether or not the pages validate, thats a topic I never gave even a glancing thought to. Speaking of which, can I validate my pages even though they are not deployed yet? So far I just have them on my server at home. Or should I just upload the template and validate it that way as I make changes and so forth?

Scotty Hall
Bartlesville, OK

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 2 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Help with a layout

SyntheticShield wrote:
I
Even if I should use *gasp* tables again

You *should* use tables again. Use them for the presentation of tabular data. That's what they're for and they are still in xhtml as they jolly well should be.

Quote:
I wont even get into whether or not the pages validate, thats a topic I never gave even a glancing thought to. Speaking of which, can I validate my pages even though they are not deployed yet? So far I just have them on my server at home. Or should I just upload the template and validate it that way as I make changes and so forth?

Do yourself a *big* favour - get Firefox if you haven't already, and *then* get the "Web Developer" extension right away. Makes validation extremely simple to do instantly. There's some other FF extensions that make designing easier as well, but "Web Developerr" is the star.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

SyntheticShield
Offline
Regular
Oklahoma
Last seen: 12 years 23 weeks ago
Oklahoma
Joined: 2006-01-25
Posts: 20
Points: 0

Help with a layout

I just downloaded FF last night but didnt get the web developer extension but will do so as soon as I am done here.

I tried FF when it first came out and for some reason went back to IE. I like the tabular surfing and FF seems to be much faster than IE.

Scotty Hall
Bartlesville, OK

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 31 min 20 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Help with a layout

On the DTD issue, you must trigger standards mode in IE and Opera. In quirks mode, IE follows even fewer rules than usual and Opera in quirks acts like an IE wannabe. Use the DTD from the get-go so browsers use the same ruleset.

Since there is no sane reason to use deprecated elements or attributes, there is no reason to use a transitional/loose DTD on any new edocument. You may need to if the budget doesn't allow for refactoring an old document.

Loose or strict has minor effect on the browser, but does affect the validator. It will catch your outdated markup in strict, a Good Thing®.

The W3 html validator allows for file upload. The Firefox Web Developer extension will do it for you with the click of the mouse. Validate early, validate often. If the markup is wrong, no amount of css tail twisting will reliably give you what you expect.

Be sure to develop in a compliant browser—right now Firefox is the king. It is easier to patch good html to deal with IE bugginess than it is to make buggy code written against a buggy browser work for modern browsers.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.