Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: In CSS Breite und Höhe begrenzen
Beschreibung: In 👍 CSS kann man Elemente wie auch den Text selbst in der ✅ Breite und Höhe begrenzen und damit andere optische Möglichkeiten nutzen.
Neben der Positionsart und der Möglichkeit, Elemente mit Abständen nach allen Richtungen zu versehen, gibt es eine weitere Möglichkeit, Elemente zu positionieren. Dabei geht es aber weniger um die Position selbst, sondern um die Darstellung des Elementes wie zum Beispiel einem ganz normalen Text.
Diesen könnte man in bestimmten Situationen durch Angabe einer schmäleren Breite optisch anders wirken lassen, was für die Besucherinnen und Besucher ein interessantes Erlebnis sein kann. Auch mit der Höhe kann man sich spielen.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Konkret kann man mit der Breite und Höhe absolute Werte festlegen. Beispiele dazu:
width: 300px;
min-width: 80%;
max-width: 400px;
height: 250px;
min-height: 150px; max-height: 550px;
In der ersten Zeile wird der Breite eines Elementes eine fixe Dimension von 300 Pixel zugewiesen. Ob die dreihundert Pixel gebraucht werden oder nicht, spielt keine Rolle.
In der zweiten Zeile wird der Breite eine Mindestbreite von 80 Prozent zugewiesen. Das bedeutet, dass von dem vorhandenen Platz 80% für das Element verbraucht werden. Das macht Sinn, wenn man auf verschiedene Bildschirmauflösungen Rücksicht nehmen möchte.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Die dritte Zeile begrenzt das Element mit einer maximalen Breite von 400 Pixel. Auch wenn 800 Pixel Platz wäre, es werden nur 400 Pixel benutzt und damit kann ein Text entsprechend schmäler ein als etwa alle anderen Texte auf dieser Unterseite.
Die Höhe kann, wie in dem vierten Beispiel zu sehen, auch fix definiert werden. Im letzten Beispiel wurden zwei Vorgaben eingetragen. Die Höhe soll mindestens 150 Pixel betragen und maximal 550 Pixel.
Zu beachten ist: bei der Breite funktionieren Prozentwerte, bei der Höhe nicht. Schon oft ist man an Versuchen gescheitert, eine Navigationsspalte mit "height: 100%;" genauso hoch zu bekommen wie den Rest der Seite, weil die Navigation einen farblichen Hintergrund bekam und dieser weitergeführt werden sollte, obwohl die Navigation schon beendet war. Doch das klappt nicht. Die Browser stellen die Navigation dar, ignorieren die 100% aber. Nur mit Tricks konnte man diesen Fall lösen - indem man nämlich eine Hintergrundgrafik eingebaut hatte.
In der Zwischenzeit hat man aber auch hier Lösungen erarbeitet und kann die Höhe auf Basis der Breite automatisieren, aber der Bezug zur Breite muss gegeben sein, die Höhe alleine lässt sich nicht auf 100 % festlegen.
Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.
Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.
Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.
Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.
Themenseiten
Artikel-Thema: In CSS Breite und Höhe begrenzen
Beschreibung: In 👍 CSS kann man Elemente wie auch den Text selbst in der ✅ Breite und Höhe begrenzen und damit andere optische Möglichkeiten nutzen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel