nicht angemeldet
margin und min-width
Gunnar BittersmannHallo ihr
Ich hab den Inhalt einer Webseite in ein div mit einem festen Rand links und rechts gepackt. Sinn ist, dass links im Rand die Navigation ist (mit float:left) und ich deswegen den eigentlichen Inhalt rechts gleich weit weg vom Rand haben will.
Also so
Navi (150) - div (Breite - 300) - Rand (150)
div hat margin links und rechts von 150.
Jetzt hab ich dem div eine min-width verpasst, damit der rechte Rand bei Bedarf doch schmaler ist. Es ist ja noch einiges Platz bis zum Fensterrand.
Entgegen meiner Erwartung funktioniert das sogar auf Anhieb :-) Das float:left scheint dafür zu sorgen dass mein div den linken Rand nicht auch kleiner macht als er eigentlich angegeben ist.
Ich bin mir nur nicht sicher ob das wirklich der Weg meiner Wahl ist. Gibts dafür vielleicht ne schönere Idee?
-
Hallo du!
Ich hab den Inhalt einer Webseite in ein div mit einem festen Rand links und rechts gepackt.
Sinn ist, dass links im Rand die Navigation ist (mit float:left) und ich deswegen den eigentlichen Inhalt rechts gleich weit weg vom Rand haben will.
Also soNavi (150) - div (Breite - 300) - Rand (150)
div hat margin links und rechts von 150.
Mehrere Fragen/ Anmerkungen:
1. Warum "baust" du eine in Pixeln festgezurrte Seite und machst diese auch noch dermaßen schmal (für die allermeisten Handy-Displays allerdings schon zu breit)?
2. Warum soll rechts ein Rand von 150px sein, wenn gleichzeitig die gefloatete Spalte direkt am linken Bildrand klebt?
3. Mir scheint, du gehst bei deinen ganzen Planungen/ Überlegungen einzig und allein von deinem Viewport aus. Schon mal daran gedacht, dass der bei jedem User anders ist (sein kann)?Jetzt hab ich dem div eine min-width verpasst, damit der rechte Rand bei Bedarf doch schmaler ist. Es ist ja noch einiges Platz bis zum Fensterrand.
Auch hier wieder: Gilt "nur" in deinem speziellen Fall.
Und min-width in Verbindung mit "damit der rechte Rand bei Bedarf doch schmaler ist", klingt für mich unlogisch. Denn min-width verwendet man eigentlich immer dann, wenn etwas eben nicht beliebig schmaler werden darf/ soll.Entgegen meiner Erwartung funktioniert das sogar auf Anhieb :-) Das float:left scheint dafür zu sorgen dass mein div den linken Rand nicht auch kleiner macht als er eigentlich angegeben ist.
Leider können falsches/ fehlendes Verständnis manchmal trotzdem zu dem/ einem erwarteten Ergebnis führen. Die Gründe dafür sind dann aber immer andere, als die Vermuteten/ Angenommenen. Mach' dich hier auf SELFHTML nochmal klug über Floats und deren "Wirkung".
Ich bin mir nur nicht sicher ob das wirklich der Weg meiner Wahl ist. Gibts dafür vielleicht ne schönere Idee?
ALso beginnen würde ich ggf. mit dem "klassischen" Ansatz, indem ich die gesamte Seite in ein umschließendes DIV packen würde, welches man per margin: 0 auto zentriert (für ganz alte Browser muss man hier noch zusätzlich hand anlegen), und dem man dann nach Bedarf min- & max-width Angaben hinzufügen/ verpassen kann.
BTW: Ein online Beispiel, oder zumindest die relevanten Teile des CSS- und Quellcodes sind immer extrem hilfreich, gerade wenn es um solche Dinge/ Fragen geht.
Gruß Gunther
-
@@Gunther:
nuqneH
ALso beginnen würde ich ggf. mit dem "klassischen" Ansatz, indem ich die gesamte Seite in ein umschließendes DIV packen würde,
Klassischer Ansatz = klassischer Fehler. [ZITAT1287]
Warum sollte ein allumfassendes 'div' nötig sein, wenn doch mit 'html' und 'body' zwei Elemente zum Stylen zur Verfügung stehen?
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
@@Gunnar:
nuqneH
ALso beginnen würde ich ggf. mit dem "klassischen" Ansatz, indem ich die gesamte Seite in ein umschließendes DIV packen würde,
Klassischer Ansatz = klassischer Fehler. [ZITAT1287]
Warum sollte ein allumfassendes 'div' nötig sein, wenn doch mit 'html' und 'body' zwei Elemente zum Stylen zur Verfügung stehen?
In gewisser Weise würde ich dir (und at) zwar zustimmen, aber ...
I.d.R. möchte ich die gesamte "Anzeige-Fläche" stylen, also auch die Bereiche des Viewports, die sich außerhalb meiner eigentlichen Seite befinden. Und hier läuft man AFAIR sehr schnell in die Problematik unterschiedlicher Browserinterpretationen bezüglich dieser beiden Elemente (wobei ich jetzt aus dem Stegreif aber nicht sagen kann, ob diese heutzutage noch "aktuell" sind).Und außerdem würde ich das auch bei weitem nicht so "drastisch" formulieren. Denn wenn ein ggf. überflüssiges DIV-Element das einzige "Problem" ist, dann kann man imho damit ziemlich gut leben. ;-)
Also bei mir ist es dann auch eher eine (schlechte) alte Angewohnheit, als Unwissen über die beiden Elemente und deren Stylingmöglichkeiten.
Gruß Gunther
-
Hallo.
Und außerdem würde ich das auch bei weitem nicht so "drastisch" formulieren. Denn wenn ein ggf. überflüssiges DIV-Element das einzige "Problem" ist, dann kann man imho damit ziemlich gut leben. ;-)
Deshalb habe ich mein Bedauern und teilweisen Ärger ausgedrückt, und nicht mein Beileid. Sieh es vielleicht als Indiz, sich eine gebene Struktur nicht hinreichend vergegenwärtigt zu haben.
Also bei mir ist es dann auch eher eine (schlechte) alte Angewohnheit, als Unwissen über die beiden Elemente und deren Stylingmöglichkeiten.
Niemand wirft dir Unwissen vor. Nicht einmal deine alten Angewohnheiten wirft man dir hier vor. Aber ein Hinweis darauf, dass du gerade eine zukünftige alte Angewohnheit bei einem Neuling sähst, sollte man anbringen dürfen. Nimm es einfach nicht persönlich.
MfG, at-
Hallo.
Also bei mir ist es dann auch eher eine (schlechte) alte Angewohnheit, als Unwissen über die beiden Elemente und deren Stylingmöglichkeiten.
Niemand wirft dir Unwissen vor. Nicht einmal deine alten Angewohnheiten wirft man dir hier vor. Aber ein Hinweis darauf, dass du gerade eine zukünftige alte Angewohnheit bei einem Neuling sähst, sollte man anbringen dürfen.
Ja, natürlich!
Und ich gebe dir auch vollkommen Recht, dass man Neulingen nicht von früheren Zeiten herrührende Angewohnheiten, die heutzutage nicht mehr notwendig sind, weitergeben sollte.Nimm es einfach nicht persönlich.
Doch, tue ich. Werde mich daran gewöhnen, diese alte Angewohnheit abzulegen, und insbesondere bei Antworten diese auch nicht mehr so weiterzugeben. ;-)
Gruß Gunther
-
Hallo.
Werde mich daran gewöhnen, diese alte Angewohnheit abzulegen, und insbesondere bei Antworten diese auch nicht mehr so weiterzugeben. ;-)
Vielen Dank, das ist weit mehr als ich erwartet hatte.
MfG, at
-
-
-
-
-
Hi
- Warum "baust" du eine in Pixeln festgezurrte Seite und machst diese auch noch dermaßen schmal (für die allermeisten Handy-Displays allerdings schon zu breit)?
Das war nur ein Zahlenbeispiel. Der mittlere Bereich soll Breite-300 Pixel breit sein, sofern das immer noch min. 400 Pixel ist. Sonst eben rechts weniger Rand.
- Warum soll rechts ein Rand von 150px sein, wenn gleichzeitig die gefloatete Spalte direkt am linken Bildrand klebt?
Das ist die Navigation, die ist relativ kurz im Vergleich zum Rest (Gästebuch). Deswegen soll der recht schnell links zu sehende Rand auch rechts sein, damit es symmetrisch aussieht.
Jetzt hab ich dem div eine min-width verpasst, damit der rechte Rand bei Bedarf doch schmaler ist. Es ist ja noch einiges Platz bis zum Fensterrand.
Auch hier wieder: Gilt "nur" in deinem speziellen Fall.
Und min-width in Verbindung mit "damit der rechte Rand bei Bedarf doch schmaler ist", klingt für mich unlogisch. Denn min-width verwendet man eigentlich immer dann, wenn etwas eben nicht beliebig schmaler werden darf/ soll.Solls ja in meinem Fall auch nicht. 400 Pixel breit sollte es dann schon sein, so ists momentan eingestellt. Wenn das mit dem rechten Rand funktioniert, ist eine MIndestbreite von 550 px Voraussetzung. Die schafft jeder auf seinem PC.
Leider können falsches/ fehlendes Verständnis manchmal trotzdem zu dem/ einem erwarteten Ergebnis führen.
Genau das ist der Grund für meine Frage :-)
Es sieht etwa so aus:
<div style="width:150px; float:left; border:1px solid red;">
hier<br />die<br />Navi
</div>
<div style="margin: 0px 150px; min-width:400px; border:1px solid blue;">
und<br />hier<br />der<br /><br />Rest<br />und<br />hier<br />der<br /><br />Rest<br />und<br />hier<br />der<br /><br />Rest<br />und<br />hier<br />der<br /><br />Rest<br />
</div>
und der Schnipsel tut wirklich das was ich wollte.Float ist doch gerade dafür gedacht? Die Leiste ist links und das andre div mit dem ganzen Rest drin ist rechts daneben.
-