nicht angemeldet
Height 100% in Verbindung mit float
StruppiHi
ich habe folgendes Problem:
Ich habe eine Seite erstellt, die keine Tabellen beinhaltet, sondern nur auf div tags basiert. um eine spaltenstruktur hinzubekommen, habe ich dem hauptmenü (linke spalte) die css eigenschaft float:left; zugewiesen. wenn ich nun möchte, dass diese spalte vom startpunkt bis ganz nach unten verläuft (mit height:100%) bekomme ich einen scrollbalken. das div startet nämlich nicht vom seitenanfang sondern erst so in der mitte der seite.
wie bekomme ich es denn hin, dass die spalte vom startpunkt aus bis ganz nach unten läuft und dort auch aufhört, so dass kein scrollbalken erscheint?
-
Ich habe eine Seite erstellt, die keine Tabellen beinhaltet, sondern nur auf div tags basiert. um eine spaltenstruktur hinzubekommen, ....
Nicht das dein Anliegen sich nicht umsetzen liesse, aber schon deine Formulierung läßt erkennen, dass dein Ansatz kein guter CSS Ansatz ist.
Mit CSS lassen sich keine richtige Spaltenstrukturen erstellen, dort ist alles in Kästchen aufgeteilt. Sinnvoll ist es daher ein Layout auf dieser Basis aufzubauen. sonst bleibt dir nur Workarounds und DIV Suppen.
Besser ein sauberes Tabellenlayout, als CSS Murks.
Struppi.
--
Javascript ist toll (Perl auch!) -
Hoi
Wozu brauchst du denn ein Div, dass 100% height hat für deine Navigation? Ansich ändert sich die Größe des Divs ja entsprechend des Hintergrunds.
Wenns nur z.B. um Hintergrundfarben etc geht, dann kannst du ja auch mit Hintergrundbildern/-farben im Body oder einem Wrapper Div arbeiten. Ansich gibt es viele Möglichkeiten hier vorzugehen.
Und ich bin auch nicht der Meinung, dass man noch Tabellen zum Layouten einsetzen sollte. Man kriegt prima Spaltenlayouts auch mit CSS hin.
Gruß Ben
-
Wozu brauchst du denn ein Div, dass 100% height hat für deine Navigation? Ansich ändert sich die Größe des Divs ja entsprechend des Hintergrunds.
ich weiß nicht. aber bei mir tut es nicht. es passt sich dem inhalt an.
Wenns nur z.B. um Hintergrundfarben etc geht, dann kannst du ja auch mit Hintergrundbildern/-farben im Body oder einem Wrapper Div arbeiten. Ansich gibt es viele Möglichkeiten hier vorzugehen.
ja. es ist nur wegen dem hintergrund. was ist ein wrapper div?
Und ich bin auch nicht der Meinung, dass man noch Tabellen zum Layouten einsetzen sollte. Man kriegt prima Spaltenlayouts auch mit CSS hin.
ich habe ja keine tabellen eingesetzt. das layout hatte ich zuerst als tabellenlayout, habe dann aber erfahren dass man dies nicht mehr tun sollte. deshalb bastle ich nun an einer css-lösung.
@struppi: ist es denn falsch mit float zu arbeiten? was mache ich falsch, dass du es als basteln bezeichnest? kannst mir ein paar tipps geben, wie man es "richtig" macht.
thx und gruß
-
Hoi nochmal.
ich weiß nicht. aber bei mir tut es nicht. es passt sich dem inhalt an.
Des war natürlich Schmarrn, es passt sich dem Inhalt an. Ka warum ich da Hintergrund geschrieben habe.
ja. es ist nur wegen dem hintergrund. was ist ein wrapper div?
Ein Wrapper ist ein Div, dass andere Divs umschließt, um sozusagen weitere Ebenen zum layouten zu haben. Sollte man natürlich nicht zu oft einsetzen, da sonst, wie Struppi schon angemerkt hat, Div-Supper rauskommt. Aber solange es ums grobe Layout geht, sind ein paar Divs durchaus ok.
Z.B. sowas in der Art:
<div class="wrapper">
<div class="left_navi">Hier ist viel Navigation z.B. mit Listen</div>
<div class="content">Hier steht ganz viel Inhalt</div>
<div class="clearer"></div>
</div>Wenn du jetzt left_navi eine feste Breite verpaßt, dann kannst du in Wrapper ein Hintergrundbild setzen, daß die gleiche Breite hat, wie die Navigation, und eine Höhe von 1 Pixel. Dieses läßt du dann per repeat-y über die gesammte Höhe des Wrappers anzeigen. Damit hast du sozusagen Links eine Säule hinter deiner Navigation stehen, die sich nicht um die Höhe des left_navi Divs kümmert.
Bisserl CSS dafür:
.wrapper {
position:relative;
background: url('hintergrundbild.png') repeat-y;
}
.left_navi {
float:left;
width:200px;
}
.content {
float:right
}
.clearer {
height:1px;
clear:both;
overflow:hidden;
}Sowas in der Art sollte klappen. Da werden wohl einige jetzt gleich Div-Suppe schreien, aber da gibts wesentlich schlimmere Beispiele für Div-Suppe.
ich habe ja keine tabellen eingesetzt. das layout hatte ich zuerst als tabellenlayout, habe dann aber erfahren dass man dies nicht mehr tun sollte. deshalb bastle ich nun an einer css-lösung.
Das bezog sich mehr auf das, was Struppi gesagt hat zu CSS-Layout.
Und nein, es ist nicht falsch mit floats zu arbeiten. Es gibt halt nur extrem viele Fehlerquellen und man muss sich gut reinarbeiten, damits dann auch gescheit hinhaut und keine Div-Suppe entsteht :)
Gruß Ben
-
Wenn du jetzt left_navi eine feste Breite verpaßt, dann kannst du in Wrapper ein Hintergrundbild setzen, daß die gleiche Breite hat,
Damit hast du dann aber eine Nachteil, dass die Seite sich nicht mehr an die Schriftgröße anpassen kann. Für das Problem ist das sicher eine gute Lösung, aber du hast so ein neues Problem, dass z.b. mit einer Tabelle nicht mehr hättest (ah herrje was rede ich hier ;-) ich will niemand zu einem Tabellenlayout überreden, aber man sollte das Layout der Technik anpassen, nicht umgekehrt)
Sowas in der Art sollte klappen. Da werden wohl einige jetzt gleich Div-Suppe schreien, aber da gibts wesentlich schlimmere Beispiele für Div-Suppe.
das ist sicher kein DIV Suppe
Struppi.
--
Javascript ist toll (Perl auch!)-
OK.
das hat mir weitergeholfen. ich sehe das ich da wohl noch ein bisschen mehr arbeit investieren muss, damit die seite nach etwas aussieht.
gruß
-
ich hab da noch eine kleine frage die zwar nicht zu dem Thema passt. aber vl könnt ihr mir ja weiterhelfen.
ich verwende ja für die Navigation float:left. ich weiß nicht ob das normal ist, aber mein zweites div für den Inhalt, orientiert sich bei margin an dem Seitenwand, und nicht an den rechten Rand des navigationsdiv. dadurch gerät dann der navigationstext über den Inhalt, wenn man den schriftgrad vergrößert.
habt ihr da vl auch einen Lösungsvorschlag parat?
-
ich verwende ja für die Navigation float:left. ich weiß nicht ob das normal ist, aber mein zweites div für den Inhalt, orientiert sich bei margin an dem Seitenwand, und nicht an den rechten Rand des navigationsdiv. dadurch gerät dann der navigationstext über den Inhalt, wenn man den schriftgrad vergrößert.
Das ist normal, ein "floatendes" Element ist nicht mehr im Textfluß, sondern wird vom Text umflossen (was du durch das div verhinderst).
+----------+ text
| | text
|float:left| text
| | text
+----------+ text
text
text
^
| hier ist dein marginhabt ihr da vl auch einen Lösungsvorschlag parat?
vielleicht der Navigation ein margin geben, kommt drauf an was du vorhast.
Struppi.
--
Javascript ist toll (Perl auch!)-
also:
+------------+ +------------------------------+
| id="nav" | | id="content" |
| div | | div |
| float:left | | float: none |
+------------+ +------------------------------+ich habe das conent div mit margin-left: 180px; ausgerichtet (breite von nav: 170 -> 10px abstand). wenn nun aber die schriftgröße geändert wird, bleibt das conent div in der mitte stehen, was normal ist. da aber das nav div immer breiter wird - wegen der schriftgröe - liegt dann irgendwann das nav auf dem content div. wenn ich nun das margin: 180px; weglasse, so verschiebt er das content div wenn der schritgrad vergrößert wird. nun klebt es aber an dem nav div. ich möchte aber zwischen den beiden divs einen abstand von ca. 10px haben.
PS: ich habe das mit dem hintergrundbild ausprobiert. ich habe in das content nav ein bild eingefügt und mit repeat-y geklont. aber das bleibt am ende des divs stehen - was mir auch logisch vorkommt. ich will ja, dass es bis ganz unten geht. das heißt ich habe wieder das gleiche porböem, dass ich das div nicht auf 100% bekomme...
gruß
-
ich habe das conent div mit margin-left: 180px; ausgerichtet (breite von nav: 170 -> 10px abstand). wenn nun aber die schriftgröße geändert wird, bleibt das conent div in der mitte stehen, was normal ist. da aber das nav div immer breiter wird - wegen der schriftgröe - liegt dann irgendwann das nav auf dem content div. wenn ich nun das margin: 180px; weglasse, so verschiebt er das content div wenn der schritgrad vergrößert wird. nun klebt es aber an dem nav div. ich möchte aber zwischen den beiden divs einen abstand von ca. 10px haben.
Das sind genau die Probleme dich ich meinte. du musst (wegen dem Hintergrundbild) eine feste Breite in Pixel nehmen und deshalb kannst du das ganze nicht mehr an die Schriftgröße anpassen, dazu müßtest du die Menubreite in em angeben.
Wie gesagt, Tabellenlayout ist kein CSS Layout, wenn du Spalten verwenden willst, musst du Tabellen benutzen
Struppi.
--
Javascript ist toll (Perl auch!)-
ok
danke für die vielen antworten. haben mir zum teil weitergeholfen :))
-
-
-
-
-
-
-
-
@struppi: ist es denn falsch mit float zu arbeiten? was mache ich falsch, dass du es als basteln bezeichnest? kannst mir ein paar tipps geben, wie man es "richtig" macht.
Gegen float gibt es nichts zu sagen, damit kannst du den Fluß eines Bereiches, im Verhältniss zu anderen, bestimmen. Aber du hast in CSS keine Reihen und Spalten, wie in einer Tablle, die zusammenhängen und das ist ja genau dein Problem. du kannst mit Tricks versuchen dies nachzuahmen, verlierst dabei aber immer irgendwelche guten Eigenschaften.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-