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

**RWarnecke**

Hallo zusammen,

ich versuche mich gerade in CSS. Ich habe bis jetzt immer nur fertige Stylesheets angepasst (z.B. Farben, oder Abstände). Nun will ich mir ein eigenes Stylesheet aufbauen, womit ich künftig meine Webseiten mit gestalten will. Dieses soll 3 spaltig oder 2 spaltig sein, entsprechend der Anforderung. Ich versuche mich gerade an einem zweispaltigen Layout mit Kopf- und Fußzeile. Das ganze sieht auch schon recht annehmbar aus. Ich habe aber zwei Probleme :

Beim IE8 unter Windows 7 wird die linke Spalte etwas versetzt nach unten angezeigt. Was habe ich falsch gemacht, da in allen anderen Browsern es richtig angezeigt wird ?
Ich würde gerne die Fusszeile über beide Spalten haben und diese soll ich immer der längsten Spalte anpassen. Wie kann ich das realisieren ?

Hier dazu mein Quelltext :

markieren

Code:

			body {

   font-family: serif;

   font-size: 15px;

   background-color: #fff;

   color: #000;

   padding: 10px 0 0;

   margin: 0;

   }

HTML>body {

   padding: 0;

   max-width: 1400px;

   }

#header {

   background-color: #d5fcf4;

   padding: 0;

   border: 1px solid #0c9;

   margin: 10px;

   height: 100px;

   }

#main {

   background-color: #d5eeff;

   padding: 0;

   border: 1px solid #09f;

   margin: 10px 10px 10px 247px;

   }

#footer {

   background-color: #eed5ff;

   padding: 0;

   border: 1px solid #90f;

   margin: 10px 10px 10px 10px;

   }

#left {

   background: #ffd5ee;

   padding: 0;

   border: 1px solid #f09;

   margin: 10px;

   width: 225px;

   position: absolute;

   top: 112px;

   left: 0;

   }

Noch meine Index.html:

markieren

Code:

			<link rel="stylesheet" href="layout.css" type="text/css" />

<body>

<div id="header">

   ...

</div>

<div id="left">

   ...<br>

   ...<br>

   ...

</div>

<div id="main">

   ...<br>

   ...

</div>

<div id="footer">

   ...

</div>

</body>

**patti**

Hi,

ich hab hier gerade mal was getippt, das funktionieren sollte. Hab den left-Container und den main-Container noch in einen zusätzlichen Container gepackt und mit dem Attribut "flot:left;" gearbeitet. Ich würde statt dem id-Tag für die DIV-Container lieber das class-Attribut verwenden.

markieren

Code:

			<!DOCTYPE HTML>

<html>

<head>

   <link rel="stylesheet" href="layout.css" type="text/css">

</head>

<body>

   <div class="header">

      Header

   </div>

   <div class="container">

      <div class="navigation">

         Navigation<br>

         Zeile 2<br>

         Zeile 3<br>

         Zeile 4<br>

         Zeile 5<br>

      </div>

      <div class="content">

         Content<br>

         Neue Zeile<br>

         Neue Zeile<br>

         Neue Zeile<br>

         Neue Zeile<br>

         Neue Zeile<br>

      </div>

   </div>

   <div class="footer">

      Footer

   </div>

</body>

</html>

markieren

Code:

			body {

   background-color: white;

   padding:10px;

   margin:0px;

}

.header {

   padding:4px;

   height:64px;

   background-color: #CDEBF3;

   border: 1px solid #30A7C5;

}

.footer {

   padding:4px;

   background-color: #F8FD95;

   border: 1px solid #E4F004;

}

.navigation {

   width:250px;

   float:left;

   padding:4px;

   background-color:#FFC1C2;

   border:1px solid #FB0006;

   margin:0px;

}

.content {

   padding:4px;

   background-color:#B3FFB7;

   border:1px solid #20FF2C;

   margin:0px 0px 0px 268px;

}

.container {

   margin:12px 0px;

   overflow:hidden;

}

Bei Bedarf kann ich alles noch etwas näher erläutern

mfg,
Patrick

Edit: 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.

**RWarnecke**

Hallo Patrick,

danke für Dein Beispiel. Jetzt wird es bei mir auch richtig angezeigt. Das mit dem Container habe ich soweit verstanden und die damit verbundene Fußzeile. Nur eines verstehe ich noch nicht ganz, mit der Navigation links, warum die jetzt bei Dir richtig angezeigt wird und bei mir nicht. Liegt es vielleicht an dem position Parameter ?

**patti**

Du meinst, dass der linke Container bei dir um ein paar Pixel nach unten versetzt war?
Du kannst mal probieren, was passiert, wenn du den Doctype für deine HTML-Datei angibst (erste Zeile aus meiner HTML-Datei). Der IE interpretiert manche Angaben abhängig vom gesetzten Doctype unterschiedlich, evtl. würde das sogar dein Problem beheben...

**RWarnecke**

Zitat von patti:

Du meinst, dass der linke Container bei dir um ein paar Pixel nach unten versetzt war?

Ja, das meinte ich.

Zitat von patti:

Du kannst mal probieren, was passiert, wenn du den Doctype für deine HTML-Datei angibst (erste Zeile aus meiner HTML-Datei). Der IE interpretiert manche Angaben abhängig vom gesetzten Doctype unterschiedlich, evtl. würde das sogar dein Problem beheben...

Wenn ich den DOCTYPE zum Beispiel aus Deiner HTML-Datei entferne, gehen die Einstellungen von Container flöten im IE8 (siehe Anhang). In den anderen Browser Chrome, Firefox, Safari und Opera nicht.

**patti**

Zitat von RWarnecke:

Wenn ich den DOCTYPE zum Beispiel aus Deiner HTML-Datei entferne, gehen die Einstellungen von Container flöten im IE8 (siehe Anhang). In den anderen Browser Chrome, Firefox, Safari und Opera nicht.

Und was passiert, wenn du in deiner ursprünglichen Datei mal mit den Doctypes spielst, beispielsweise ein

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
		

benutzt?

Bei

SelfHTML gibt es interessante Informationen zu dem Thema. Dort steht auch, warum der IE anders reagiert als andere Browser.

**RWarnecke**

Hallo Patrick,

ich habe das ganze eben nochmals mit dem DOCTYPE getestet. Wenn ich den DOCTYPE angebe, wird der linke Kasten im IE8 richtig angezeigt. Wird Doctype weggelassen, wird der linke Kasten etwas versetzt nach unten angezeigt. Dann ist mir gerade beim Testen aufgefallen, Du hast Punkte für die einzelnen Sektionen in der CSS-Datei genommen und ich das Symbol #. Worin besteht der Unterschied, wenn ich eine Sektion in einer CSS-Datei mit # oder mit einem Punkt anfange ?

**patti**

Zitat von RWarnecke:

Dann ist mir gerade beim Testen aufgefallen, Du hast Punkte für die einzelnen Sektionen in der CSS-Datei genommen und ich das Symbol #. Worin besteht der Unterschied, wenn ich eine Sektion in einer CSS-Datei mit # oder mit einem Punkt anfange ?

Selektoren in CSS, die mit # anfangen, beziehen sich immer auf ein Element im HTML-Dokument mit einer bestimmten ID. Selektoren, die dagegen mit einem Punkt beginnen, definieren sog. Klassen ("class").

Eine ID vergibt man folgendermaßen:

markieren

Code:

Und den Style dann eben über das #-Symbol:

markieren

Code:

#meineid { }

Bei einer Class schauts so aus:

markieren

Code:

markieren

Code:

.meineclass { }

Der wichtigste Unterschied, den man unbedingt beachten muss, um HTML- und CSS-konform zu arbeiten, ist, dass innerhalb eines HTML-Dokuments jeweils nur ein Element "pro ID" exisitieren darf, d.h. eine ID muss eindeutig sein. Dagegen können beliebig viele Elemente einer Class zugewiesen werden.
Ich habe vor ein paar Tagen auf Grund von diesem Thread per PN mit Matze "diskutiert", welche Möglichkeit vorzuziehen ist. Ich werde meine Aussagen mal zusammenfassen und hier präsentieren

mfg

**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.