nicht angemeldet
Fragen zur Layout Umsetzung
Gunnar BittersmannHallo zusammen,
vielleicht kann mich jemand auf den richtigen weg bringen.
Ich würde gerne ein Tabellenloses Layout umsetzen.
Oben für Logo + Navigation ein 100% breites und 200px hohes Div.
Darunter 3 gefloatete Divs, jeweils 33% Breite und so hoch wie
die verbleibende Höhe. Mein Problem besteht in der Höhenangabe des oberen Divs. Setze ich dieses auf 20% und die unteren divs auf 80% Höhe
ist alles bestens. Mit einer Festen Höhenangabe (200px) funktioniert
das aber leider nicht mehr. Bin Ratlos und möchte nicht zu Tabellen oder Frames greifen ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body{margin:0; padding:0}
#container{
width:100%;
height:100%;
}
#logo{
width:100%;
height:20%;
background-color:#6FF;
}
.Bereich{
width:33%;
height:80%;
background-color:#FC0;
float:left;
overflow:scroll
}
p{
height:1000px;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">logo</div>
<div class="Bereich">A<p></p>ende</div>
<div class="Bereich">B<p></p>ende</div>
<div class="Bereich">C<p></p>ende</div>
</div>
</body>
</html>
-
Grüße,
body,html{margin:0;
width:100%;
height:100%;
padding:0}nicht wirklich nötig, aber es kann dir einmal pro jahr 2 Stunden gefluche ersparen^^
#container{
width:100%;
height:100%;
}
#logo{
width:100%;
height:200px;<--du wolltest odch 200px? warum dann 20%?
background-color:#6FF;
}.Bereich{
width:33%;
height:80%;
background-color:#FC0;
float:left;
overflow:scroll
}p{
height:1000px;
}[/code]
dein problem heißt colums layout, üblicherweise wird mit faux columns (googlen kannst du hoffentlich) gelöst.an sich gibt es keine 100% sauebere möglichkeit ein div 100%-**px hoch zu machen
MFG
bleicher-
Hallo Ihr beiden,
ich danke Euch für Eure Antworten und das auf den richtigen Weg schieben!
Damit bekomm ich das hin.grüße,
bert
-
-
@@berter:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Diese Angabe schaltet Browser in den Quirksmodus. Das gilt es zu vermeiden: public identifier (URI) angeben.
HTML 4.0 ist irrelevant; verwende HTML 4.01. Oder noch besser XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />Mache dich über die <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschiede zwischen XHTML und HTML> kundig!
<body>
<div id="container">Den Container kannst du rückstandlos entsorgen.
Vielleicht willst du das Logo absolut positionieren und dem body oben 'padding' geben:
body { padding-top: 200px; position: relative; } #logo { background: #6FF; height: 200px; left: 0; position: absolute; top: 0; width: 100%; } .Bereich { background: #FC0; float: left; width: 33%; }Und vielleicht willst du, da du nicht wirklich floaten willt, gar nicht 'float' verwenden?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
ich würde Dich nochmals um Rat bitten. Deine beiden Beispiele sind super. Bei dem inline-block kann ich viel lernen. Ersteres Beispiel scheint für mein vorhaben jedoch übersichtlicher. Mit Deinem Vorschlag dem Body padding-top zu gebenläuft nun alles so aus wie ich es möchte.
Das Logo hat eine feste Höhe von 200 px die 3 Divs die Höhe von 100%. Der Overflow Inhalt der Divs ist Scrollbar, die Seite selber hat jedoch keine Scrollbars.
Das einzige woran ich mir nun noch die Zähne ausbeisse ist den Doctype auf einen neueren zu setzen, und den Quriks Mode zu verlassen. Sobald ich auf 4.01 oder XHTML gehe klappt die 100% Höhe der 3 Bereich Divs nicht mehr, und die Seite selber bekommt Scrollbalken. Ich dachte ich könnte dies vermeiden indem ich dem html und body auch 100% gebe. Leider Nein.
Vielleicht hättest Du noch einen Rat?
Herzlichen Dank,
Bert
SO IST ALLES WIE GEWÜNSCHT JEDOCH UNTER VERWENDUNG DES ALTEN DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> body { padding-top: 200px; position: relative; } #logo { background: #6FF; height: 200px; left: 0; position: absolute; top: 0; width: 100%; } .Bereich { background: #FC0; float:left; width: 33.3%; height:100%; overflow-y:scroll; overflow-x:auto; } p{ height:1000px; } </style> </head> <body> <div id="logo">logo</div> <div class="Bereich">A<p></p>ende</div> <div class="Bereich">B<p></p>ende</div> <div class="Bereich">C<p></p>ende</div> </body> </html>-
@@berter:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Welche der gegebenen Hinweise hast du bereits umgesetzt?
<html xmlns="http://www.w3.org/1999/xhtml">
Welche der gegebenen Hinweise hast du bereits umgesetzt?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />Welche der gegebenen Hinweise hast du bereits umgesetzt?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
