Jörg: 3 spaltiges Layout: fix-fix-fix

SELF-Forum

3 spaltiges Layout: fix-fix-fix

Jörg
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe ein Problem mit dem Layout. Und zwar habe ich für meine HP ein 3-spaltiges Layout fix-variabel-fix erstellt. Ich war auch sehr zufrieden. Jetzt nach mehreren HTML Seiten merke ich, daß das variable Inhaltsfenster Probleme macht, wenn jemand einen größeren oder kleineren Monitor hat, als ich. Deswegen würde ich gerne das untenstehende fix-variabel-fix Template in ein fix-fix-fix umschreiben. Seiten dazu habe ich auch im Internet gefunden, allerdings bekomme ich es nicht hin mein Layout dementsprechend umzuschreiben. Habe schon alles versucht, was mir mit meinem Wissensstand in CSS möglich ist, aber leider erfolglos. Würde mich sehr über Hilfe freuen.

<!--  
  
   *{  
  margin:0;  
  padding:0;  
    }  
  
  html, body {  
  font: 100% Arial, Helvetica, sans-serif;  
    }  
  
  
  #kopfbereich {  
    background:url(bilder/kopfzeile.jpg) no-repeat left top;  
    height:150px;  
    }  
  
  #kopfbereich p {  
    font-size:2em;  
    text-align:right;  
    color:#232323;  
    padding:.4em .4em 0 0;  
    }  
  
  
  
  #steuerung {  
    background-color:#997533;  
    padding-left:1em;  
    }  
  
  #steuerung a:link { color:black; text-decoration:none; }  
  #steuerung a:visited { color:black; text-decoration:none; }  
  #steuerung a:focus { color:orange; text-decoration:none; }  
  #steuerung a:hover { color:red; text-decoration:none; }  
  #steuerung a:active { color:orange; text-decoration:none; }  
  
  
  #schatten {  
    background:url(bilder/schattenwurf grau.png) repeat-x;  
    height:12px;  
    }  
  
  
  #steuerunglinks {  
    background-color:#eeeeee;  
    float:left;  
    width:11em;  
    padding:1em;  
    }  
  
  #steuerunglinks h1 { font-size:160%; }  
  #steuerunglinks h2 { font-size:130%; }  
  #steuerunglinks h3 { font-size:100%; }  
  #steuerunglinks p { font-size:95%; }  
  #steuerunglinks { font-size:95%; }  
  
  #steuerunglinks a:link { color:blue; text-decoration:underline; }  
  #steuerunglinks a:visited { color:blue; text-decoration:underline; }  
  #steuerunglinks a:hover { color:red; text-decoration:underline; }  
  
  
  #kastenrechts {  
  float:right;  
  width:180px;  
  padding:1em;  
  background-color:#eeeeee;  
  }  
  
  #kastenrechts h1 { font-size:160%; }  
  #kastenrechts h2 { font-size:130%; }  
  #kastenrechts h3 { font-size:100%; }  
  #kastenrechts p { font-size:95%; }  
  #kastenrechts { font-size:95%; }  
  
  #kastenrechts a:link { color:black; text-decoration:none; }  
  #kastenrechts a:visited { color:black; text-decoration:none; }  
  #kastenrechts a:hover { color:red; text-decoration:none; }  
  
  
  
  #inhalt {  
  padding:2em;  
  background-color:#eeeeee;  
  margin: 0em 14em 0em 13em;  
  }  
  
  #inhalt h1, h2, h3, p, ul { padding-bottom:.7em; }  
  
  #inhalt h1 { font-size:160%; }  
  #inhalt h2 { font-size:130%; }  
  #inhalt h3 { font-size:100%; }  
  #inhalt p { font-size:87%; }  
  
  #inhalt a:link { color:black; text-decoration:none; font-size:87%; }  
  #inhalt a:visited { color:black; text-decoration:none; font-size:87%; }  
  #inhalt a:hover { color:red; text-decoration:none; font-size:87%; }  
  
  #inhalt img { border-color:black; border-style:solid; }  
  
  
-->

und die dazugehörige HTML-Datei:

...  
<link href="design.css" rel="stylesheet" type="text/css">  
  
</head>  
  
  
<body>  
  
  <div id="kopfbereich">  
    <p>HP Überschrift</p>  
  </div>  
  
  
<div id="steuerung">  
    |<a href="index.html"> Startseite </a>|  
    <a href="bilder.html"> Bilder </a>|  
    <a href="spinnen.html"> Spinnen </a>|  
    <a href="ameisen.html"> Ameisen </a>|  
    <a href="thaiboxen.html"> Thaiboxen </a>|  
    <a href="radtouren.html"> Radtouren </a>|  
    <a href="bastelecke.html"> Bastelecke </a>|  
    <a href="musik.html"> Musik </a>|  
    <a href="depression.html"> Depression </a>|  
    <a href="videos.html"> Videos </a>|  
    <a href="links.html"> Links </a>|  
    <a href="gbuch.html"> G&auml;stebuch </a>|  
  </div>  
  
  
<div id="schatten">  
  </div>  
  
  
<div id="steuerunglinks">  
......  
  </div>  
  
  
<div id="kastenrechts">  
......  
  </div>  
  
<div id="inhalt">  
.....  
.....  
.....  
.....  
  
  </div>  
</body>  
</html>

Das wars. Ich komme nicht weiter und hänge seit ner Woche an der Geschichte schon dran. :(

Beitrag melden
–
Informationen zu den Bewertungsregeln