Advice on laying out my new site in CSS.

Hi,

Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it.

Here's a preliminary screenshot of my site in jpg. format, thanks.

http://uberserver.ath.cx/~rohan/PS1.0.jpg

Here's the main site (v.2.0) if you're interested.

http://www.ubertropolis.tk

Thank you!

I know its only a sample layout, but the Times font for the main next looks horrid, use the same font as for your menu options...

Anyway. The simplest way to go about doing your site in css is to break it up into obvious areas, which will become your divs.

You also have to consider if its going to be a 'fixed' or 'fluid' page. Ie, will any of the elements move/resize to fit the viewport, or will it be static.
IMHO, its far easier to make 'fixed' pages than 'fluid' ones, especially if your just starting out using css.

Ok, so it looks like your layout should fit nicely on 800x600, so a 'fixed' layout would be an appropiate choice, so here goes:

Use 'position: absolute;' for all your main layout divs.
So you have the top 'banner' div fixed at abour 10px form the top and left, and about 775px wide. You could specify the height, or leave it as auto.
A 'right' div at 250px width. Set the top of this one to line up with the bottom of the 'banner' div (not to state the obvious )
A 'photo' div at 585px width. (with the same top as the 'right' div)
A 'menu' div at 500px width.
And finally a 'content' div at the same width as the 'menu'

Basically, sort out tour doctype, so the xhtml validator can recognise it, whack in a link to your stylesheet and start filling in your divs:

<div id="banner">
</div>
<div id="right">
</div>
etc.

then in your stylesheet you can start with something like:

#banner
{
position: absolute;
left: 10px;
top: 10px;
width: 770px;
height: 90px;
border: 1px solid #000000;
}

etc.

Then you can have fun with various hacks to get IE to make it look the same

Have fun
Hope that helps

I'll offer a difference in opinion, I think you should make your site "liquid". This doesn't mean you can't box in the main part and make it 90% of the available browser width, which will have a similar look as a fixed-width 800x600 in a 1024x768 screen. Think about those guys who've spent money on a 1600x1200 monitor, only to be limited by your design being 800x600. That's a lot of dead space.

Yea the font is horrid, lol, the anti-aliasin in photoshop really messed it up.

Now, i want this entire thing to be centerized in the middle of the screen, the "left:10px;" will make it 10 px from the left hand side won't it?

Thanks again.

Also, i might be interested in making it fluid, but that will definetly come later, it sounds complicated. Right now, i want to make it a fixed width so everything looks right all the time.

Thanks.

jharnois:

Yeah, I tend to agree with you, but I just found it easier to make 'fixed' designs when starting out with css, as ubers0ldat appears to be doing

ubers0ldat:

if you search on this forum, the centered question has arisen loads of time, shouldn't be too difficult to find it, just can't remember off the top off my head

You can center the page using code from either of these demos.

http://garyblue.port5.com/webdev/vcenter.html

http://garyblue.port5.com/webdev/hcenter.html

Width may be fixed or relative metrics. Height should be left at the default (auto).

I also recommend that you study the articles at http://www.positioniseverything.net/ for the simple reason that absolute positioning and floats have serious teeth and will bite you in the butt if you are not aware of the rules.

cheers,

gary

I had a quick question for you guys, anyone know how to get the "photo of the day" division aligned to the right, overlapping the black sidebar?

You'll see it slowly coming together as seen in the JPG i included up top about the entire tmeplate.

Thanks

http://uberserver.ath.cx/~rohan/rohan/3.0/

From what I can see, what you have so far already looks like youe layout pic, but if you want to float the 'photo' div to the right, change the positioning to 'relative' and the float to 'right'.

Hope that helps

Thanks, that worked.

Here's an updated link:

http://uberserver.ath.cx/~rohan/rohan/3.0/

Now, the sidebar on the right doesn't even show up in IE, any ideas why?