Equally positioning DIV's and putting text on images

Hi I've been trying to position some element's on my page and I can't
come up with a way to equally position 4 DIV's in another DIV without
explicitly setting the width of the "child" DIV's. Here's what the code
look's like:

<div id="Heading">
<a id="WP">WERSJA POLSKA</a>
<div id="Buttons">
<div id="Home" class="ButtPart"><img
src="Images/Buttons/blank_button.gif" alt="" class="InButtPart" />
<div id="ab"> HOME </div></div>
<div id="HTML" class="ButtPart">
<img src="Images/Buttons/blank_button.gif"
class="InButtPart"
alt=""/></div>
<div id="PP" class="ButtPart">
<img src="Images/Buttons/blank_button.gif" alt=""
class="InButtPart"/></div>
<div id="C#" class="ButtPart">
<img src="Images/Buttons/blank_button.gif" alt=""
class="InButtPart"/></div>
</div>
</div>

and the css file:

#WP
{font-weight:bold;color:red;text-align:right;float:right;margin-top:0.5%;margin-bottom:2%}
..ButtPart
{float:left;width:20%;text-align:center;margin-top:0.5%;margin-bottom:2%}
#LM {float:left}
#Buttons {width:70%}
#ab {position:absolute;text-align:center}

Right now it work's but I would like to know if there's a way to do it
without having to play around with the width.
The second and more inportant problem is how to make the text "HOME"
appear exactly in the middle of the first button image. I read about
backgrounds, positioning layers but non of this seems to work in this
case.
I would be gratefull if someone could help me cause today I spent about
5 hours trying to find a sollution without much success

On 2006-12-15, Woodchuck <woodchuck (AT) postpro (DOT) net> wrote:

Hi I've been trying to position some element's on my page and I can't
come up with a way to equally position 4 DIV's in another DIV without
explicitly setting the width of the "child" DIV's. Here's what the code
look's like:

div id="Heading"
a id="WP">WERSJA POLSKA</a
div id="Buttons"
div id="Home" class="ButtPart"><img
src="Images/Buttons/blank_button.gif" alt="" class="InButtPart" /
div id="ab"> HOME </div></div
div id="HTML" class="ButtPart"
img src="Images/Buttons/blank_button.gif"
class="InButtPart"
alt=""/></div
div id="PP" class="ButtPart"
img src="Images/Buttons/blank_button.gif" alt=""
class="InButtPart"/></div
div id="C#" class="ButtPart"
img src="Images/Buttons/blank_button.gif" alt=""
class="InButtPart"/></div
/div
/div

and the css file:

#WP
{font-weight:bold;color:red;text-align:right;float:right;margin-top:0.5%;margin-bottom:2%}
.ButtPart
{float:left;width:20%;text-align:center;margin-top:0.5%;margin-bottom:2%}
#LM {float:left}
#Buttons {width:70%}
#ab {position:absolute;text-align:center}

Right now it work's but I would like to know if there's a way to do it
without having to play around with the width.

Only with a table. You can give the whole table a width, put each
ButtPart in a cell, and the UA will aim to make the cells equal widths.

The second and more inportant problem is how to make the text "HOME"
appear exactly in the middle of the first button image. I read about
backgrounds, positioning layers but non of this seems to work in this
case.

How about: use a background image, set line height, and make the text a
vertically-aligned-middle text-aligned-centre inline. Like this:

div
{
background-image: url(home.png);

/*
Set these to whatever size you want the image to be, preferably
the same values as its intrinsic size.
*/
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

span
{
vertical-align: middle;
}

....

<div>
<span>HOME</span>
</div>

May not work in IE.

First of all thanks for your answer

Only with a table. You can give the whole table a width, put each
ButtPart in a cell, and the UA will aim to make the cells equal widths.

Hmm... I read in many places that tables should be used only to present
tabular data... Why isn't there a CSS way to accomplish such a layout?

As for the image and text problem I tried what you proposed and it
works both in IE and Firefox but now I have the rest of my images
stacked underneath the
first one. I must rethink what is going on cause I can't full
comprehend this CSS language Maybe someone knows a good tutorial
explaining the layout possibilities of this language?
As for the idea of using the image as a background I don't know if it
will work cause i I want that image to be anchored to a hyperlink and I
don't know if you could do it for backgrounds.

On 2006-12-16, Woodchuck <woodchuck (AT) postpro (DOT) net> wrote:

First of all thanks for your answer

Only with a table. You can give the whole table a width, put each
ButtPart in a cell, and the UA will aim to make the cells equal widths.

Hmm... I read in many places that tables should be used only to present
tabular data... Why isn't there a CSS way to accomplish such a layout?

There is, display: table-cell and friends, they just don't work in IE.

As for the image and text problem I tried what you proposed and it
works both in IE and Firefox

Good.

but now I have the rest of my images stacked underneath the first one.

Sounds like they're ending up slightly too wide for some reason. But
you'd need to post a url to a page reproducing the problem.

I must rethink what is going on cause I can't full comprehend this CSS
language Maybe someone knows a good tutorial explaining the layout
possibilities of this language? As for the idea of using the image
as a background I don't know if it will work cause i I want that image
to be anchored to a hyperlink and I don't know if you could do it for
backgrounds.

You can't hyperlink the background image itself, but you can hyperlink
the box it's in which is just as good.

e.g.

a
{
display: block;
background-image: url(home.png);
width: 100px;
height: 100px;
}

....

<a href="http://home"></a>

On 2006-12-16, Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[snip]

You can't hyperlink the background image itself, but you can hyperlink
the box it's in which is just as good.

e.g.

a
{
display: block;
background-image: url(home.png);
width: 100px;
height: 100px;
}

...

a href="http://home"></a

Following up to myself here... but I should point out that there are
likely to be some accessibility problems with this for users without CSS
enabled.

Ben C wrote:

There is, display: table-cell and friends, they just don't work in IE.

Thanks very much This is the most helpful answer in weeks I
have read a little about display: table-cell and this is what I was
waiting for. It looks like I won't have to learn floating, and all
those complicated CSS stuff cause CSS tables look much easier As for
IE I read that they-re working hard on the support for this feature in
the next version Right now I'll stick to an HTML table...

You can't hyperlink the background image itself, but you can hyperlink
the box it's in which is just as good.
(...)
Sounds like they're ending up slightly too wide for some reason. But
you'd need to post a url to a page reproducing the problem.
(...)
Following up to myself here... but I should point out that there are
likely to be some accessibility problems with this for users without CSS
enabled.

That's an idea, but your right about that accessibility concern. I want
all my webpage content to be visible on as much devices as I can, and
much of them (for example cell phones) probably won't have CSS support.
I think I need to find a different way to position that text. From what
I read about layers they look good but I don't know what positioning to
choose... It would be good to to put the text in a layer and make it
behave just like the container was empty. Than I could position it
exactly the same way I positioned the image. Is there such positionning
in CSS?

On 2006-12-16, Woodchuck <woodchuck (AT) postpro (DOT) net> wrote:

Ben C wrote:
[snip]
You can't hyperlink the background image itself, but you can hyperlink
the box it's in which is just as good.
(...)
Sounds like they're ending up slightly too wide for some reason. But
you'd need to post a url to a page reproducing the problem.
(...)
Following up to myself here... but I should point out that there are
likely to be some accessibility problems with this for users without CSS
enabled.


That's an idea, but your right about that accessibility concern. I want
all my webpage content to be visible on as much devices as I can, and
much of them (for example cell phones) probably won't have CSS support.

You could just put some text in the <a> but make it display: none in the
CSS.

i.e.

a
{
display: block;
width, height, background-image, etc...
}

a span
{
display: none;
}

<a href="home"><span>Home</span></a>

That way someone with no CSS will just get the text "Home", but people
with CSS will get the graphic but not the text.

Surely mobile phones will have CSS though? Accessibility is still a good
goal though. I'd better not talk you out of that one having already
given you an excuse to use tables...

I think I need to find a different way to position that text. From what
I read about layers they look good but I don't know what positioning to
choose... It would be good to to put the text in a layer and make it
behave just like the container was empty. Than I could position it
exactly the same way I positioned the image. Is there such positionning
in CSS?

What's a "layer"?

Ben C wrote:

a span
{
display: none;
}

a href="home"><span>Home</span></a

That way someone with no CSS will just get the text "Home", but people
with CSS will get the graphic but not the text.

Except for those people who browse with image loading disabled, or
anyone using a screen reader.

--
Berg

You could just put some text in the <a> but make it display: none in the
CSS.
(...)
That way someone with no CSS will just get the text "Home", but people
with CSS will get the graphic but not the text.
Surely mobile phones will have CSS though? Accessibility is still a good
goal though. I'd better not talk you out of that one having already
given you an excuse to use tables...

You haven't talked me out As for the mobile phones they probably
will, but at least now some don't. I have a 132x176 Siemens CX65 and I
don't think it has CSS I still want to have all the data (images,
animations, text etc.) in XHTML and just the layout stuff in CSS.

What's a "layer"?

Sorry I meant a DIV but in the context that it's positioned "on top"
of the other DIV's. I think I explained it quite good in that paragraph
so you might as well just substitute "layer" for "div".