Home  |  About  | Last |  Submit  |  Contact
AllQuests.com




Previous Question:  Quiz Time Which sports league  General ChatNext Question:  how do do this  CSS
Question learning to use CSS for layout ( SitePoint Forums CSS )
Updated: 2008-11-23 09:20:03 (4)
learning to use CSS for layout

Hi All!
New to the group- hope you can help a rookie learn a bit.
I'm trying to learn to use CSS to layout a page instead of tables.
http://www.dreamscraps.com/index2.html

The link above is my first attempt.
I worked pretty hard to make IE5 (the browser I use the most) and NN4x happy, I used 2 style sheets (scraps.css and scrapsnn.css).
I finally got it to look how I wanted it in both browsers.
Then I viewed the page in Opera 6, Mozilla 1.0 and NN6.2.
It's not too bad in the gecko browsers - but the footer rides a bit higher than I want.
In Opera the menu (#menu) div is all screwed up.
Would someone please give me some advise on what I'm doing wrong? I would really appreciate any tips.
Also ... how did I do for the first time with CSS layout?
I actually nicked the layout from a site and modified it for my own needs. I'm not using all of the styles you'll see in the sheets.

Thanks
Daf

Answers: learning to use CSS for layout ( SitePoint Forums CSS )
learning to use CSS for layout

Help me learn. In what way is it buggy? What would be a better way to do it?

Thanks
Daf

bitdaf

learning to use CSS for layout

well, what you are using is the ID piece (the #) recommended, you should use the class properties (the .), so, instead of #menu, and your tags look like <div id="menu"></div>, change it to .menu and your tags like <div class="menu"></div>. also, if you have more than one property, such as the case as:
<div class="something" id="menu"></div>
go with multiple tags. your CSS would look like:
.something {font-size:11px;}
.class {color:#0000FF;}
and the tags would be:
<div class="something"><div class="menu">Text</div></div>
of course, you may change it to anything else you want. say if it were in a table:
<table border=0 cellpadding=0 cellspacing=1 bgcolor="#000000">
<tr class="something"><td class="menu">
Testing..1.2.3
</td></tr>
</table>
one thing that can be use, if you are not too much caring about Opera3, would be to go with parenting, such as:
(your CSS)
.something {font-size:11px;}
.something .menu {color:#0000FF;}
(/your CSS)
what this is saying is, that the tag marked with the class "something" and everything in between that untill the end tag </>, it will have the properties of font-size:11px, but also, everything that is marked with the "menu" class will also be font-size:11px AND color:#0000FF.


for more information on browser buggyness, etc, and a list of properties that CSS can use, visit:
http://www.webreview.com/style/css1/...stergrid.shtml
for more information on browser buggyness on selectors, such as A:HOVER{}, or B,U,I {}, etc, visit:
http://www.webreview.com/style/css2/...electors.shtml

InQuE

learning to use CSS for layout

Awesome! I'm off to digest this.
Thanks!
Daf

bitdaf

learning to use CSS for layout

the #menu piece is buggy with opera, and i think NS4.

InQuE

Previous Question:  Quiz Time Which sports league  SitePoint Forums  General ChatNext Question:  how do do this  SitePoint Forums  CSS

- Source: learning to use CSS for layout SitePoint Forums CSS
- Previous Question: Quiz Time Which sports league SitePoint Forums General Chat
- Next Question: how do do this SitePoint Forums CSS