Hello!
Im looking to try and get into CSS for formatting my sites. Seems like a
nice premise, and should allow easier design for the future. But gees,
Im having a hard time of it.
I would like to create something like at http://www.blargle.co.uk or
http://www.celebrityresearcher.co.uk without the tables.
I figure should be easy, to have two DIV rows, 100% width, and then have
three DIV columns underneath...
I couldn't even get past the two rows.
When I use absolute positioning, Firefox draws everything in the right
place, but doesn't give me 100% width. Unlike IE. However if I remove
the position property, Firefox does indeed draw the DIVS to the full
width of the screen.
Except, it also includes a white space at the top, like some kind of
margin! I've tried to set all margins to 0px and padding to 0px, but
still the white space on top remains - Unless I add a border, then it
all draws in the correct places.
Curiously, the differences between border 1px and border 0px seems to
just move the box while any text inside stays at the same position on
the screen.
Im confused...
I don't want to use border:1px and it seems most of everyone out there
uses borders, or separation between DIV elements, whereas I want to
retain my designs...
Sorry, I havent got any code on me, Im at work at the moment, and what I
have is at home, but I just wanted to run this past you. I am a newbie,
I have much to learn, I have searched, but can't find much in relation
to this particular issue. There's probably some glaringly obvious mistake.
Cheers
Simon
PS I'll try and post a URL tonight, but I think I have something like:
<div id=banner1>
<p>some text</p>
</div>
<div id=banner2>
<p>some text</p>
</div>
#banner1 {
background:#f00 ;
top:0px;
height:50px;
left:0px;
width=100%px;
}
#banner2 {
background:#0f0 ;
top:0px;
height:50px;
left:0px;
width=100%px;
}