Melanie: Primitivstes Layout gelingt nicht!

Hallo,

mir gelingen die einfachsten Sachen nicht: Im IE7 zeigt das nachfolgende Beispiel vier Kästen an.

+---------------++---------------++------------+
!               !! rot           !! grün       !
! gelb          !+---------------++------------+
!               !
!               !
!               !
!               !
+---------------+
+------+
! blau !
+------+

Ich möchte aber erreichen, dass es so aussieht und zwar OHNE Verwendung von position:absolute.

+---------------++---------------++------------+
!               !! rot           !! grün       !
! gelb          !+---------------++------------+
!               !+------+
!               !! blau !
!               !+------+
!               !
+---------------+

Das muss doch möglich sein. Sorry, dass ich sowas primitives frage, aber ich finde einfach keine vernünftige Lösung.

Im FF2 zeigt der Code übrigens nur den blauen Kasten an. :-(

<html>
<head>
<style type="text/css">
<!--
#gelb {
 padding:0px;
 margin:0px;
 border:0;
 height:150px;
 width:150px;
 background-color:#FFFF00;
}

#rot {
 border:0px;
 margin:0px;
 padding:0px;
 height:30px;
 width:300px;
 vertical-align:top;
 background-color:#FF0000;
}

#gruen {
 padding:0px;
 margin:0px;
 border:0px;
 height:30px;
 width:200px;
 vertical-align:top;
 background-color:#00FF00;
}

#blau {
 padding:0px;
 margin:0px;
 border:0px;
 height:30px;
 width:80px;
 vertical-align:top;
 background-color:#0000FF;
}
-->
</style>
</head>
<body>
   <span id="gelb"></span>
   <span>
      <span id="rot"></span>
      <span id="gruen"></span>
      <div id="blau"></div>
   </span>
</body>
</html>

  1. Wieso hast du in einem "inline" Element (<span>) ein "block" element (<div>)?

    Alle deine kästen sollten DIVs sein. Oder SPANs die du in ein blocklevel Element umwandelst aber das wäre ja schwachsinn.

    Dann musst du ein bisschen probieren und dich evtl. mit "Float" auseinandersetzen.

    Viel Erfolg!

  2. Hi,

    also ich fand nirgends ein "float" in deinem CSS. Nebeneinander von irgendwas mit irgenwas geht ca. so:

    <span id="Ich bin der LINKSMANN, und alles neben mir ist immer rechts von mir, und ausserdem ist keiner nach mir hoeher als ich">
       MANN der sich nicht kümmert und steht wo er steht
    </span>

    <span id="egal was ich probiere: Immer bleib' ich rechts von diesem bösen LINKSMANN">
       FRAU, die es noch nicht mit position:absolute und auch noch nicht mit relative probiert hat
    </span>

    Bitte nicht als chauvinistisch verstehen, sondern als pädagogisch. Ich hege die Hoffnung, dass du anhand dieses Satz besser verstehst, und  er ist wahr. Er ist Teil des Grossen, des Ganzen komplexen CSS. Aber nur ein kleiner. Da ist naemlich noch ein Teil: Weil die spans kein div sind sind sie auch eher nicht eine Box. Also kein Kasten. Spans sind eher Zeilen in dem Kasten. Kannst du mal probiren mit

    <div style="background:blue">
     Ich bin normal Text
     <span style="background:red">

    Und ich bin ein langer ruhiger Fliesstxt, derrr ich merk es ge<br>
       ade unheimlich    lang werden muss damit diesesw Ver. Beisoiel
       funktionieerrTschuldigung

    </span>
    </div>

    Rette dich, wenn du noch kannst. Du willst eine Webpage erstellen? Kuckmal nach dem Artikel  bzgl Floatlayout oder so ähnlich hab ich vergessen. Also es ist bei den "Artikeln" hier auf der Seite.

    Leider funktioniert ascii-art hier nur bwenn monospaced-font per default eingestellt wäre. Ist es aber nicht.

    1. Hi wieder was vergessen, Beispiel oben gehr so

      <span id="Ich bin der LINKSMANN, und alles neben mir ist immer rechts von mir, und ausserdem ist keiner nach mir hoeher als ich" style ="float:left; display:block">
         MANN der sich nicht kümmert und steht wo er steht
      </span>

      <span id="egal was ich probiere: Immer bleib' ich rechts von diesem bösen LINKSMANN"; display:block">
         FRAU, die es noch nicht mit position:absolute und auch noch nicht mit relative probiert hat
      </span>

      Wenn du erstmal 2 Boxen nebeinander hast, gehts weiter

      so jetza ber muss ich, bitte jetzt aber

      tschüs

      Christian