Conny: Dreispaltiges Layout mit Kopf- und Fußzeile

SELF-Forum

Dreispaltiges Layout mit Kopf- und Fußzeile

Conny
– Informationen zu den Bewertungsregeln

Hallöchen,

ein (hoffentlich nur) kleines Problem, für das es bestimmt bereits jede Menge Informationen gibt, aber ich weiß nicht so recht, wie ich direkt nach meinem Problem suchen soll. Deswegen hier meine Beschreibung, wer einen Link oder eine Erklärung für mich hat, bitte melden. (Links auf deutschsprachige Seiten wären mir lieb, da ich mit Fremdsprachen eher Probleme habe.)

Es handelt sich um ein dreispaltiges Layout mit Kopf- und Fußzeile:

-------------------------
|                       |
-------------------------
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
|   |               |   |
-------------------------
|                       |
-------------------------

Der mittlere Bereich soll links und rechts die gleiche Farbe und in der Mitte eine andere Farbe haben, wobei diese Farbe ganz bis nach unten reichen soll. Ich habe das folgendermaßen gelöst:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<div class="container">
    <div class="oben"></div>
    <div class="rechts"></div>
    <div class="links"></div>
    <div class="mitte"><div style="clear:both;">&nbsp;</div></div>
    <div class="unten">&nbsp;</div>
</div>
</body>
</html>

.container { background-color:#;}
(Das ist die Farbe, die dann links und rechts zu sehen ist. Oben, unten und mitte werden einzeln definiert bzw. mit Bild belegt.)

.oben { background-color:#;}
.links { float:left; width:150px;}
.rechts {float:right; width:150px; }
.mitte { margin-left:150px; margin-right:150px; background-color:#;}
.unten { background-color:#;}

Das Problem entsteht nun, wenn im mittleren Teil weniger Inhalt vorhanden ist als in den Seitenbereichen: Das div, das im <div class="mitte"> enthalten ist, braucht der Firefox, weil er ansonsten die Farbe der mittleren Spalte nicht bis ganz runter zieht, der IE dagegen bleibt genau an dieser Schreibweise hängen und zeigt den Inhalt nicht bzw. nur teilweise an. Er wäre mit dem clear:both; in .unten völlig zufrieden.

Wie kann ich das lösen, ohne lauter dämliche <p>&nbsp;</p> einzufügen, bist der innere Bereich genug aufgebläht ist, oder einen sonstigen Unsinn anzustellen?

Gruß,
Conny

PS: Eine andere Sache am Rande: momentan passt sich ja alles an die Menge des Inhalts an. Wie könnte ich denn eine feste Höhe erreichen, die sich jedoch mit mehr Inhalt ausdehnt? Ich hatte ein bischen mit height und min-height herumgespielt, aber da muckte auch einer der beiden Browser und zeigte zwar den Inhalt an, dehnte aber das Grunddesign nicht mit aus.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dreispaltiges Layout mit Kopf- und Fußzeile

    Josh
    – Informationen zu den Bewertungsregeln

    Hallo,

    ...aber da muckte auch einer der beiden Browser...

    und wir alle wissen auch, welcher :-)

    Gruß
    Josh

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dreispaltiges Layout mit Kopf- und Fußzeile

      Conny
      – Informationen zu den Bewertungsregeln

      ...aber da muckte auch einer der beiden Browser...

      und wir alle wissen auch, welcher :-)

      Mir ist bei diesen Dingen immer ziemlich egal, wer warum muckt. Wesentlich ist, dass er es tut, und die Frage, die sich dann stellt ist: Wie kann man das möglichst elegant umschiffen? Also? :-)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dreispaltiges Layout mit Kopf- und Fußzeile

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        ...aber da muckte auch einer der beiden Browser...

        und wir alle wissen auch, welcher :-)

        Mir ist bei diesen Dingen immer ziemlich egal, wer warum muckt.

        Sollte es dir aber nicht sein.

        Wesentlich ist, dass er es tut, und die Frage, die sich dann stellt ist: Wie kann man das möglichst elegant umschiffen?

        Wenn du weißt, welcher browser sich bei height und min-height korrekt verhält, und welcher nicht - dann hast du auch schon Suchstichworte, um einen Workaround für den zu finden, der nicht will.

        Das Thema wurde wirklich schon ziemlich oft erörtert.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Dreispaltiges Layout mit Kopf- und Fußzeile

    dey Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe die original.Seite im Netz gesucht aber nicht mehr gefunden.
    Also poste ich dir mal den ganzen verunstalteten Code von mir.
    Schau dir das mal an:

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  
<head>  
  <title>uwMike</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
  
  <style type="text/css" media="screen">  
  
#main-tile { background: #dda; }  
#column-tile { padding: 0 18% 0 22%; background: #ccc; }  
  
#content { float: left; width: 100%; 3px solid green}  
  
#sidebar-a { float: left; width: 34%; margin-right: -36%; position: relative; left: -136%;border-right:3px solid green }  
  
#sidebar-b { float: left; width: 29%; margin-right: -30%; position: relative; border-right:3px solid red}  
  
#head, #foot { background: #eee; padding: 1px; }  
  
  
/*  http://positioniseverything.net/easyclearing */  
  
.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}  
  
.clearfix {display: inline-table;}  
  
/* Hides from IE-mac \*/  
* html .clearfix {height: 1%;}  
.clearfix {display: block;}  
/* End hide from IE-mac */  
  
  </style>  
</head>  
<body>  
  <div id="head"><h1>Full-Height Liquid Columns, No Images Required</h1></div>  
  
  <div id="column-tile">  
  <div id="main-tile" class="clearfix">  
  
  <div id="content">  
<h2>First</h2>  
<p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  
vehicula gravida erat. Phasellus feugiat est. Quisque magna justo,  
ultricies eget, dictum non, vehicula vel, risus. Donec fringilla  
lacinia augue. Vestibulum ac magna eu felis posuere elementum. In ac  
mi. Vivamus at ligula varius libero aliquet sollicitudin. Aliquam vitae  
mi. Suspendisse pretium, est eu egestas pulvinar, dui quam ultricies  
risus, a venenatis felis risus hendrerit nunc. In egestas. Ut  
pellentesque, sem id accumsan nonummy, metus quam rutrum felis, eget  
porttitor enim wisi at est. Maecenas non turpis. Morbi at justo. Fusce  
eget nulla. Phasellus vel wisi. Cras tempus lectus id ante. Duis sit  
amet nibh in mi aliquet gravida.  
</p>  
<p>Integer mattis orci et  
eros. Aliquam erat volutpat. Vivamus a tellus eget orci sollicitudin  
imperdiet. Praesent nec tortor non augue tincidunt suscipit. Nunc  
faucibus. Mauris euismod ullamcorper urna. Nullam pulvinar, erat ac  
vestibulum ullamcorper, neque sapien ultricies sem, gravida elementum  
leo diam scelerisque metus. Aenean dictum. Nunc sed pede. Duis sit amet  
purus sit amet justo tristique ultricies. Aliquam varius mi hendrerit  
libero nonummy euismod.</p>  
<p>Quisque justo mauris, mollis vel, molestie sit amet, lacinia eget,  
ipsum. Morbi gravida quam nec lacus. Praesent quis arcu id quam  
sollicitudin facilisis. Mauris et pede. Nulla elit. Donec nonummy  
feugiat ante. Pellentesque tristique commodo mi. Nulla leo elit, ornare  
in, fermentum in, dignissim sed, sapien. Nunc rutrum neque eget lectus.  
Nulla in nunc. Sed gravida, neque a commodo lacinia, ipsum metus  
posuere lectus, eget dignissim ante nibh sed sapien. Nam dignissim  
lorem. Aenean purus ligula, porta sit amet, suscipit a, scelerisque  
nec, quam. Nullam nunc tellus, laoreet eu, condimentum eu, vestibulum  
et, mauris. Donec nonummy fermentum magna. Nulla risus. Cras fermentum  
augue sed magna. Maecenas vehicula, sem ac euismod consequat, est  
libero elementum magna, sollicitudin faucibus augue ligula at libero.  
Suspendisse ullamcorper. Nullam erat.  
</p>  
</div>  
  
<div id="sidebar-a">  
<h2>Second</h2>  
<p>Praesent vel ante. Vestibulum et lectus. Proin non turpis. Cras quis  
augue. Duis eros justo, placerat sit amet, sollicitudin at, fermentum  
malesuada, velit. Praesent venenatis feugiat velit. Maecenas elit  
lectus, facilisis eu, luctus id, suscipit eu, elit. Praesent aliquet  
bibendum mauris. Aliquam justo dui, consectetuer et, mollis sit amet,  
rhoncus ut, mi. Sed sed nunc vitae leo luctus rhoncus. Sed nonummy  
lectus eget velit. Quisque interdum mi eu purus. Nullam pede neque,  
cursus quis, viverra ut, luctus at, nulla. Phasellus ullamcorper tortor  
at mi. Cras eget nibh. Etiam eu eros. Proin ligula. Duis odio arcu,  
bibendum vitae, suscipit suscipit, feugiat ultricies, velit.  
</p>  
</div>  
<div id="sidebar-b">  
<h2>Third</h2>  
<p>Vestibulum aliquet cursus nisl. Integer enim. Quisque eros lectus,  
placerat ut, luctus gravida, condimentum ac, mauris. Sed viverra mi  
quis augue. Vestibulum hendrerit, ligula a viverra imperdiet, neque  
urna mattis sem, et rutrum ligula tellus et lorem. Donec porttitor,  
justo sit amet malesuada suscipit, lectus neque vehicula erat, vitae  
dictum arcu tortor non odio. Sed vestibulum.</p>  
    </div>  
  </div>  
</div>  
<div id="foot">by <a href="http://uwmike.com">Mike Purvis</a></div>  
  
</body>  
</html>

    bydey

    --
    -- noch immer ein erfolgloser <DIV> Jünger --
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln