Is this possible to create in CSS only??

[annanina]

dear community,

i am former table user, but want to create this new project in css, or mostly with css, as far as possible.

i designed a webpage, which, i would say, is even a bit tricky if i would do it with tables. it's very pixeldetailed, i mean with that: it's not flexible...

please see by yourself:
www.cokomanie.de/anke/index_long_onelayer.jpg

this wrapper makes me troubles, also the header on the top, which will be a flashanimation.
then, the footer and the 2px lines on the left and the right side...
content should always be centered and scaled-with with the hight of the browser...

i already did our intranet in css, but this was more flexible and i did it with a very basic 2 margin css-layout.

can you tell me IF IT'S POSSIBLE to do this design only in css, i am just wondering how to start with, because i find myself thinking in tables...
i could imagine that a mix between table AND css will be necessary.

please css-experts, give me a hint how you would start :confused:

thank you so much!!
anna


p.s. i know i have to do a lot of exercise in order to do this project in css, but i am willing to learn an doing online-tutorials, but i guess it would take me hours/days until i would find out that this design might be not possible to create in css (sorry for my english)

[r2d2]

Hello, welcome to the forum!

Yes it certainly is possible with CSS - the basic layout of the site you link to seems the same as this CSS example (http://www.pmob.co.uk/temp/2_col_centred_imgbg.htm). Or perhaps try other designs from here (http://www.pmob.co.uk/). The designs might look ugly in the examples, but its the CSS behind that is the important bit. E.g. I used the example above for this site (http://www.resource-directory.com/).

Good luck with it.

[deronsizemore]

yeah that would really be pretty simple to do. All you would need is a header, baground image that repeats along the y axis, and a few floats.

[Cutter]

The biggest issue you'll have with CSS is making it look the same in IE & firefox -- but you run into the same problem with tables too.

I always use CSS for formating -- I occasionally use it for some page elements like if I want a box with dashed lines.

[deronsizemore]

The biggest issue you'll have with CSS is making it look the same in IE & firefox -- but you run into the same problem with tables too.

I always use CSS for formating -- I occasionally use it for some page elements like if I want a box with dashed lines.


Yeah you're right. Where most go wrong though with making it look the same in IE as it does in Firefox is the broken box model. If you learn that, then you're on your way aside from learning some "IE only" attributes for different situations.

[annanina]

folks, thanks you so much for your nice and helpful replies, especially the links :-) this is exactly what i need and maybe i post the link here if it's ready ;-)

[r2d2]

No problem, but yes, as Deron says, the broken box model is probably the thing to look out for - dont apply widths or heights as well as borders or padding to things.

Also, it is probably best to develop it using firefox to check the layout - then check it in IE every so often.

[affiliate]

I think this is a great site, I am newbie, please help me, thanks all.

[James]

dont apply widths or heights as well as borders or padding to things.
Unless you use Tantek's Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html) (how the hell do these people figure this sort of crap out, eh?)
which may be ugly, but I prefer it to going through and making everything into margins.

[deronsizemore]

Unless you use Tantek's Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html) (how the hell do these people figure this sort of crap out, eh?)


I have always wondered the same thing. Its like they just sat around one day and said...."hmmmm I think I'll try **)--+//** and see what it does!"