[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