Schrift auf Rahmen von DIV Container platzieren

[CrazyLexx]

Hallo zusammen,

verwende folgenden Code, um einen Container mit abgerundeten Ecken zu erstellen:

  
.box_rundeecken{  
padding:0 4px;  
margin:30px auto;  
position:relative;  
border:1px solid #fff;/* stop margin collapse*/  
border-left:1px solid #C0C0C0;  
border-right:1px solid #C0C0C0;  
}  
.inner_rundeecken{  
background:#fff;  
padding:5px 0;  
margin:-5px 0;  
min-height:0;/* ie7 haslayout issues fix*/  
border-top:1px solid #C0C0C0;  
border-bottom:1px solid #C0C0C0;  
position:relative;  
}  
* html .inner_rundeecken, * html .box_rundeecken{height:1px}/* ie6 haslayout issues fix*/  
.top_rundeecken,.base_rundeecken{  
margin:-6px -5px 0;  
background:url(images/rundeecken1.gif) no-repeat left top;  
height:5px;  
position:relative;  
font-size:5px;  
clear:both  
}  
.base_rundeecken{  
background-position:left bottom;  
margin:0 -5px -6px;  
}  
.top_rundeecken span,.base_rundeecken span{  
background:url(images/rundeecken2.gif) no-repeat right top;  
display:block;  
height:5px;  
font-size:5px;  
}  
.base_rundeecken span{background-position:right bottom;}  
.content_rundeecken{width:100%;}  

  
<div class=\"box_rundeecken\">  
<div class=\"inner_rundeecken\">  
<div class=\"top_rundeecken\"><span></span></div>  
<div class=\"content_rundeecken\">  
  
Hier kommt der CONTENT hin  
  
<div class=\"base_rundeecken\"><span></span></div>  
</div>  
</div>  

Das ganze sieht dann momentan so aus (habe den CONTENT des Containers oben im Code mal ausgelassen):

Ich möchte nun genau mittig auf den Rahmen des abgerundeten Containers ein Textfeld platzieren, welches dann jeweils den Inhalt beschreiben wird (ähnlich wie dieses "Rules" im Beispiel). Was muss ich anpassen, damit ich die Schrift so platzieren kann?

Danke,
TOM

[ChrisB]

Hi,

verwende folgenden Code, um einen Container mit abgerundeten Ecken zu erstellen:

So viel Code, fuer so 'nen winzigen Effekt ...

Ich möchte nun genau mittig auf den Rahmen des abgerundeten Containers ein Textfeld platzieren, welches dann jeweils den Inhalt beschreiben wird (ähnlich wie dieses "Rules" im Beispiel). Was muss ich anpassen, damit ich die Schrift so platzieren kann?

Deine Problembeschreibung? Was hast du versucht?

(Ich wuerd's ja vermutlich einfach in den inneren Container legen, und per negativem margin (in em) nach oben ziehen.)

MfG ChrisB

[goldie]

Hallo,
Du hast im XHTML einige <div> Tags geöffnet und nicht wieder geschlossen zu jedem <div> gehört auch ein </div>. Ansonsten würde ich folgenden Quellcode in den ersten div-container packen:

<div id="center-title">Your title goes here</div>

folgendes CSS gehört dann dazu:

div#center-title {
  background-color:#FFF;
  text-align:center;
  margin:-10px 0 0 100px;
  padding:2px 5px;
  width:40px;
}

Erläuterung:

margin -> -10px regelt die horizontale Position des Titles
       -> 100px regelt die horizontale Position des Titles

padding -> 2px regelt den weißen Rand nach oben und unten an dem Title
        -> 5px regelt den weißen Rand nach links und rechts an dem Title

width -> 40px regelt die breite des Containers der den Title umschließt

einfach mal mit den Werten spielen...

so long cu