Probleme mit <DIV>

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

  • Probleme mit <DIV>

    Hallo zusammen,

    ich hab ein Problem mit <Div> Elementen.
    Im Prinzip hab ich auf meiner Seite einen Header und darunter einen Contentbereich.
    In diesem Contentbereich sollen 3 Spalten sein:
    -Spalte1 eine Grafik
    -Spalte2 eine Menü
    -Spalte3 der Content

    Die ganze Seite soll eine bestimmte Breite nicht überschreiten und vertikal im Browser zentriert sein. Im Hintergrund der Seite soll eine Hintergrundgrafik sein.

    Der Contentbereich soll immer so lang sein wie Spalte 3.

    Im Internet Explorer 6 stimmt die Darstellung auch nur im Firefox absolut nicht. Im Anhang ein kleines Beispiel und die Style Datei
    CSS:
    #backgroundmain{
    position: relative;
    padding: 0px;
    height: 100% !important;
    width:100%;
    margin: auto;
    text-align: center;
    background-color: white;
    }

    #header {
    position: relative;
    padding: 0px;
    height: 179px; width: 950px;
    margin: auto;
    text-align: left;
    margin-top: 5px;
    background-color:#c0c0c0;
    }

    #main {
    position: relative;
    padding: 0px;
    height: auto !important;
    width: 950px;
    margin: auto;
    text-align: left;
    background-color: red;
    border-bottom: 10px solid #FFCC66;
    }

    #col1 {
    float: left;
    padding: 0px;
    width: 60px;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: yellow;
    }

    #col3 {
    float: left;
    width: 670px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    background-color: green;
    }

    #col2 {
    float: left;
    width: 220px;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    background-color: blue;
    }

    HTML:
    <body>
    <div id="backgroundmain">
    <div id="header">header</div>
    <div id="main">main<br>

    <div id="col1">col1<br><br><br><br><br></div>
    <div id="col2">col2<br><br><br><br><br><br><br><br><br><br></div>
    <div id="col3">col3<br><br><br><br><br><br><br></div>
    </div>
    </div>
    </body>
    Kann mir bitte jemand helfen dass es auch im Firefox stimmt ?
    Danke
    Zuletzt geändert von mgoertz; 17.03.2008, 19:38.

  • #2
    Hallo

    Der IE hat da ein bug mit text-align: center; er richtet nicht nur den text aus sonder auch den div.
    Also bei backgroundmain: wenn du da text-align: center; angibst,
    wird das header- und der mein div zentriert.

    Die einfachste Lösung, allerdings keine gute, pack die div's in eine Tabelle.
    FF und andere Browser machen bei text-align: center;
    auch das was es sagt, den TEXT zentrieren und nix anderes.

    LG
    Susanne
    Zuletzt geändert von SusanneW; 17.03.2008, 17:36.

    Kommentar


    • #3
      Hallo Susanne,

      das mit der Zentrierung stimmt ja schon so wie es soll.
      Leider packt der FF die Spalte 3 unter die Spalte 2 anstatt rechts daneben und der "main" Bereich verlängert sich im FF nicht richtig. Hat da jemand mir zufällig eine Lösung

      Kommentar


      • #4
        Ich sehe da keinen Unterschied außer dem, dass im IE der rote Container länger ist.
        Das liegt aber daran, dass der IE Boxen fälschlicherweise vergrößert, wenn der Inhalt zu groß ist. Der Firefox macht es richtig und lässt den Inhalt überlaufen.
        Zuletzt geändert von Manko10; 17.03.2008, 19:54.

        Kommentar


        • #5
          ok vielen Dank du meinst dass es dann so passen müsste oder ?

          Kommentar


          • #6
            Ich finde diese Seitenanordnung etwas... gewöhnungsbedürftig, aber ich schreibe einfach mal "ja".

            Kommentar


            • #7
              @topicstarter

              generell ist es recht problematisch mit position zu arbeiten. schau dir mal das tutorial an, da geht das auch ohne position. achte auch besonders auf das entsprechende clearen von elementen.

              gruß
              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Danke Kropff,

                ich hab es mir angeschaut und nach deineem Tutorial ohne position umgebaut nochmals vielen Dank

                Kommentar

                Lädt...
                X