jen: CSS-Layout der Browsergröße anpassen

Beitrag lesen

SELF-Forum

CSS-Layout der Browsergröße anpassen

jen
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte mein Layout gerne so anpassen, das es in allen Browsern und in jeder Browsergröße gleich aussieht.

Wenn man das Browserfenster verkleinert soll der Container #content und #footer automatisch der neuen Browsergröße anpasst

Ich habe oben einen Kopf (Banner), links darunter die Navigation und rechts neben der Navigation der Inhalt und der Footer.

Jedes mal wenn ich die Größe des Browserfensters zu sehr verkleinere, wird die Navigation und Inhalt zu Einem. Es wird also alles verschoben.

Mein CSS sieht folgendermaßen aus:

  
body {  
 font-family: Arial;  
 color:#ffffff;  
  background-color:#000000;  
 padding:1em;  
 margin:0;  
}  
  
/* ----------container zentriert das layout hintergrung-------------- */  
#container {  
 margin: 0;  
 padding: 0;  
 background-color: #000000;  
  border: 1px; border-color:#ffffff; border-style: solid;  
}  
  
/* ----------banner for logo-------------- */  
#logo[id]{  
 margin: 0 0 1em;  
 background-color: #000000;  
  border: 1px; border-color:#ffffff; border-style: solid;  
  height:11.2em;  
  min-width:900px;  
}  
  
div#links{  
height:11.3em;  
text-align:left;  
float:left;  
}  
  
div#mitte{  
height:11.3em;  
margin-left:5em;  
float:left;  
}  
  
div#rechts{  
height:11.3em;  
text-align:right;  
float:right;  
}  
  
/* -----------------Inhalt--------------------- */  
#content{  
 float: left;  
 min-height:800px;  
 margin: 0 2%;  
  width:60%;  
  border-left: 1px; border-color:#ffffff; border-style: solid;  
  border-right:0;  
  border-bottom:0;  
  border-top:0;  
}  
  
/* --------------left navigavtion------------- */  
#left{  
 float: left;  
 width: 19em;  
 margin: 0;  
 color:#ffffff;  
  min-height:600px;  
}  
  
/* -----------footer--------------------------- */  
#footer {  
 clear: left;  
 margin: 0;  
 margin-left: 19em;  
  border-left: 1px; border-color:#ffffff; border-style: solid;  
  border-right:0;  
  border-bottom:0;  
  border-top:0;  
}

Mein Index folgendermaßen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html>  
<head>  
<title>test</title>  
<link rel="stylesheet" type="text/css" href="./format.css">  
  
</head>  
  
<body>  
  
  <div id="logo">  
  <div id="links"><img src="./pics/links.jpg"></div>  
  <div id="mitte"><img src="./pics/mitte.jpg"></div>  
  <div id="rechts"><img src="./pics/rechts.jpg"></div>  
  
  </div>  
  
<div id="container">  
  
 <div id="left">  
Navigation  
</div>  
  
 <div id="content">  
     Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt  
 </div>  
  
<div id="footer">Footer</div>  
</div>  
  
</body>  
</html>

Des Weiteren habe hat mein Footer links einen Rahmen/Linie(nur auf linker Seite). Aus dem Grund, das die Linie zw. Inhalt und Navigation durchgezogen ist. Diese verschiebt sich auch mit der Änderung der Browsergröße.

Was kann ich tun, das ab einer best. Größe die Container nicht verschoben werden und die Linie des Footers auf der Linken Seite bündig mit der rechten Linie der Navigation ist?

Ich bitte um Hilfe.

Liebe Grüße

Jen

Beitrag melden
–
Informationen zu den Bewertungsregeln