luiggi: Text steht unten über (CSS/Div Box)

SELF-Forum

Text steht unten über (CSS/Div Box)

luiggi Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich kämpfe den ganzen Tag mit runden Ecken... jetzt habe ich das soweit geschafft.

Leider steht der Text bei der Div Box unten etwas über.
http://luger.cwsurf.de/test/test4.php

Das overflow:auto;  muss ich ja mit der festen Höhe verbinden, sonst geht das leider nicht.
Wenn ich das nicht mache, rutscht mir der lange Text unten aus meiner HP raus.

Was kann ich dagegen tun?

Quelltext:
<div class="dive">
 <div class="divero">
   <div class="divelo">
     <div class="diveru">
       <div class="divelu">
         <div class="diveinhalt">
    1te Box. <br> (dann der text)
          </div>
       </div>
     </div>
   </div>
 </div>
</div>

CSS Datei:
.dive{z-index:4; margin:0;}
.divero {background:url(../common/pics/roundedbox_ro.gif) top right no-repeat;}
.divelo {background:url(../common/pics/roundedbox_lo.gif) top left no-repeat; }
.diveru {background:url(../common/pics/roundedbox_ru.gif) bottom right no-repeat;}
.divelu {background:url(../common/pics/roundedbox_lu.gif) bottom left no-repeat;}
.diveinhalt {margin:0; padding:0.5em 2.5em 2.0em 1.0em; font-size:0.9em; overflow:auto; height:340px;}

Vielen Dank,
Stefan

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text steht unten über (CSS/Div Box)

    D.R. Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Das overflow:auto;  muss ich ja mit der festen Höhe verbinden, sonst geht das leider nicht.
    Wenn ich das nicht mache, rutscht mir der lange Text unten aus meiner HP raus.

    Wenn du eine feste Höhe vorgibst, aber auf „overflow:auto“ verzichtest, läuft der Inhalt logischerweise aus deinem <div> nach unter heraus. Oder wie meintest du das?

    Was kann ich dagegen tun?

    Quelltext:
    <div class="dive">
    <div class="divero">
       <div class="divelo">
         <div class="diveru">
           <div class="divelu">
             <div class="diveinhalt">
        1te Box. <br> (dann der text)
              </div>
           </div>
         </div>
       </div>
    </div>
    </div>

    Autsch! Positioniere das obere Div lieber relativ und verwende <img>-Elemente, die du relativ am Haupt-<div> ausrichtest.

    mfg. Daniel

    --
    Experten raten von der Verwendung des Internet Explorers ab!
    Mein SELF-stylesheet | Darum Firefox!
    Selfcode: ie:{ fl:{ br:> va:) ls:[ fo:| rl:( n4:# ss:| de:> js:| ch:? mo:} zu:}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text steht unten über (CSS/Div Box)

      luiggi Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Wenn du eine feste Höhe vorgibst, aber auf „overflow:auto“ verzichtest, läuft der Inhalt logischerweise aus deinem <div> nach unter heraus. Oder wie meintest du das?

      Das ist klar, aber:
      ich verwende eine feste Höhe und overflow.
      durch mein Div Konstrukt geht der Text etwas zu weit. Er überlappt das untere Rahmen Bild.

      Die "Div Suppe" habe ich aus Selfhtml:
      http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/beispiel1.htm

      Wie geht das mit dem IMG? Kann ich das direkt in meine .css einbinden?

      Sg Stefan

      Was kann ich dagegen tun?

      Quelltext:
      <div class="dive">
      <div class="divero">
         <div class="divelo">
           <div class="diveru">
             <div class="divelu">
               <div class="diveinhalt">
          1te Box. <br> (dann der text)
                </div>
             </div>
           </div>
         </div>
      </div>
      </div>

      Autsch! Positioniere das obere Div lieber relativ und verwende <img>-Elemente, die du relativ am Haupt-<div> ausrichtest.

      mfg. Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text steht unten über (CSS/Div Box)

        D.R. Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        Wenn du eine feste Höhe vorgibst, aber auf „overflow:auto“ verzichtest, läuft der Inhalt logischerweise aus deinem <div> nach unter heraus. Oder wie meintest du das?

        Das ist klar, aber:
        ich verwende eine feste Höhe und overflow.
        durch mein Div Konstrukt geht der Text etwas zu weit. Er überlappt das untere Rahmen Bild.

        Dann gib dem entspr. <div> einen passen Wert für „padding-bottom“

        Die "Div Suppe" habe ich aus Selfhtml:
        http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/beispiel1.htm

        OK, Punkt für dich. Ich kannte die Seite noch nicht, finde die Variante aber nicht optimal.

        Wie geht das mit dem IMG?

        Du müsstest normale Bilder einfügen, die die Rundungen darstellen.

        Dann positionierst du den Content-Div relativ (wodurch sich zunächst nichts ändert) und weist den <img>s position absolute zu. Also etwa für die rechte obere Ecke:

        img.rechtsoben {position:absolute;right:0;top:0;}

        Kann ich das direkt in meine .css einbinden?

        Du müsstest die Bilder innerhalb der HTML-Datei referenzieren. OK, wieder ein Punkt für dich. Also vergiss die <img>s und verwende für die, von mir angesprochene Methode leere <div>s, denen du die Höhe und Breite der Bilder gibst. Denen kannst du das Hintergrundbild dann global zuweisen.
        Ist IMHO besser, als so viele <div>s zu verschachteln.

        Was kann ich dagegen tun?

        Quelltext:
        <div class="dive">

        Bitte kein TOFU!

        mfg. Daniel

        --
        Experten raten von der Verwendung des Internet Explorers ab!
        Mein SELF-stylesheet | Darum Firefox!
        Selfcode: ie:{ fl:{ br:> va:) ls:[ fo:| rl:( n4:# ss:| de:> js:| ch:? mo:} zu:}
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Text steht unten über (CSS/Div Box)

          luiggi Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo,
          TOFU war nicht beabsichtigt, war nur zu schnell auf dem Knopf.

          Wenn ich vier Div´s nehme und da die Bilder reinmache,
          habe ich genauso viele Div´s, nur eben nicht verschachtelt?
          Ist das dann auch noch skalierbar?

          Das mit dem "padding-bottom" klappt nicht.... oder ich finde das richtige div nicht.
          Teste aber weiter.

          Sg Stefan

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Text steht unten über (CSS/Div Box)

            D.R. Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo,

            TOFU war nicht beabsichtigt, war nur zu schnell auf dem Knopf.

            OK.

            Wenn ich vier Div´s nehme und da die Bilder reinmache,
            habe ich genauso viele Div´s, nur eben nicht verschachtelt?

            Ja. Allerdings sind mehrere leere <div>s IMHO übersichtlicher als derart tiefe Verschachtelungen.

            Ist das dann auch noch skalierbar?

            Wenn du so, wie beschrieben vorgehst, ja. Also nicht

            rechtsoben {left:600px; top:0}  
linksunten {top:800px; left:0;}

            sondern:

            rechtsoben {right:0; top:0}  
linksunten {bottom:0;left:0;}

            Dann befinden sich deine Bilder immer in der gewünschten Ecke, egal wie breit oder hoch die Box wird.

            Das mit dem "padding-bottom" klappt nicht.... oder ich finde das richtige div nicht.

            Nimm das innere <div>.
            Außerdem musst du bedenken, dass dieses durch ein „padding“ größer wird. Ziehe den Wert also von der Gesamthöhe ab.

            mfg. Daniel

            --
            Experten raten von der Verwendung des Internet Explorers ab!
            Mein SELF-stylesheet | Darum Firefox!
            Selfcode: ie:{ fl:{ br:> va:) ls:[ fo:| rl:( n4:# ss:| de:> js:| ch:? mo:} zu:}
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Text steht unten über (CSS/Div Box)

              luiggi Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,
              habe auch eine eigene Lösung gefunden, auch wenn ich da dann noch ein div verschachteln muss.
              War für mich jetzt einfacher, anstatt wieder alles umzubauen.....

              Lösung sieht jetzt so aus:
              html:
              <div class="dive">
               <div class="divero">
                 <div class="divelo">
                   <div class="diveru">
                     <div class="divelu">
                     <div class="diveleer">
                       <div class="diveinhalt">
                  <?
                   for($count = 1; $count < 100; $count++)
                      {
                      echo "viel text viel text viel text viel text viel text","<br>";
                      }
                  ?>
                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
              </div>

              css:
              .dive{z-index:4; margin:0;}
              .divero {background:url(../common/pics/roundedbox_ro.gif) top right no-repeat; }
              .divelo {background:url(../common/pics/roundedbox_lo.gif) top left no-repeat; }
              .diveru {background:url(../common/pics/roundedbox_ru.gif) bottom right no-repeat;}
              .divelu {background:url(../common/pics/roundedbox_lu.gif) bottom left no-repeat; }

              .diveleer {margin:0; height:25em; padding:0.0em 0.0em 0.4em 0.0em;}
              .diveinhalt {margin:0; padding:0.5em 2.5em 0.0em 1.0em; font-size:0.9em; overflow:auto; height:24.9em;}

              Vielen Dank für die Hilfe.
              Stefan

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln