[CSS] Fusszeile an linke Spalte oder an den Hauptteil anpassen

[joachimd]

Zitat von patti:

Hab das ganze gerade mal auf meinen Web-Server hochgeladen: http://www.patti-k.de/test/layout_dp/. Habs mit Opera 11 und IE 8 getestet, bei beiden schauts korrekt aus. Wie es in den anderen Browsern dargestellt wird, weiß ich nicht.

nicht als Antwort auf das Thema - nur als Tipp: Schau dir mal http://meineipadresse.de/netrenderer/index.php an. Nette Seite, um mal kurz das Layout für die versch. Browser zu testen. Da siehst du zB, dass das Layout erst mit IE7 wirklich funzt.

[RWarnecke]

Zitat von joachimd:

nicht als Antwort auf das Thema - nur als Tipp: Schau dir mal http://meineipadresse.de/netrenderer/index.php an. Nette Seite, um mal kurz das Layout für die versch. Browser zu testen. Da siehst du zB, dass das Layout erst mit IE7 wirklich funzt.

Hallo Joachim, danke für den Link. Ist ja sehr interessant, was man unter dem Link sieht.

@patti:
Hallo Patrick,

danke für Deine ausführliche Erklärung. Mich beschäftigen dazu aber noch zwei weitere Fragen. Kann ich Klassen mit ID's kombinieren und wenn ja wie ? Wie könnte ich einen Text links und einen Text rechts in der gleichen Zeile im Footer anzeigen. Ich habe es heute morgen mit dem div-Tag und dem span-Tag probiert. Jeweils mit Klasse und ID. Nur leider hat es nicht funktioniert. Entweder hat er mir es in zwei Zeilen, linksbündig untereinander oder komplett hintereinander linksbündig geschrieben. Wäre nett, wenn Du mir es an Deinem Beispiel erklären könntest, wie ich soetwas realisiere.

[patti]

Danke für den Hinweis. Ich hab die Seite diesbezüglich noch einmal überarbeitet und eine Art "Workaround" gebastelt:

Code:

.footer {
   padding:0px;
   background-color: #F8FD95;
   border: 1px solid #E4F004;
   clear:both; /* <-- hier */
}

.navigation {
   width:250px;
   float:left;
   padding:4px;
   background-color:#FFC1C2;
   border:1px solid #FB0006;
   margin:0px;
   margin-bottom:10px; /* <-- hier */
}

.content {
   padding:4px;
   background-color:#B3FFB7;
   border:1px solid #20FF2C;
   margin:0px 0px 0px 268px;
   margin-bottom:10px; /* <-- hier */
}

.container {
   margin:10px 0px 0px 0px;
   overflow:visible; /* <-- hier */
}

Das Problem ist, dass sich der "container"-div auf Grund des float-Attributs des "navigation"-divs nicht an die Höhe dieses DIVs anpasst, wenn dieser höher als der "content"-div ist. Ich habe daher den "margin-bottom" jeweils in "content" und "navigation" definiert und dafür bei "container" rausgenommen. Ich verstehe aber ehrlich gesagt nicht ganz, warum sich der "container"-div nicht richtig anpasst


@Rolf:

Klassen- und ID-Angaben können miteinander kombiniert werden, indem in einem Element ganz einfach beide Attribute angegeben werden. Dabei ist zu beachten, dass das ID-Attribut "mächtiger" als das Class-Attribut ist, d.h. wenn in beiden die gleiche Eigenschaft mit unterschiedlichen Werten definiert wurde, dann wird die Style-Angabe aus dem ID-Attribut bevorzugt.
Wenn du sowohl links- als auch rechtsbündigen Text nebeneinander haben willst, kannst du folgendes machen:

Code:

<div class "footer">
  linksbuendig
  <div id="footerright">
    rechtsbuendig
  </div>
</div>

Und im Stylesheet:

Code:

#footerright {
  text-align:right;
  float:right;
}

Edit: Musste gerade feststellen, dass das auch erst ab IE8 zu funktionieren scheint. Da muss ich mir wohl noch was überlegen... Zur Not könnte man auch eine Tabelle mit zwei Spalten nehmen, wenn sich die älteren Browser querstellen...