jen: CSS-Layout der Browsergröße anpassen

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

  1. CSS-Layout der Browsergröße anpassen

    suit Homepage des Autors
    – 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.

    nicht möglich

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

    du suchst nach relativen angaben (% ist das mittel der wahl) - ersetze alle maßeinheiten (px, em usw) durch %-angaben - dann erreichst du den gewünschen effekt

    ein bisschen rechenarbeit musst du halt reinstecken

    imho ist das aber übertrieben, ein guter mix aus den dingen ist besser

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Layout der Browsergröße anpassen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@suit:

      ein guter mix aus den dingen ist besser

      width in %, min-width und max-width in em.

      Live long and prosper,
      Gunnar

      --
      Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Layout der Browsergröße anpassen

        Jen
        – Informationen zu den Bewertungsregeln

        Super, vielen Dank. Es hat funktioniert.

        Jetzt hab ich jedoch das Problem das bei der verkleinerung des Browserfensters der Rahmen des Containers Navigation über die Schrift geht und nicht bei Ende des Textes aufhört.

        Wie kann ich das ändern?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS-Layout der Browsergröße anpassen

          suit Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Wie kann ich das ändern?

          ich kann mir nichts drunter vorstellen - kannst du da ein online-beispiel posten wo man sich das ansehen kann?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln