Positioning with stylesheets...

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Shawn Wilson - 24 Aug 2005 21:43 GMT

I am trying to do away with tables, and am trying to learn how to position
things with CSS just how I want them to look. The problem I've run into is
that one design in particular seems imposible to do unless I absolutely
position everything and that is less than optimal because you can't center
everything that way, it has to be anchored to the left side.

The layout I'm trying to do is here:

http://www.dvigroup.net/album/beta/

I have it working with absolute positioning, but I've had to decide on a set
width of 1024px and base everything on that. I don't like having to do
that.

What would be PERFECT is if I could set the center image however I wanted
(probably based on the center,middle of a TD unless there is a better way to
find that position with CSS) and then place everything else based on that
center piece's position.

Thanks!

-----------------
Shawn Wilson

Reply to this Message

Mike Davies - 25 Aug 2005 18:01 GMT

> I am trying to do away with tables, and am trying to learn how to position
> things with CSS just how I want them to look. The problem I've run into
[quoted text clipped - 20 lines]
> -----------------
> Shawn Wilson

Usually absolute positioning is not a good idea. Better would be to use
floats. You could try a five column layout each with an id, say #col1,
#col2, etc with rules

#col1 {float:left;}, #col2 {float:left}, etc.

Place the images in each column, then adjust the positions of individual
images using margins. The whole lot enclosed by a wrapper div with rule

#wrapper {margin:0 auto;}

which should centre it.
You will need to work out column widths carefully to contain within the
overall width of 1024.
Incidentally this width is going to cause many visitors to have to
horizontal scroll, most common screen resolution is probably still 800 x
600.

I don't have time to work out a suitable layout but some links to floats
which may help are :

http://www.communitymx.com/abstract.cfm?cid=AC008 -
Good overview of how floats work.
http://css.maxdesign.com.au/floatutorial -
Good overview of float theory, plus a number of float exercises to follow
along with.
http://www.complexspiral.com/publications/containing-floats/ -
An explanation of why floats are removed from the flow, and how you can
contain them.
http://www.positioniseverything.net/easyclearing.html -
How to contain floats without adding extra markup.
http://css-discuss.incutio.com/?page=FloatLayouts -
A variety of float topics from the css-discuss wiki.

Regards,
Mike Davies

Signature

Mike Davies
Integra Web Design

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2005

Positioning with stylesheets...