where do you start designing a css website

liunx

Guest
ok,
today i got my first job where i have a design that i have to build to a website, till now i allways had to do my own designs.
and i was just wondering how you get started with something like this.
i got this (<!-- m --><a class="postlink" href="http://www.hive-dev.net/main2.png">http://www.hive-dev.net/main2.png</a><!-- m -->) today.
now i want to make it in css pure,
so i thought i would start by drawing up where i would put divs and how ect.
and i was wondering how you get started, and where you would put divs.
i just wanna get some fresh ideas on getting started, and maybe compare your placement ideas with mine.

thx
-ChrisMight want to check out the grey box methodology (<!-- m --><a class="postlink" href="http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">http://www.jasonsantamaria.com/archive/ ... method.php</a><!-- m -->).well i was more looking for,
how would YOU do it.Originally posted by Fantatier
well i was more looking for,
how would YOU do it.

I'd set the header as a background, strip off a separate part to with SIR on top of the other background so that it blends seemlessly and provides a link on a specific part of the header. Then I'd use an unordered list for the horizontal menu. Of course, everything in the page would be in a "container" DIV which used faux columns. Where there is no faux visible (although it is there) would be the header background. Two floated DIVs for the content/sidebar and then one at the end to clear both of them containing footer information.

Edit: After looking more closely, there would be some detail work and it turns out faux columns probably wouldn't work in this case. However, the way it's setup is still not entirely difficult to work out. Just float all the DIV's left and use custom corner borders. The nav above the header would use absolute positioning and come before the horizontal navigation after the header.well, this is what i had originaly concived doing.

here (<!-- m --><a class="postlink" href="http://www.hive-dev.net/main2my.png">http://www.hive-dev.net/main2my.png</a><!-- m -->)

rubish or ok?Not either, really. You're close, but when someone resizes their font it's likely to exceed the limits of the DIV's with the rounded borders. Instead, split off the top and bottom of each one. Use an H2 for the first background at the top, and use the bottom part as a background for the bottom. This way, you can resize the font and those boxes will resize (at least vertically) as well. The rest looks pretty okayish.Originally posted by Jona
Not either, really. You're close, but when someone resizes their font it's likely to exceed the limits of the DIV's with the rounded borders. Instead, split off the top and bottom of each one. Use an H2 for the first background at the top, and use the bottom part as a background for the bottom. This way, you can resize the font and those boxes will resize (at least vertically) as well. The rest looks pretty okayish.

isnt that what i did, you can see it better on the right thing, i spit it up in 3.

and well if you say okayisch, what else would you do better appart from what you have allready stated?Um, well it's kind of difficult to explain. You basically got it, for the most part, though. Just split it up in places that you could use as separate images, and then add backgrounds where necessary.well thanx jona :)Hope it helps.what do you think so far?`

<!-- m --><a class="postlink" href="http://hive-dev.net/xconnexion/You">http://hive-dev.net/xconnexion/You</a><!-- m --> might be able to eleminate a few of those DIVs. There seems to be quite a lot of them. Looking good, though.Originally posted by Jona
You might be able to eleminate a few of those DIVs. There seems to be quite a lot of them. Looking good, though.

yea, there are quite a few divs, is that generaly speaking a bad thing?

and well i only know a few that i could iradicate, but well i used them for better overviewOriginally posted by Fantatier
yea, there are quite a few divs, is that generaly speaking a bad thing?

and well i only know a few that i could iradicate, but well i used them for better overview

Search engines compare content to markup. Keep that in mind. Also, if you use too many DIVs, you might end up as bad off as using tables for layout. You won't want a heavy, fat page; you want it to turn out light and load quickly even on dial-up connections. Additional markup won't be helpful to you, so I'd say avoid adding DIVs where possible.
 
Back
Top