Funktioniert min-width nur bei position:absolute?
Onkel Schnitzel
- css
Hallo,
der Betreff sagt ja eigentlich alles. Anscheinend funktioniert die alleinige Angabe von min-width nur zusammen mit position:absolute, sowohl in Firefox als auch im IE7? Ich wundere mich nur, weil in SELFHTML davon nichts erwähnt wird.
Beste Grüße,
Onkel Schnitzel
@@Onkel Schnitzel:
nuqneH
Anscheinend funktioniert die alleinige Angabe von min-width nur zusammen mit position:absolute, sowohl in Firefox als auch im IE7?
Der Schein trügt.
Ich wundere mich nur, weil in SELFHTML davon nichts erwähnt wird.
Das liegt daran, dass dem nicht so ist.
Qapla'
Der Schein trügt.
Hm, also nehmen wir doch mal die unten stehenden Testzeilen. Mit den Angaben so wie sie jetzt da stehen, wird die min-width-Angabe ignoriert. Wenn ich aber ein position:absolute hinzufüge, wird der Kasten so dargestellt, wie ich mir das vorgestellt hatte.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="min-width: 400px; background-color: yellow;">
AAAAAAAAAAAAAAAAAAAAAAAA
</div>
</body>
</html>
Besten Gruß,
Onkel Schnitzel
Hi,
Hm, also nehmen wir doch mal die unten stehenden Testzeilen. Mit den Angaben so wie sie jetzt da stehen, wird die min-width-Angabe ignoriert.
Nein. Das div wird mit einer Mindestbreite von 400px dargestellt.
Sobald der Viewport so klein wird, daß das div mit 400px nicht mehr rein paßt, gibt's Scrollbalken und das div wird mit 400px Breite dargestellt - womit die Bedingung min-width:400px erfüllt ist.
Ist der Viewport breiter, wirkt sich ganz normal die width:auto aus, es ergibt sich für das div eine Breite, die größer ist als 400px - womit die Bedingung min-width:400px ebenfalls erfüllt ist.
cu,
Andreas
@@Onkel Schnitzel:
nuqneH
Hm, also nehmen wir doch mal die unten stehenden Testzeilen. Mit den Angaben so wie sie jetzt da stehen, wird die min-width-Angabe ignoriert.
Nein, wird sie nicht. Die Box ist mehr als 400 Pixel breit.
Verwechselst du minimal und maximal?
Qapla'
@ MudGuard & Gunnar
Nein, wird sie nicht. Die Box ist mehr als 400 Pixel breit.
Ja, sie ist halt 100% breit. Das gleiche erreiche ich aber, wenn ich die Angabe komplett weg lasse. Für das, was ich vorhabe, ergibt sich kein Unterschied.
So richtig werde ich eigentlich aus der Dokumentation nicht schlau: "Sie können bestimmen, wie breit ein Element oder Bereich mindestens sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt." Wo ist denn der Unterschied zur ganz normalen width-Angabe? Die macht doch (in der Theorie) genau das gleiche. Oder bin ich jetzt blöd?
Mein Ziel war eigentlich, dass die Box auf jeden Fall 400px breit sein soll. Und für den Fall, dass der Inhalt breiter ist, die Box genauso breit wird, wie der Inhalt. Genau dieses Verhalten habe ich ja, wenn ich position: absolute setze.
Gruß,
Onkel Schnitzel
@ MudGuard & Gunnar
Nein, wird sie nicht. Die Box ist mehr als 400 Pixel breit.
Ja, sie ist halt 100% breit. Das gleiche erreiche ich aber, wenn ich die Angabe komplett weg lasse. Für das, was ich vorhabe, ergibt sich kein Unterschied.
Richtig. Ein Div hat normalerweise 100% der ihm zur Verfueung stehenden Breite. min-width bestimmt aber, dass es mehr sein muss (legt eine Minimalbreite fest), wenn z.B. der Viewport zu schmal wird.
Mein Ziel war eigentlich, dass die Box auf jeden Fall 400px breit sein soll. Und für den Fall, dass der Inhalt breiter ist, die Box genauso breit wird, wie der Inhalt. Genau dieses Verhalten habe ich ja, wenn ich position: absolute setze.
Du beschreibst width und overflow.
Hallo Steel,
Mein Ziel war eigentlich, dass die Box auf jeden Fall 400px breit sein soll. Und für den Fall, dass der Inhalt breiter ist, die Box genauso breit wird, wie der Inhalt. Genau dieses Verhalten habe ich ja, wenn ich position: absolute setze.
Du beschreibst width und overflow.
nur, bekomme ich eben genau das damit nicht hin. Nehmen wir das SELFHTML-Beispiel mit dem Hund. Ich hätte gern, dass sich die Box/der Rahmen entsprechend des Hundes vergrößert.
Gruß,
Onkel Schnitzel
Hi,
Nehmen wir das SELFHTML-Beispiel mit dem Hund. Ich hätte gern, dass sich die Box/der Rahmen entsprechend des Hundes vergrößert.
Dann gebe keine Höhe an - dann passt sich die Höhe des Containers der des Bildes an.
Wenn sich die Breite auch anpassen soll - dann wähle kein block-Element bzw. kein als solches dargestelltes, sondern ein inline-Element bzw. ein als solches dargestelltest; oder floate das Element.
MfG ChrisB
@@ChrisB:
nuqneH
sondern ein inline-Element bzw. ein als solches dargestelltest;
oder 'inline-block', das könnte die bessere Alternative zu
oder floate das Element.
sein.
Qapla'
oder 'inline-block', das könnte die bessere Alternative zu
oder floate das Element.
sein.
Siehste mal, inline-block kannte ich noch gar nicht. Klingt sehr interessant, werd ich mir mal ansehen. Danke für den Link.
Aber mich interessiert dann doch, warum das gewünschte Verhalten in meinem Beispiel mit position:absolute funktioniert. Ist das so beabsichtigt? Dann könnte ich ja auch damit arbeiten - obwohl ich position:absolute eigentlich immer versuche zu vermeiden.
Gruß,
Onkel Schnitzel
Hi,
Aber mich interessiert dann doch, warum das gewünschte Verhalten in meinem Beispiel mit position:absolute funktioniert. Ist das so beabsichtigt?
MfG ChrisB