CSS Trouble

look ma - no tables ~ ACK! ~ or CSS for that matter

[lorax]

Warning - CSS newbie here.

I was working on a page centered layout that has a div for a header, 3 divs for columns (the middle being 1px wide for a divider) and a single div for the footer.

It looked great - until I did something to blow it up. Is there a guide on how use CSS to build page structure correctly so I can fix this mess? Or if there's a thread here on WebmasterWorld please provide a link? One of my faults (of many) is that I'm not sure what to search/ask for. I keep finding alot of specifics about colors, text, block elements and the like but nothing that really ties CSS together so I can get a sense of a good working method for how to build a page from scratch.

And I apologize in advance if this has been asked/answered already. In fact, I feel like the answer is among all the resources that have already been posted and should bite me in the nose but I can't see the forest for the trees.

[brotherhood of LAN]

Hi lorax

>guide on how use CSS

papabear is one i believe, also a few others in here almost speak it as a language

w3schools is always a starting point

in regards to the 1px "divider"....you can use the css to apply attributes to your tables...ie padding = 5 or whatever....basically something that changes the layout whenever you apply a <td> tag. Im sure the CSS gods will arrive and answer soon :)

[lorax]

Thanks BOL,
Re: 1px divider - I hadn't thought of that. So I could basically get rid of that div and apply a border to the two remaining divs where they adjoin each other right?

[Eric_Jarvis]

I would definitely drop the divider div...when using css for layout it is far easier to think in terms of layered boxes that you can specify the detail of...padding inside the box, a border at the edge of the box and a margin around it...these are all a lot more flexible than the table equivalents

[Nick_W]

My bible for css is [westciv.com ]

They have a fantastic mailing list two and have just done a complete course on css-p

Nick

[tedster]

Here's a tutorial I got a lot from:
[thenoodleincident.com...]

You'll see many standard layouts, with sample code. Play around a bit and you start to absorb it like the black oil virus on X-Files.

[lorax]

absorb it like the black oil virus

Didn't that go up the nose?

Thanks all. Looks like I have plenty to read - and absorb :)

Gregg

[papabaer]

Hello Lorax!

CSS gets pretty addicting once it begins to make sense. The very first thing, when contemplating a CSS layout is to ALWAYS remember CSS-P is a study in "relationships!"

You will be telling certain page elements to "go stand over there" and others to "move over here." And then, you will be telling them to keep their distance from each other. Others you will just let "go with the flow!" It can quickly become a jumbled mess unless each element is also given instruction on how it relates to the other page elements.

The best way to learn is start simple: learn to position two <divs> in various combinations. Keep them seperate at first, and then try nesting them.

Don't change more than a few values at a time. View the changes and then test some more. Once you begin to understand the "relationships" that encompass CSS-P (positioning) as well as the BOX MODEL properties, it will become much easier.

One almost universal truth with CSS is that there are often a number of ways to accomplish a task. The flexibility is tremendous!

Keep it simple at first, play around with the code and learn from experimenting. Try doing a search for CSS layouts and start "tweaking" one to fit your needs.

We'll talk... ;)
- papabaer

[lorax]

Thanks papabaer,

start "tweaking" one to fit your needs

That's what got me into trouble in the first place! But then, I did take a pretty big bite with all the position controls in place - which I don't understand yet.

Yes...I have a feeling we'll be talking again soon.

BTW - didn't someone tell me you give out your beeper number in exchange for a tall frosty malt beverage?! ;)