DIVs ineinanderverschachteln mit fixem Aussenabstand und variabler Größe

R

ratloser

Hallo ich hab ein problem mit css, und ich bekomme es einfach nicht hin, langsam bin ich echt am verzweifeln.

Und zwar möchte 3 div elemente ineinander verschachten und darin einen Text vertikal und horizontal zentrieren.

ausschauen soll das ganze so

<div id="btn_01" class="button">
<div class="button_frame_0">
<div class="button_frame_1">
BUTTON
</div>
</div>
</div>

alle meine versuche sind bisher fehlgeschlagen:

das was dem was ich will am nächsten kommt ist das hier

.button
{
position:relative;
background:rgb(100,100,100);
overflow:hidden;
padding:2px;
width:200px;
height:50px;
}

.button_frame_0
{
position:relative;
background:rgb(0,0,255);
padding:2px;

overflow:hidden;
}

.button_frame_1
{
position:relative;
background:rgb(255,0,0);
padding:2px;
overflow:hidden;
}

nur bekomme ich die höhe einfach nicht hin, und auch das vertikale zentrieren des textes
 
sorry hatte vergessen das ich hier auf der seite ja einen account hab

hier nochmal der code in code tags

HTML: 
<style type="text/css">

      .button
      {
        position:relative;
        background:rgb(100,100,100);
        overflow:hidden;
        padding:2px;
        width:200px;
        height:50px;
      }

      .button_frame_0
      {
        position:relative;
        background:rgb(0,0,255);
        padding:2px;

        overflow:hidden;
      }

      .button_frame_1
      {
        position:relative;
        background:rgb(255,0,0);
        padding:2px;
        overflow:hidden;
      }

</style>

   <div id="btn_01" class="button">
      <div class="button_frame_0">
        <div class="button_frame_1">
          BUTTON
        </div>
      </div>
    </div>
 
Hi,
ratloser hat gesagt.:
nur bekomme ich die höhe einfach nicht hin, und auch das vertikale zentrieren des textes
Zum Vergrößern anklicken....
Dabei lassen sich gemäß dem Box-Modell die fehlenden Höhen anhand der festgelegten Höhe des äußeren DIVs und der vertikalen Innenabstände der beiden inneren DIVs rechnerisch ermitteln.

Zur vertikalen Zentrierung erhält das innerste DIV .button_frame_1 die line-height-Eigenschaft:

CSS: 
.button
      {
        position:relative;
        background:rgb(100,100,100);
        overflow:hidden;
        padding:2px;
        width:200px;
        height:50px;
      }

.button_frame_0
      {
        position:relative;
        background:rgb(0,0,255);
        padding:2px;
        height:46px;
        overflow:hidden;
      }

.button_frame_1
      {
        position:relative;
        background:rgb(255,0,0);
        padding:2px;
        height:42px;
        line-height:42px;
        text-align:center;
        overflow:hidden;
      }

mfg Maik
 
hallo danke, das mit line_height werde ich gleich mal probieren.
Zum berechnen der höhe, mir geht es ja darum das ich die höhe nicht fix angeben muss.
Ich möchte die größe nur einmal angeben müssen, die restlichen elemente sollen sich dann automatisch anpassen.
 
Die beiden Höhenangaben habe ich hier lediglich mitaufgenommen, damit du nachvollziehen kannst, wie sich die benötigte line-height:42px-Deklaration in deinem Box-Modell rechnerisch ergibt.

mfg Maik
 
oh verstehe danke.

mir ist gerade eingefallen ich brauch den button transparent, die schrift soll aber normal bleiben.

wie mach ihc das am gescheitesten?

überlegt hab ich mir das so

Code: 
.button_frame_1
      {
        position:relative;
        background:rgb(255,0,0);
        padding:2px;
        height:52px;
        text-align:center;
        overflow:hidden;
      }

.button_text_frame
      {
        position:relative;
        overflow:hidden;
        padding:2px;
        width:200px;
      }

.button_text
      {
        position:relative;
        padding:2px;
/*         height:52px; */
        line-height:56px;
        text-align:center;
        overflow:hidden;
      }

HTML: 
<div style="position:relative;">
   <div id="btn_01" class="button" style="opacity:0.5">
      <div class="button_frame_0">
        <div class="button_frame_1" ></div>
      </div>
    </div>
    <div class="button_text_frame" style="position:absolute;top:0px;">
        <div class="button_text" style="background-color:none;">
          BUTTON TEXT
        </div>
    </div>
  </div>

funktionieren tut es auch,
aber ist das so schlau wie ich das mache?
jetzt muss ich ja height 2 mal angeben
 
Das ist ja eine regelrechte DIV-Suppe, die du da für einen Button produzierst.

Wie wird sich da dein Markup (HTML-Code) erst bei mehreren Buttons darstellen?

Und wieso fällt die Zeilenhöhe für .button_text nun gegenüber der Höhe von .button_frame_1 größer aus?

Mit dieser diskrepanten Angabe sitzt der Text nicht mehr in der vertikalen Mitte, sondern rutscht entsprechend nach unten.

mfg Maik
 
bezüglicher de runterschiedlichen höhen.
beim text selbst hab ich ein element weniger darum ist die höhe größer.

bezüglich div suppe,
wenn du einen besseren vorschlag hast nur raus damit, darum frag ich ja in einem forum nach.
Ich hab eben keine andere lösung für mein problem gefunden, aber wenn es eine andere Lösung gibt bin ich natürlich offen.
 
bigBigmek hat gesagt.:
bezüglicher de runterschiedlichen höhen.
beim text selbst hab ich ein element weniger darum ist die höhe größer.
Zum Vergrößern anklicken....
Auch wenn da nun ein DIV weniger den Text umschließt, fällt weiterhin die Zeilenhöhe geringer aus.

Ich komme da in diesem Box-Modell anstelle der 56px auf 48px, und mit diesem Wert sitzt der Text auch gegenüber dem DIV .button_frame_1 in der vertikalen Mitte, was mit deinem CSS nicht der Fall ist.

bigBigmek hat gesagt.:
bezüglich div suppe,
wenn du einen besseren vorschlag hast nur raus damit, darum frag ich ja in einem forum nach.
Ich hab eben keine andere lösung für mein problem gefunden, aber wenn es eine andere Lösung gibt bin ich natürlich offen.
Zum Vergrößern anklicken....
Wie wäre es hiermit, wenn eh in den textumschliessenden DIVs nun die ehemals deklarierten Hintergrundfarben entfallen?

Auch der erste Teil innerhalb von #btn_01 liesse sich bequem und problemlos auf ein DIV reduzieren.

HTML: 
<div style="position:relative;">
   <div id="btn_01" class="button_frame_1" style="opacity:0.5"></div>
   <div class="button_text_frame" style="position:absolute;top:0px;">BUTTON TEXT</div>
</div>
CSS: 
.button_frame_1
      {
        position:relative;
        background:rgb(255,0,0);
        padding:2px;
        height:52px;
        text-align:center;
        overflow:hidden;
      }

.button_text_frame
      {
        position:relative;
        overflow:hidden;
        padding:2px;
        width:200px;
        line-height:52px;
        text-align:center;
      }

Und wenn anstelle der opacity-Eigenschaft eine halbtransparente PNG-Grafik als Hintergrund verwendet wird, liesse sich hier auf ein weiteres DIV verzichten, denn relative und absolute Positionsangaben entfallen, da der PNG-Hintergrund keine Transparenz an Nachfolgeelemente vererbt, wie es bei der opacity-Eigenschaft der Fall ist.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück