[thelist] CSS question
Matthias Ritzkowski
matthiar at gmail.com
Mon Mar 19 09:22:26 CDT 2007
Hi guys,
I am trying to wrap my head around the following issue:
1.) Table-based layout (I know, nothing to do about this one ...).
2.) The table forms a predefined grid structure.
3.) One of the grids holds a sliding doors version of a rounded box.
My problem:
I need to put a rounded box on the upper edge of that box. Needs to be
liquid to allow variable text length.
I have decided to use another container div with a higher z-index. This
one holds left. middle, right divs, all floating to the left.
This works, but I cannot get the container div centered &%$#@!
I wonder if anyone has encountered or done something similar.
Thanks for all hints, sugegestions, etc!
<code sample>
Container {
position:absolute;
/* interesting hack */
left:33%;margin-left:(-1*(width/2));
z-index:99;
height:28px;
}
HeaderLeft {
position:relative;
float:left;
width:24px;
background-image:url('left_3caad2.gif');
z-index:99;
top:-14px;
height:28px;
}
Header {
background-color:#3caad2;
position:relative;
float:left;
z-index:99;
top:-14px;
height:28px;
}
HeaderText {
padding-top:3px;
font-family:Arial,sans-serif; color:white; font-size:18px; font-weight:700;
text-align:center;
}
HeaderRight {
position:relative; float:left;
width:24px;
background-image:url('right_3caad2.gif');
z-index:99;
top:-14px;
height:28px;
}
</code sample>
--
Regards
Matthias
---------------
matthiar at gmail.com
More information about the thelist
mailing list