Garbanas schrieb:
Und wieso soll auto nicht funktionieren? Willst du die Mindestbreite von 500px beibehalten?
Code:
{
min-width: 500px;
width: auto !important;
width: 500px;
}
Sei mir bitte nicht böse, aber mit diesem (entschuldige) sinnlosen Code ist keinem geholfen, daher werde ich euch nun die Grundlagen erklären.
Erläuterung:
In HTML gibt es Block-Level-Elemente und Inline-Level-Elemente. Diese unterscheiden sich grundsätzlich darin voneinander, wie sich sich der Höhe und der Breite nach ausbreiten.
Block-Level-Elemente (div, h1, p, ol, ul, pre usw.):
so hoch wie nötig; so breit wie möglich
Inline-Level-Elemente (span, q, a, b, i, abbr usw.):
so hoch und so breit wie nötig
"Nötig" richtet sich nach der Größe des Inhalts eines Elements.
Grundsätzlich sind Höhe und Breite eines Elements auf
auto gestellt. Mit Prozentangaben bei Breite und Höhe kann man Block-Level-Elemente (!) relativ zu ihrem Elternelement wachsen beziehungsweise schrumpfen lassen.
Nehmen wir als Beispiel das
body-Element, das wohl in so gut wie allen Fällen das Hauptelement für den Inhalt sein dürfte.
body ist ein Block-Level-Element und breitet sich naturgemäß so weit aus, wie es das umliegende Element - das Browser-Fenster zulässt.
Wenn du nun dem
body-Element eine Breite von 50% zuweist, dann schaut es zuerst, wie Breit das Browser-Fenster ist und geht dann entsprechend auf die Hälfte dieser Breite.
Und dieses Verhalten betrifft auch weitere Überschriften, Absätze, Listen und so weiter, die sich in
body (oder eben einem anderen Block-Level-Element) befinden: Sie werden immer erst schauen "Wie breit ist meine Mama? Aha, 1000 Pixel breit, dann sind 50 Prozent davon also 500 Pixel. So breit werde ich nun!"
Wenn ihr das alle verstanden habt, dann geht das auch ganz fix mit dem üben. Falls noch Fragen sind, bitte stellen! =)
