Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.11.2005, 00:54
krassus krassus ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1
krassus befindet sich auf einem aufstrebenden Ast
Standard Box mit runden Ecken via CSS

Hallo liebe Leute,

als CSS-Grünling ersuche ich um fachkunden Rat:

Ich möchte eine Box mit Rahmen und Runden Ecken aus 8 Hintergrundbildern erstellen. Dazu habe ich das Grundgerüst von Douglas Livingstone ( http://www.redmelon.net/tstme/4corners/) übernommen und versucht anzupassen, da dieses nicht mit transparenten Ecken funktioniert hat. (Die gif´s an den Ecken sind 6x6 Pixel gross und die an den Ränder 1x6 nzw 6x1)

Ich habs auch fast geschafft, nur dass die mittlere Sektion den oberen Rahmen überlappt. Die untere Rahmenleiste passt sich wunderbar an. Habe alles mögliche probiert und bin nun mit meinem Latein am Ende.
Vielleicht könnt Ihr mir weiterhelfen?

Eine Live-Demo ist hier zu sehen: http://atom.home.solnet.ch/

Danke und beste Grüsse,
Tom

PS hier der Code:


Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background-color: #666;}

 .box	{ background: url(K1_BG.gif) repeat;} /* Hintergrundpic */
 .TM    { background: url(K1_OM.gif) repeat-x; width: 188px; float: left;} /* Rand oben*/
 .TL    { background: url(K1_OL.gif) no-repeat;  width: 6px; float: left; } /* oben links*/
 .TR 	{ background: url(K1_OR.gif) no-repeat;  width: 6px; float: left;} /* oben rechts*/
 .BM    { background: url(K1_UM.gif) repeat-x; width: 188px; float: left;} /* Rand unten */
 .BL    { background: url(K1_UL.gif) no-repeat; width: 6px; float: left;} /* unten links*/
 .BR 	{ background: url(K1_UR.gif) no-repeat; width: 6px; float: left;} /* unten rechts*/
 .ML 	{ background: url(K1_ML.gif) repeat-y; } /* Rand links*/
 .MR    { background: url(K1_MR.gif) repeat-y right; } /* Rand rechts*/

 .TL, .TR, .TM, .BL, .BR, .BM {
	height: 6px; /* höhe der Randpics */
	font-size: 1px;
}
 .MR  { padding: 1px 10px; } /* fuer den Text */
 .box { width: 200px;  } /* Breite der Box */
 {padding: 0;	margin: 0;}
</style>
</head>
<body>
<div class="box">
   <div class="TL"></div><div class="TM"></div><div class="TR"> </div>
   <div class="ML">
      <div class="MR">
	 

TESTTEXT</p>
      </div>
   </div>
<div class="BL"></div><div class="BM"></div><div class="BR"> </div>
</body>
</html>
Mit Zitat antworten
Sponsored Links