soel: frage zu div

SELF-Forum

frage zu div

soel
– Informationen zu den Bewertungsregeln

Hallo,

ich habe hier ein komisches Problem:

CSS:

.inhalt{
margin:0px auto;
padding: 0px;
width:871px;
height: auto;
}

.news{
margin:0px auto;
padding: 0px;
width:200px;
height: 30px;
}

div "news" ist verschachtelt in div "inhalt"
im ie wird die höhe des div "inhalt" automatisch an die höhe des div. "news" angepasst, leider im firefox und opera nicht ;-(
in diesen beiden browsern erscheint div "inhalt" überhaupt nicht!
erst, wenn ich diesem eine feste höhe angebe...
wie nun bringe ich es fertig, das die beiden browser ebenso die höhe des div "inhalt" an die höhe des div "news" akzeptieren??

also kurz wie geht: news height 30px und inhalt height = news height??

vielen lieben dank für antwort
s

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. frage zu div

    Stahli Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    also kurz wie geht: news height 30px und inhalt height = news height??

    Wenn ich dich richtig verstanden habe definiere die Höhe von div.inhalt einfach nicht (height:inherit oder ganz weglassen).

    Gruß

    --
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Denn jedermann ist überzeugt, dass er genug davon habe.
    René Descartes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. frage zu div

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo soel

    im ie wird die höhe des div "inhalt" automatisch an die höhe des div. "news" angepasst, leider im firefox und opera nicht ;-(
    in diesen beiden browsern erscheint div "inhalt" überhaupt nicht!

    Hast du uns ein paar Eigenschaften unterschlagen?
    Bei height:auto (übrigens der Dafaultwert, der nicht extra angegeben werden müsste) wird die Höhe an den Inhalt angepasst, es sei denn, der Inhalt ist aus dem Elementfluss genommen (position:absolute, float).

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. frage zu div

      soel
      – Informationen zu den Bewertungsregeln

      hallo - danke für die antwort...

      hmmm also hab nen bissl im internet gestöbert und habe folgendes gefunden: <div style="clear:both;"></div> mit dieser zeile im div "inhalt" passt sich dieser nun der größe des anderen div´s an,
      nun ergab sich aber ein nächstes problem, der ie und opera stellt alles so dar wie ich es möchte, im firefox dagegen hat der div "inhalt" plötzlich keine farbe mehr bzw wir nicht dargestellt????? ehhhh was ist denn da nur los????

      zu besseren erklärung mal die scripte:
      wäre total nett wenn da mal jemand nen auge drauf tun könnte und vielleicht hab ich ja wo nen fehler drin und find den nur nich...
      vielen dank !

      </head>
      <body>
      <div class="weiss_horizontal"></div>
      <div class="grau">
      <div class="grau_01"></div></div>
      <div class="weiss_horizontal"></div>

      <div class="inhalt">
      <div class="news"></div>
      <div class="box"></div>
      <div style="clear:both;"></div>
      </div>
      <div class="weiss_horizontal"></div>
      <div class="grau">
      <div class="grau_01"></div></div>
      <div class="weiss_horizontal"></div>
      </body>
      </html>

      /* CSS Document */
      html,body {
      margin:0px auto;
      padding:0px;
      width:100%;
      height:100%;
      background-color:#ffffff;
      background:url(img/bg.jpg) repeat-x;
      text-align:center;
      font-size:1px;
      }
      .inhalt{
          margin:0px auto;
          padding:0px auto;
          width:871px;
       background-color:#00CC33;
      }
      .news{
          margin:0px auto;
       margin-left:8px;
          padding:0px;
          width:246px;
       height:200px;
       background-color: #f1f6fa;
       border:1px solid #CCCCCC;
       float:left;
       display:inline;
      }
      .box{
          margin:0px auto;
       margin-left:8px;
          padding:0px;
          width:597px;
       height:150px;
       background-color: #ffffff;
       border:1px solid #CCCCCC;
       float:left;
       display:inline;
      }
      /* menue klein platzierung ende*/
      .weiss_horizontal {
       background-color: #ffffff;
       margin:0px auto;
          padding:0px;
       width:871px;
          height:8px;
      }
      .grau {
          background-color: #ffffff;
       margin:0px auto;
          padding:0px;
       width:871px;
          height:18px;
      }
      .grau_01 {
       background-color: #cccccc;
       margin:0px auto;
          padding:0px;
       width:855px;
          height:18px;
      }

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. frage zu div

        Detlef G.
        – Informationen zu den Bewertungsregeln

        Hallo soel

        nun ergab sich aber ein nächstes problem, der ie und opera stellt alles so dar wie ich es möchte, im firefox dagegen hat der div "inhalt" plötzlich keine farbe mehr bzw wir nicht dargestellt????? ehhhh was ist denn da nur los????

        Ich kann dir zwar im Moment nicht sagen, warum genau er es so darstellt. Mit border-bottom für .inhalt passiert dies nicht mehr, allerdings ist weder das noch das zusätzliche div mit clear:both wirklich nötig.

        Nun grundsätzlich:

        </head>
        <body>
        <div class="weiss_horizontal"></div>

        ^^
        Kommt hier noch irgendwelcher Inhalt rein?

        <div class="grau">

        Kommt hier noch irgendwelcher Inhalt rein?

        <div class="grau_01"></div></div>

        ^^
        Kommt hier ...?

        <div class="weiss_horizontal"></div>

        ^^
        Kommt hier ...?

        <div class="inhalt">
        <div class="news"></div>
        <div class="box"></div>
        <div style="clear:both;"></div>

        ^^
        Kommt hier ...?

        </div>
        <div class="weiss_horizontal"></div>

        ^^
        Kommt hier ...?

        ...

        Wozu brauchst du so eine Divsuppe?
        Kommt irgendwo noch Inhalt rein? Wenn ja, gib ihn wenigstens in Form von Blindtexten an.

        Der größte Teil der Divs sieht so aus, als ob du sie nur zu Layoutzwecken drin hast. Das ist nicht nötig, zumindest nicht in einer solchen Menge.
        So wie es aussieht, würde es sich wesentlich schlanker und vielleicht auch unproblematischer aufbauen lassen.

        /* CSS Document */
        html,body {
        ...
        font-size:1px;

        1px, das ist doch wohl nicht dein Ernst?

        .inhalt{
            margin:0px auto;
            padding:0px auto;
            width:871px;
        background-color:#00CC33;

        overflow:hidden; /* oder auto "Wunderwaffe overflow" */

        }

        Das wäre auch eine Möglichkeit dafür zu sorgen, dass sich .inhalt der Größe anpasst. Der IE macht es schon, weil du durch die width-Angabe bei ihm bereits hasLayout gesetzt hast.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. frage zu div

          soel
          – Informationen zu den Bewertungsregeln

          hey danke für die antwort,

          ohne clear both hatte firefox und opera, die divs überlagert, anstatt
          unter einander zu packen...

          div suppe ;-)) naja stimmt, das habe ich aus layout zwecken so gemacht, die einzelnen divs haben unterschiedliche farben ich wüßte nicht, wie ich das sonst das layout umsetzen könnte, da ja die einzelnen elemente verschiedene farben und größen aufweisen

          ahh overflow hidden, kann ich ja mal probieren, ist bestimmt besser als padding 1px !

          danke für den link: hasLayout

          auf wiederlesen ;-)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. frage zu div

            Detlef G.
            – Informationen zu den Bewertungsregeln

            Hallo soel

            div suppe ;-)) naja stimmt, das habe ich aus layout zwecken so gemacht, die einzelnen divs haben unterschiedliche farben ich wüßte nicht, wie ich das sonst das layout umsetzen könnte, da ja die einzelnen elemente verschiedene farben und größen aufweisen

            Nochmal die Frage: Enthält .grau, .grau_01 oder .weiss_horizontal irgendwelche Inhalte?
            Ich glaube nicht, Dann sind sie allerdings auch nicht alle nötig.
            Schau dir mal diese deine Konstruktion an:

            <div class="weiss_horizontal"></div>  
<div class="grau">  
  <div class="grau_01"></div>  
</div>  
<div class="weiss_horizontal"></div>

            Ich sehe dort maximal ein einziges fürs Layout erforderliches Element.
            Für mich sieht die Seite in etwa folgendermaßen aus:

            HTML

                <body>  
    <div id="inhalt">  
      <div class="layout"></div>  
      <div class="news">Neuigkeiten</div>  
      <div class="box">der Ihnhalt</div>  
      <div class="layout"></div>  
    </div>  
  </body>

            CSS

            html,body {  
  margin:0;  
  padding:0;  
  background-color:#fff;  
  background:url(img/bg.jpg) repeat-x;  
  text-align:center;  
  font-size:100.01%;  
}  
#inhalt{  
  margin:0 auto;  
  padding:0;  
  width:871px;  
  background-color:#0c3;  
  text-align:left;  
}  
.news{  
  margin:8px 0 8px 8px;  
  padding:0;  
  width:246px;  
  background-color: #f1f6fa;  
  border:1px solid #ccc;  
  float:left;  
}  
* html .news {  
  margin-left:4px; /* double margin Bug */  
}  
.box{  
  margin:8px 0 8px 8px;  
  padding:0;  
  width:597px;  
  background-color: #fff;  
  border:1px solid #ccc;  
  float:left;  
}  
.layout{  
  border:8px solid #fff;  
  height: 18px;  
  background-color: #ccc;  
  clear:left;  
}

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. frage zu div

              soel
              – Informationen zu den Bewertungsregeln

              hallo detlef,

              danke, sieht wirklich schlank aus und vor allem übersichtlich!
              schön das man den border auch als grafisches element nutzen kann.

              supie...

              soel

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. frage zu div

                Detlef G.
                – Informationen zu den Bewertungsregeln

                Hallo soel

                schön das man den border auch als grafisches element nutzen kann.

                Was meinst du denn, wozu es Border sonst gibt?

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. frage zu div

                  soel
                  – Informationen zu den Bewertungsregeln

                  detlef..
                  naja bisher habe ich border immer nur als häßlichen schwarzen  rahmen
                  gesehen und das potential unterschätzt!

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln