The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

CSS troubles

Hi!

I'm getting this very annoying problem trying to position the layout of my website using div elements and classes.

I've looked all over, but no site seems to have an answer for this one!

The problem is that once i place everything as i want, i end up with a lot of space at the bottom of the page, forcing a scroll bar to appear. The whole point of my site is NOT to have scroll bars!

Any ideas?

Thanks!
Guillaume Drolet-Paré Send private email
Wednesday, April 26, 2006
 
 
You have a typo on line 42 of your stylesheet.
clcr
Wednesday, April 26, 2006
 
 
42? I thought I saw an error at line 46.
My bad.
Geoff Send private email
Thursday, April 27, 2006
 
 
Oh yeah, that too. I missed that one.

To the OP: My previous post was an apparently-too-subtle hint that you should provide more detail, including a URL that demonstrates the problem. We're not mind readers.
clcr
Thursday, April 27, 2006
 
 
You can see the problem here: http://www.melopia.ca/v3/index2.php

and the css file is:

http://www.melopia.ca/includes/v3_firefox2.css

My php code chooses the right css file depending on the browser used. I usually make the design work on Firefox first ( more standards compliant ) and then make the necessary changes to make it work in IE.

My next approach is going to be using floats, but if you guys can help me find the problem, that would be very helpful.

Thanks!
Mr.Crud Send private email
Thursday, April 27, 2006
 
 
Unless I'm mistaken -- which is possible -- you should be using position:absolute; rather than position:relative;

Relative positions shifts a block-level element out of it's spot but retains it's place/space in the flow. Absolute positioning pulls it out of the flow altogether.
timg Send private email
Thursday, April 27, 2006
 
 
see here for more/better explanation:
http://www.w3.org/TR/CSS21/visuren.html#choose-position
timg Send private email
Thursday, April 27, 2006
 
 
It's not entirely clear to me what's going on. I commented out all of the contents of main, turned on "outline block elements" in my broweser, and uncommented elements one at a time. Every time I uncommented something that used position:relative, the  amount of excess space increased.

Try restructuring your page in terms of three containers: header, main content, and sidebar. Let the elements inside of  the main content area (emission_courante, search, photos_artistes, and footer) flow naturally rather than positioning them explicitly. Set a left margin on the main content area equal to the width of the blog sidebar, and position the sidebar absolutely. That should work a lot better. It'll also deal better with varying amounts of content.
clcr
Thursday, April 27, 2006
 
 
Thanks, timg. That clears things up for me.
clcr
Thursday, April 27, 2006
 
 
Thanks for the quick replies. I'll try the header left_section and content container positioned absolutely tonight. Makes a lot of sense.

Thanks again! I'll let you know when i get my hands on my cpu again.
Mr.Crud Send private email
Thursday, April 27, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz