I still don't get CSS (Dreamweaver)

Barks

Barks

Barks

Soldato
Joined
20 Jul 2008
Posts
4,425
I'm making really good progress with Dreamweaver now but I still don't really understand CSS.

Say I've created a wrapper box, then three boxes inside: header, main, footer.
I then create another few boxes within the 'main' box of varying fixed pixel dimensions to shove in text/images etc.

How do I get an image to align centrally (vertically and horizontally) in one of the sub-boxes within my 'main' box?
I don't really understand which property you're supposed to use within the CSS properties for the sub box? Or do you create a class for the image and apply the CSS to that to get it to align centrally? Ah... confusion!

Would it be easier to use good old fashioned tables within the 'main' box? I was told in the tutorials I've used to avoid them like the plague.

I'd be really grateful if someone could explain it to me.

:)
 
I'm using margins but this is only going to work if everything has specific set pixels for width and height.
 
margin: 0 auto; is the more accepted syntax, 0px generally looks untidy and confusing as to set to 0 is the same as using 'none'.

Both work, just for readability the above is preferred.
 
If you mock up an example of what you're trying to achieve, then you'll get better advice. Generally you would position elements using margins and padding depending upon the situation.

In most cases it's best to avoid absolute positioning because it takes the element out of the flow of the document which kills any chance of it automatically repositioning should the content change (although this is sometimes exactly the behaviour you want).

To use CSS effectively you need to properly understand the box model: http://www.redmelon.net/tstme/box_model/

My only other advice would be to ditch dreamweaver, its a crutch that's getting in the way of your learning.
 
Thanks for the links guys.

I can align an image horizontally by setting the margin to 0 auto and I understand why this works.

I still can't get an image to align vertically using a similar method. The only solution I have found is to work in pixels and use values in the margin properties to get the image positioned where I'd like it. It works and seems to look pretty good on Firefox/IE/Safari.
 
That's because there is currently no widely-supported way to automatically center vertically using CSS. There's a box alignment model in CSS3 but AFAIK it's not got a lot of browser support at the minute: http://dev.w3.org/csswg/css3-align/

In the meantime you can approximate vertical centring by playing with the padding on the parent of whatever you're trying to centre.

Don't be tempted to bung in tables just because you can vertically align cells. HTML is a representation of what the content *is* and not what it should look like (which should be left to CSS).
 
LazyManc said:
That's because there is currently no widely-supported way to automatically center vertically using CSS. There's a box alignment model in CSS3 but AFAIK it's not got a lot of browser support at the minute: http://dev.w3.org/csswg/css3-align/

In the meantime you can approximate vertical centring by playing with the padding on the parent of whatever you're trying to centre.

Don't be tempted to bung in tables just because you can vertically align cells. HTML is a representation of what the content *is* and not what it should look like (which should be left to CSS).
Click to expand...

I'm managing by doing just that; playing about with the margins. It's not really a problem because the websites I'm developing are fixed not liquid. I just thought it was ridiculous not being able to vertically centre an image although now I've got a greater understanding of CSS and web design in general I'm beginning to see why.

Thanks for the help lads
 
You must log in or register to reply here.
Back
Top Bottom