homepage Welcome to WebmasterWorld Guest from 174.129.76.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 3:14 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Administrator brotherhood_of_lan us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 189 posted 3:18 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 3:24 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 189 posted 3:38 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 4:09 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 4:25 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 4:57 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 189 posted 5:13 pm on May 24, 2002 (gmt 0)

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

WebmasterWorld Administrator lorax us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 189 posted 5:29 pm on May 24, 2002 (gmt 0)

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?! ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved