Layout using CSS

[Nik Coughin]

Please consider this example:

http://homepages.ihug.co.nz/~nrkn/example.png

(a) is an image, a logo
(b) is the same width as (d) (using spacer pngs... inelegant, but what the
hell)
(c) uses whatever room remains after (a), (b) and (d) have had their share.
(d) is a number of navigation pngs, there can be 0 or more. The width of
(d) and therefore (b) depends on the number of pngs (they are all 24px in
width).

Between the four of them they use 100% of the browser width.

This is it presented as a table:

http://homepages.ihug.co.nz/~nrkn/csstest/table.html

Here is my attempt at doing it with CSS:

http://homepages.ihug.co.nz/~nrkn/csstest/css.html

How do I make it so that field (c) in the CSS takes up all of the available
room?

Is the way that I have done everything else valid? I mean practically, not
literally. The W3 validator says that it is literally valid, which isn't
always the same thing.

I am aware that there are a number of issues with table.html, I threw it
together quickly as an example and it works fine as such.

 

[brucie]

in post: <

http://homepages.ihug.co.nz/~nrkn/example.png

not supported by IE
http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html

 

[Nik Coughin]

in post: <

not supported by IE

http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html

Goddamn M$. I suppose they'll fix it when they fix png transparency. My
site pretty much needs to look like this:

http://homepages.ihug.co.nz/~nrkn/example2.png

The same (a), (b), (c) and (d) as the former post. The reason I need (c) to
fill the page out like that is so that the page title is centered above (h),
the page content. (e), (f) and (g) are just some graphics that make it look
like there is a subtle shadow between the navigation and the content (poorly
represented here in grey). There are also some spacing-only divs, above and
to the left of (e).

It would just be so easy to do with tables, but I know it's wrong.

Any suggestions would be extremely welcome.

 

[brucie]

in post: <

Goddamn M$.

you could use css that IE does support:
http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy-02.html

but its not a good as the first method.

http://homepages.ihug.co.nz/~nrkn/example2.png
Any suggestions would be extremely welcome.

very simple to achieve for modern browsers with the first method i used
above. a bit more fiddling around so it works for ancient IE but still
doable.

if you want a demo you'll have to wait until i get back from shopping.

 

[Nik Coughin]

in post: <
http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html

you could use css that IE does support:
http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy-02.html

but its not a good as the first method.


very simple to achieve for modern browsers with the first method i
used above. a bit more fiddling around so it works for ancient IE but
still doable.

if you want a demo you'll have to wait until i get back from shopping.

I'll work with that in the mean time.

Thanks heaps.

 

[brucie]

in post: <

http://homepages.ihug.co.nz/~nrkn/example2.png

http://moreshit.bruciesusenetshit.info/nik/

i changed the "a page title" to center between the "a logo" and the
dinosaurs because it didn't look right centered with the content <div>

 

[steven]

in post: <

http://moreshit.bruciesusenetshit.info/nik/

i changed the "a page title" to center between the "a logo" and the
dinosaurs because it didn't look right centered with the content <div>

Hey, Brucie,
did you already remove the page? We didn't even have the chance to have a
glance...

 

[brucie]

in post: <

did you already remove the page?
yes

We didn't even have the chance to have a glance...

it was nothing exciting anyway

 

[steven]

in post: <


it was nothing exciting anyway

Maybe not, but it might have been interesting.

 

[brucie]

in post: <

Maybe not, but it might have been interesting.

nope, just bog standard css.