Einfaches DIV layout, vorschläge

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Einfaches DIV layout, vorschläge

    hi

    habe scho recht lange nicht mehr gross mit html gearbeitet, und mir mal kurz zeit genommen, um wieder damit zu beginnen.

    nun wollte ich es so aufbauen wie in der nachfolgenden grafik zu sehen ist



    an und für sich ziemlich simple

    wenn ich das mache, klappt es im IE schön, dass heisst der grüne div ist schön NEBEN dem blauen, mit float:left gemacht dass es neben dra ist.

    beim FF aber ist der grüne positionmässig genau gleich wie der blaue, versteckt einen teil von sich also hinter dem blauen.

    was mach ich falsch?

  • #2
    was mach ich falsch?
    du sagst nicht, was du machst.

    Kommentar


    • #3
      stimmt eignetlich

      hm, also ich hab hier einfach mal den CSS code rauskopiert

      Code:
      <style type="text/css">
      <!--
      .div_haupt{
      width:666px;
      border:1px solid red;
      padding:0px;
      margin:0px;
      background-image:url('img/bg_hauptdiv.png');
      
      }
      
      .div_links{
      width:65px;
      height:100px;
      border:0px solid blue;
      padding:0px;
      margin:0px;
      background-image:url('img/icons/r.png');
      float:left;
      }
      .div_mitte{
      width:555px;
      height:182px;
      border:0px solid green;
      padding:0px;
      margin:0px;
      background-image:url('img/verlauf.png');
      background-repeat:no-repeat;
      
      }
      .div_unten{
      width:666px;
      height:35px;
      border:1px solid yellow;
      padding:0px;
      margin:0px;
      background-image:url('img/unten.png');
      position:relativ;
      bottom:0px;
      }
      
      -->
      </style>
      und den dazugehörigen html code

      Code:
      <div class='div_haupt'>
      <div class='div_links'></div>
      <div class='div_mitte'>langer text<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>lang<br/><br/><br/>
      lang</div>
      <div class='div_unten'></div>
      </div>
      wie gesagt, kurzfassung:
      der blaue ist mit "float:left" getaggt, damit der grüne neben dra ist, und nicht unterhalb.
      das funktioniert auch.
      aber unter dem firefox ist er nicht neben dem blauen sondern direkt hinten dran.

      Kommentar


      • #4
        Gib dem grünen ein margin-left von der breite des blauen divs

        Kommentar


        • #5
          Original geschrieben von prego
          Gib dem grünen ein margin-left von der breite des blauen divs
          hm, dass gibt dann aber im IE probleme, weil der ie den ja eben neben den blauen setzt, und dann durch den margin-left noch weiter entfernen würde

          Kommentar


          • #6
            Das grüne DVI auch float:left.

            Achso, geh sicher das sich die Seite im Standardkonformen Modus ist (Firefox->Seiteneigenschaften) damit der IE nicht mit alten Boxmodell oder Ähnlichem arbeitet.

            http://www.quirksmode.org

            Kommentar

            Lädt...
            X