andreas: Ebene

Hallo,

ich habe es endlich geschafft.
2 Spalten eine eine Ebene über beide Spalten.

Firefox ist es richtig
Internet Explorer zeigt mir die Ebene nicht über beide Spalten sondern setzt diese in die erste Splate somit stimmt das ganze Layout nicht.

Was mache ich falsch??

Script:
body {
background-color: #ffffff;
font-size:12px;
font-family:Helvetica, Arial, sans-serif;
text-align: center;
}

#rahmen {
text-align: center;
width: 780px;
height:100%;
background-color:#FFE599;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#left {
float: left;
width:150px;
height:100%;
background-color:#FFCC66;
padding:0px;
margin: 0px;
text-align: left;
}

.box1{
float:left;
padding:15px;
width:175px;
height:175px;
margin:50px 15px 0 10px;
text-align: left;
z-index:1;
}

#main {
float: right;
width:630px;
height:100%;
padding:0px;
margin: 0px;
text-align: center;
}

<div id="rahmen">
  <div id="left">Linke Spalte
     <div class="box1">menü was über zwei Splaten liegt</div>
  </div>
  <div id="main">rechte Spalte</div>
</div>

  1. Hallo,

    Firefox ist es richtig

    wunderts dich? ;)

    Internet Explorer zeigt mir die Ebene nicht über beide Spalten sondern setzt diese in die erste Splate somit stimmt das ganze Layout nicht.

    Was mache ich falsch??

    Du nichts, sondern der Internet Explorer. Er dehnt die linke Spalte so weit aus, wie seine Elemente groß sind. Dass box1 zwar gefloatet und damit aus dem Textfluss genommen ist, und somit die Größe der Spalte nicht beeinflussen darf, ist ihm dabei schnurzegal.

    Da du aber sowieso mit festen Größenangaben arbeitest kannst du box1 auch absolut positionieren. ergänze dazu

    #left {

    position:relative;

    float: left;
    width:150px;
    height:100%;
    background-color:#FFCC66;
    padding:0px;
    margin: 0px;
    text-align: left;
    }

    .box1{

    position:absolute;
    top:0;
    left:0;
    /* float:left; */

    padding:15px;
    width:175px;
    height:175px;
    margin:50px 15px 0 10px;
    text-align: left;
    z-index:1;
    }

    Viele Grüße
    Patrick

    --
    "Though this be madness, yet there's method in't."
    sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
    1. Hi,

      jetzt habe ich die Änderungen vorgenommen.
      Die Splaten haben die richtige Breite jedoch jetzt zeigt er mir die Box überhaubt nicht mehr im Explorer?

      1. Hallo,

        Die Splaten

        Du scheinst dich dran zu gewöhnen - das heisst "Spalten" ;)

        haben die richtige Breite jedoch jetzt zeigt er mir die Box überhaubt nicht mehr im Explorer?

        Hmm, das wundert mich jetz. Welche Version verwendest du? Ich habs mit IE6 getestet und es geht..

        Viele Grüße
        Patrick

        --
        "Though this be madness, yet there's method in't."
        sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
        1. Hi,

          Hmm, das wundert mich jetz. Welche Version verwendest du? Ich habs mit IE6 getestet und es geht..

          ich habe auch den neeusten 6.0.2900.2180......
          im Quellcode ist alles da nur im browser nicht