flera rektanglar med rundade hörn på varandra

juergen_89Medlem sedan okt. 20072 inlägg

Frågan30 okt. 2007 19:55#1

jag försöker och göra flera rektanglar med rundade hörn att ligga på varandra, men lyckas inte
kod i html filen:

<html>
<head>
<LINK REL=STYLESHEET HREF="stilmall.css" TYPE="text/css">
</head>
<body>
<div id="container2">
 <div class="roundtop2">
   <div class="e1"></div>
   <div class="e2"></div>
   <div class="e3"></div>
   <div class="e4"></div>
<div class="e5"></div> 
<div class="e6"></div> 
</div>
<div class="content2">

<table border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>

<div id="container1">
 <div class="roundtop1">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
<div class="r5"></div> 
<div class="r6"></div> 
</div>
<div class="content1">
text text

</div>
 <div class="roundbottom1">
<div class="r6"></div> 
<div class="r5"></div>
   <div class="r4"></div>
   <div class="r3"></div>
   <div class="r2"></div>
   <div class="r1"></div>
 </div>
</div>
<br>
</td>
</tr>
</table>
</div>
 <div class="roundbottom2">
<div class="e6"></div> 
<div class="e5"></div>
   <div class="e4"></div>
   <div class="e3"></div>
   <div class="e2"></div>
   <div class="e1"></div>
 </div>
</div>

</body>
</html>

och koden i css filen:


#container1 {background: #333333;}
.roundtop1 {background: #666666;}
.roundbottom1 {background: #666666;}
.r1{margin: 0 7px; height: 1px; overflow: hidden; background: #333333;}
.r2{margin: 0 5px; height: 1px; overflow: hidden; background: #333333;}
.r3{margin: 0 4px; height: 1px; overflow: hidden; background: #333333;}

.r4{margin: 0 3px; height: 1px; overflow: hidden; background: #333333;}
.r5{margin: 0 2px; height: 1px; overflow: hidden; background: #333333;}
.r6{margin: 0 1px; height: 2px; overflow: hidden; background: #333333;}
.content1 {padding: 10px;}

#container2 {background: #666666;}
.roundtop2 {background: #333333;}
.roundbottom2 {background: #333333;}
.e1{margin: 0 7px; height: 1px; overflow: hidden; background: #666666;}
.e2{margin: 0 5px; height: 1px; overflow: hidden; background: #666666;}
.e3{margin: 0 4px; height: 1px; overflow: hidden; background: #666666;}

.e4{margin: 0 3px; height: 1px; overflow: hidden; background: #666666;}
.e5{margin: 0 2px; height: 1px; overflow: hidden; background: #666666;}
.e6{margin: 0 1px; height: 2px; overflow: hidden; background: #666666;}
.content2 {padding: 10px;}

hoppas någon kan hjälpa mig så att den övre ligger på den undre och den undre anpassar sin storlek efter den övre. hoppas någon förstår. tack