✔ Problem mit Anordnung von div's und W3C

Status
Nicht offen für weitere Antworten.
redlama

redlama

Erfahrenes Mitglied
Hallo!

Kann man via CSS Divs in bestimmten Positionen anordnen und trotzdem XHTML 1.0 Transiotional valide bleiben?

Habe mir das wie folgt vorgestellt:
Ich habe ein Hauptdiv, welches mittig auf der Seite ist.
Dann habe ich ein Kopfdiv im Hauptdiv, welches oben liegt.
Unter dem Kopfdiv sollen ein Navidiv (links) und ein Contentdiv (rechts) im Hauptdiv liegen.

Ist das irgendwie möglich?
Wenn ja wie, bekomme es irgendwie nicht so ganz hin.

redlama
 
Ich kann mir gut vorstellen, dass das, was ich bis jetzt habe, vollkommener Blödsinn ist (habe erst vor ca. 3 Stunden angefangen mich mit div's zu beschäftigen).
Hier mein bisheriger (bitte nich auslachen :-( ) Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>Testseite</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body style="text-align:center; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px">
    <div id="top" style="width:800; height:100%; z-index:1; background-color:#FFFF00">
      <div id="head" style="left:0px; top:0; width:800; height:130px; z-index:2; background-color:#CC3300">
        Kopfdiv
      </div>
      <div id="navi1" style="float:left; left:0px; top:130px; width:160px; height:300px; z-index:3; background-color:#CCFF00">
        Navidiv
      </div>
      <div id="content" style="float:left; left:160px; top:130px; width:640px; height:300px; z-index:4; background-color:#3300FF">
        Contentdiv
      </div>
    </div>
  </body>
</html>
 
Hi,

ich würde auf die absolute Positionierung verzichten und stattdessen nur mit float arbeiten.
Da es etwas umständlich wäre, das alles zu erklären, habe ich ein kleines kommentiertes
Beispiel erstellt.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div-Layout</title>
<meta name="author" content="Quaese" />
<style type="text/css">
  <!--
body, html{ width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            text-align: center;} /* Zentrieren im IE */

/* Umschliesst die eigentlichen Seitenelemente */
#mainDiv{ width: 750px;
          margin: 0 auto;	     /* Zentrieren in Mozilla-Engines und Opera*/
          text-align: center;  /* Schriftausrichtung wieder nach links */
          border: 1px solid blue;}
#kopfZeile{ height: 80px;
            border: 1px solid black;
            background-color: ivory;}
#linkeSpalte{ float: left;   /* Mit float links platzieren und ermöglichen,           */
              width: 180px;  /* weitere Elemente rechts davon positionieren zu können */
              border: 1px solid black;
              background-color: mintcream;}
#rechteSpalte{ border: 1px solid black;
               background-color: aliceblue;}

/* Hebt die float-Eigenschaft wieder auf - notwendig, da sonst die Zuordnung */
/* in den mainDiv verloren geht. Durch die Grössenformatierung erfolgt kein  */
/* Eingriff in das bestehende Layout */
.dummyDiv{ font-size: 1px;
           line-height: 0px;
           height: 0px;
           clear: both;}
  -->
</style>
</head>
<body>
<div id="mainDiv">
    <div id="kopfZeile">&nbsp;</div>     <!-- Kopfzeile                      -->
    <div id="linkeSpalte">&nbsp;</div>   <!-- Linke Spalte                   -->
    <div id="rechteSpalte">&nbsp;</div>  <!-- Rechte Spalte                  -->
    <div class="dummyDiv">&nbsp;</div>   <!-- Aufheben der Float-Eigenschaft -->
</div>
</body>
</html>
Ciao
Quaese
 
Das ist so ziemlich genau das, was ich suche!
Danke Quaese!

Wenn ich weitere Fragen habe, melde ich mich wieder.

redlama
 
Also ich habe die Anordnung soweit hinbekommen.
Jetzt ergibt sich folgendes Problem:
Wenn ich dem Hauptdiv (also dem, wo die anderen drin stecken) als Höhe 100% gebe, dann stimmt die Anzeige im IE. Mit Netscape, Mozilla, Firefox, ... jedoch stimmt die Anzeige nicht.
siehe dazu: Testseite

redlama
 
Hi,

Du musst dem Viewport (HTML) bei den CSS-Definitionen ebenfalls eine Höhe von 100% zuweisen.
Code: 
html{height: 100%;}
Ciao
Quaese
 
Ha!
Hat doch was gebracht!
Aber nur, wenn ich es wie folgt mache:
Code: 
body, html
{
  height: 100%;
  margin: 0px;
}

Danke Quaese, Du bist ein Genie! :) ;)

redlama :suspekt:
 
Hi,

funktioniert bei mir einwandfrei mit IE 5.0, IE 5.5, IE 6, Opera 7.22, Mozilla 1.6, Firefox 0.9.1
und Netscape 7.1 - sowohl lokal als auch unter der von dir geposteten Adresse.

Edit:
Zu spät gesehen, dass es doch funktioniert. Die von Dir verwendete CSS-Formatierung war
in meinem ersten Vorschlag so schon enthalten.
Ciao
Quaese
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück