nicht angemeldet
Problem mit Floats
Hi,
ich hätte hier folgendes HTML-Dokument, das ich gerne komplett mit Floats formatieren möchte. Das Element "frame_left" soll auf der gleichen Höhe wie "frame_right" stehen. Und das so, dass sie auch noch dann auf der gleichen Höhe stehen, wenn die Höhe von "frame_top" sich ändert. Hat jemand eine Idee, wie ich das realisieren könnte? Man müsste "frame_left" irgendwie über "frame_top" hinweg-floaten. Probiere schon die ganze Zeit herum, klappt aber irgendwie nicht so, wie ich das gerne hätte. BTW die Reihenfolge der DIV-Blöcke darf nicht geändert werden (DIV-Konstrukte können aber nach belieben drumherumgebaut werden), das macht das Ganze so schwierig :-/
THX & Gruß
Karl
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Unterschriftenverzeichnis</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script type="text/javascript" src="/javascript/main.js"></script>
<style type="text/css">
<!--
body {
background-color: white;
margin: 10px 9px 10px 10px;
padding: 0;
}
body
,input
,select
,table
,textarea {
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
hr {
display: none;
}
img {
border: 0;
}
#main {
background-color: red;
overflow: hidden;
padding-left: 150px;
}
#frame_header {
background-color: green;
margin-left: -150px;
padding-right: 150px;
width: 100%;
}
#frame_right {
background-color: yellow;
float: left;
position: relative;
width: 100%;
}
#frame_top {
background-color: purple;
float: left;
position: relative;
width: 100%;
}
#frame_left {
background-color: blue;
display: inline; /* IE 6 */
float: left;
margin-left: -150px;
position: relative;
width: 150px;
}
#frame_footer {
background-color: brown;
clear: both;
margin-left: -150px;
padding-right: 150px;
width: 100%;
}
#frame_bottom {
background-color: gray;
float: left;
position: relative;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="frame_header">
frame_header
</div>
<hr>
<div id="frame_left">
frame_left
</div>
<hr>
<div id="frame_top">
frame_top
</div>
<hr>
<div id="frame_right">
frame_right
</div>
<hr>
<div id="frame_bottom">
frame_bottom
</div>
<hr>
<div id="frame_footer">
frame_footer
</div>
</div>
</body>
</html>
-
Hi,
ich hätte hier folgendes HTML-Dokument, das ich gerne komplett mit Floats formatieren möchte. Das Element "frame_left" soll auf der gleichen Höhe wie "frame_right" stehen. Und das so, dass sie auch noch dann auf der gleichen Höhe stehen, wenn die Höhe von "frame_top" sich ändert.
Du möchtest ein "klassisches" 3-spaltiges (full width) Layout mit Header und Footer erstellen?
Dein frame_right ist ja genauso breit wie dein frame_top, und beide sind jeweils so breit wie ihr gemeinsames Elternelement main. Da beide Elemente left floaten und frame_right im Quelltext nach frame_top kommt, wird frame_right also immer so breit sein wie frame_top und exakt unterhalb von diesem beginnen.
Vielleicht googelst du mal, denn Beispiele für solche Layouts finden sich in Hülle & Fülle im Netz.
Gruß Gunther
-
Du möchtest ein "klassisches" 3-spaltiges (full width) Layout mit Header und Footer erstellen?
Njein bzw. so wie es aussieht, es es schon (fast) richtig. Nur sollte es so aussehen:
+++++++++++++++++++++++++++++++++++++++++++++
- frame_header +
+++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++
+ frame_top +
++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++
- frame_left + + frame_right +
++++++++++++++ ++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++
+ frame_bottom +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
- frame_footer +
+++++++++++++++++++++++++++++++++++++++++++++
"frame_left" befindet sich momentan aber auf der Höhe von "frame_top", soll aber eigentlich auf die Höhe von "frame_right" (wie in meinem tollen ASCII-Bild). Nur weiß ich nicht, ob das überhaupt funktioniert, denn es würde IMHO nur dann gehen, wenn ich die Reihenfolge der DIV-Container (frames_*) ändern würde. Das würde ich aber gerne verhindern...
Gruß
Karl-
Hi!
"frame_left" befindet sich momentan aber auf der Höhe von "frame_top", soll aber eigentlich auf die Höhe von "frame_right" (wie in meinem tollen ASCII-Bild). Nur weiß ich nicht, ob das überhaupt funktioniert, denn es würde IMHO nur dann gehen, wenn ich die Reihenfolge der DIV-Container (frames_*) ändern würde.
Zumindest wenn es ohne Javascript, also rein per CSS funktionieren soll, und frame_left in Abhängigkeit von der Höhe von frame_top positioniert sein soll.
Das würde ich aber gerne verhindern...
Warum eigentlich?
Und wozu diese "Lücken" neben frame_top und frame_bottom?Gruß Gunther
-
Das würde ich aber gerne verhindern...
Warum eigentlich?"frame_left" enthält eine Navigation mit allen Haupt-Navigationspunkten der Seite. Je nachdem, was man hier auswählt, ändern sich die Navigationspunkte in "frame_top" (das enthält eine zusätzliche Navigation). Mir wäre wichtig, dass die Reihenfolge der Navigationselemente auch bei nicht aktivem CSS korrekt ist. Daher möchte ich es verhindern, dass "frame_top" vor "frame_left" definiert wird...
Und wozu diese "Lücken" neben frame_top und frame_bottom?
Das liegt an meinem Layout. "frame_left" enthält eine Navigation, die unterhalb von "frame_top" liegen muss und auf der gleichen Höhe wie "frame_right" positioniert sein soll. Mit einem "margin-top" ist das allerdings nicht getan, denn die Höhe von "frame_top" kann variieren.
-
Das würde ich aber gerne verhindern...
Warum eigentlich?"frame_left" enthält eine Navigation mit allen Haupt-Navigationspunkten der Seite. Je nachdem, was man hier auswählt, ändern sich die Navigationspunkte in "frame_top" (das enthält eine zusätzliche Navigation).
Ah, also die Hauptnavigation kommt _nach_ der Subnavigation!?
Mir wäre wichtig, dass die Reihenfolge der Navigationselemente auch bei nicht aktivem CSS korrekt ist. Daher möchte ich es verhindern, dass "frame_top" vor "frame_left" definiert wird...
Ja, der Grundgedanke ist gut. Was wichtiger ist, kommt weiter vorne im Quellcode. Vielleicht ist also deine "Gewichtung" der Navigationen verkehrt?
Und wozu diese "Lücken" neben frame_top und frame_bottom?
Das liegt an meinem Layout.
Ach nee! ;-)
Aber Layouts kann man ja auch ändern/ anpassen."frame_left" enthält eine Navigation, die unterhalb von "frame_top" liegen muss und auf der gleichen Höhe wie "frame_right" positioniert sein soll.
Das erklärt aber immer noch nicht, warum bspw. frame_top nicht über die gesamte Seitenbreite geht.
Mit einem "margin-top" ist das allerdings nicht getan, denn die Höhe von "frame_top" kann variieren.
Nein - siehe meine vorherige Antwort.
Gruß Gunther
-
Ah, also die Hauptnavigation kommt _nach_ der Subnavigation!?
Genau.
Und wozu diese "Lücken" neben frame_top und frame_bottom?
Das liegt an meinem Layout.
Ach nee! ;-)
Aber Layouts kann man ja auch ändern/ anpassen.Nur, wenn ich die beiden Navigationselemente miteinander austauschen würde. Allerdings würde das mein Konzept kaputt machen...
Das erklärt aber immer noch nicht, warum bspw. frame_top nicht über die gesamte Seitenbreite geht.
Wenn es wie "frame_header" über die gesamte Breite gehen würde, käme "frame_top" (Subnavigation) im HTML-Quellcode wieder vor "frame_left" (Hauptnavigation), was ich ja verhindern möchte.
Meinst du, dem User wäre es egal, wenn er zuerst die Nebennavigation sieht und dann die Hauptnavigation? Ich weiß nicht, ich persönlich finde, dass schaut etwas "komisch" aus. Man klickt sich ja praktisch von oben nach unten durch. Folglich müsse die Hauptnavigation zuerst kommen. Sie beeinflusst ja auch das Aussehen bzw. den Inhalt der Nebennavigation...
Gruß
Karl-
Hi!
Meinst du, dem User wäre es egal, wenn er zuerst die Nebennavigation sieht und dann die Hauptnavigation? Ich weiß nicht, ich persönlich finde, dass schaut etwas "komisch" aus. Man klickt sich ja praktisch von oben nach unten durch. Folglich müsse die Hauptnavigation zuerst kommen. Sie beeinflusst ja auch das Aussehen bzw. den Inhalt der Nebennavigation...
Ja eben. Da habe ich mich eben in meiner Antwort etwas "ungenau" ausgedrückt. Im Quellcode hast du ja die "richtige" Reihenfolge, nur in deinem Layout "drehst" du sie um, indem du die von frame_left abhängige Navigation in frame_top aber genau vor dieser auf deiner Seite darstellst (darstellen willst).
Warum machst du dein Layout nicht so?
+++++++++++++++++++++++++++++++++++++++++++++
- frame_header +
+++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++ ++++++++++++++++++++++++++++++ - frame_left + + frame_top +
+ + ++++++++++++++++++++++++++++++
+ + + frame_right +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
++++++++++++++ ++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++
+ frame_bottom +
+++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++ - frame_footer +
+++++++++++++++++++++++++++++++++++++++++++++
Wobei dann imho frame_bottom eigentlich überflüssig ist.
Dann wärst du auch dein Problem los und hättest die gewünschte Reihenfolge im Quelltext. Außerdem "verschenkst" du keinen "teuren" Platz mehr auf deiner Seite.Gruß Gunther
-
Warum machst du dein Layout nicht so?
Naja, so sieht's im Prinzip ja aus ;-)
Wobei dann imho frame_bottom eigentlich überflüssig ist.
Ja, nicht ganz. Ich habe vor, zwei Footer zu verwenden. Einen "Layout-Footer" und einen "Document-Footer". Hört sich ein bisschen wirr an, ich weiß...
Dann wärst du auch dein Problem los und hättest die gewünschte Reihenfolge im Quelltext. Außerdem "verschenkst" du keinen "teuren" Platz mehr auf deiner Seite.
Naja, ich hab's jetzt so gelöst, dass ich innerhalb des Layers von "frame_left" eine Art Spacer eingebaut habe. Der Inhalt von "frame_top" besteht aus einer gefloateten Liste, sodass die Höhe von "frame_top" durch die eingestellte Schrifthöhe sowie das vergebene Padding für die einzelnen Listenpunkte definiert wird. Der Spacer übernimmt einfach die Schriftgröße sowie das Padding von der Nebennavigation und stellt ein Leerzeichen dar ( ) mit "overflow:hidden". Dadurch bekomme ich den eigentlichen Inhalt von "frame_left" auf die Höhe von "frame_right". Und im Textmodus sieht der Zeilenumbruch, der durch den Layer vom Spacer entsteht, gar nicht mal sooo schlimm aus. Denn "frame_header" setzt sich dadurch etwas vom restlichen Dokument ab. Macht aber nichts, weil "frame_header" eh nur das Logo darstellt und das kann sich ruhig etwas absetzen.
Ist zwar etwas "dirty" umgesetzt, funktioniert aber problemlos in den bisher getesteten Browsern. Mal sehen, was der Validator dazu erzählt ;-)
Vielen Dank für die Schützenhilfe!
Gruß
Karl
- frame_header +
-
-
-
-
- frame_header +
-