zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box mit runden Ecken via CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.11.2005, 23:54
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
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Rahmen mit runden Ecken und Schatten Tomahawk CSS 2 05.08.2010 14:21
anfänger braucht hilfe für css box SiCK6SiX CSS 1 12.08.2004 16:20
Runde Box (bzw. runde Ecken) l2107 CSS 3 08.02.2004 03:19
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 17:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:19 Uhr.