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