Floaten Responsive Webseite
Hallo,
ich habe ein einfaches Grundgerüst für eine Responsive Webseite erstellt. Wie ist es machbar, dass das "div Element Content" beim zusammenschieben der Webseite nicht nach unten ausbricht? Ich habe schon sehr viel probiert und keine Lösung gefunden. Vielen Dank für die Hilfe! Beste Grüße Dieter Code:
<!DOCTYPE html> |
Hallo
Grundsätzlich wäre es sinnvoller statt float Flexbox zu verwenden. Dazu sollte der Quelltext etwas angepasst werden. Aber zu deiner float-Lösung, obwohl du damit noch viel Freude haben wirst: Du musst die Breite so anpassen, dass nav und #content nebeneinander genügend Platz haben. Dabei sind alle Angaben zu berücksichtigen, die die Breite beeinflussen können, also neben width auch padding, border und margin. Wenn das Fenster verkleinert wird werden %-Angaben und gegebenenfalls em-Angaben immer neu berechnet. Das nav-Element ist 16em breit. #content ist 81,1% + 2px (zweimal 1px) breit. Das umgebende Element #wrapper ist maximal 86em breit. Sobald 16em + 81,1% + 2px breiter als 86em werden rutscht #content zwangsweise unter nav. Das kannst du zum Beispiel mit einer css-calc-Berechnung verhinden. Du gibst #content eine Breite von 100% und ziehst alle anderen Breiten davon ab. In deinem Beispiel also Code:
width: calc(100% - 16em - 2px); Dann nutzt #content immer die gesamte zur Verfügung stehende Restbreite aus. Wenn bei nav noch padding, border oder margin oder bei #content noch padding oder border hinzukommen musst du die Berechnung natürlich anpassen. Gruss MrMurphy |
Um die ganze Berechnung "etwas" zu vereinfachen, immer box-sizing: border-box verwenden. Erleichtert einem so etwas ungemein (auch wenn der Hinweis mit flexbox weiterhin sinnvoll ist)
https://www.paulirish.com/2012/box-s...order-box-ftw/ |
Um die ganze Berechnung "etwas" zu vereinfachen, immer box-sizing: border-box verwenden. Erleichtert einem so etwas ungemein (auch wenn der Hinweis mit flexbox weiterhin sinnvoll ist)
https://www.paulirish.com/2012/box-s...order-box-ftw/ |
Hallo
Den Hinweis auf border-box habe ich vorsätzlich weggelassen, weil einige Browser grade im Zusammenhang mit Flexbox grundsätzlich den Standard content-box verwenden und damit ein neues Problemfeld eröffnet wird, mit dem Anfänger schnell überfordert sind. Gruss MrMurphy |
Hallo
Nachdem das Problem gelöst ist als Appetithappen noch eine Beispiellösung mit Flexbox. Die Beispiellösung ist responsive. Der gesamte Quelltext (auch das CSS) befindet sich in der Datei und kann somit eins zu eins kopiert und übernommen werden. Die Farben habe ich beibehalten, da sie für Beispieldateien sinnvoll sind. Auf unnötige und problembehaftete Angaben wie height wurde verzichtet. Mein HTML dazu sieht so aus Code:
<header class="pageheader"> Code:
/*Grundlayout*/ Beispieldatei Gruss MrMurphy |
Floten Responsive Webseite
Hallo MRMurphy,
ja, eine wunderbare und sehr gut durchdachte Lösung, die ich ausgezeichnet finde. Herzlichen Dank für Deine großartige Hilfe und den Code. Ich werde nun versuchen, meine Webseite auf dieser Struktur aufzubauen. Sehr genial von Dir gemacht!!! Beste Grüße Dieter |
Alle Zeitangaben in WEZ +2. Es ist jetzt 22:09 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023