float verändert die Größe eines Elements
0 
at
0
float verändert die Größe eines Elements
Hallo,
in meinem unten stehenden Quelltext habe ich einen a-tag verwendet, der eine Größe von 10em haben soll.
Merkwürdigerweise interessiert den Browser (FF) diese Größenangabe überhaupt nicht. Das a ist nur so groß wie sein Text.
Aber das größere Mysterium: Wenn ich dem a-tag ein float: left zuweise, wird plötzlich die Größe korrekt dargestellt. Weiß jemand, was es damit auf sich hat?
Hier der Quelltext ohne float:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
body {
background-color: #FFFFFF;
font-size: 101%;
margin: 0em 0em 0em 0em;
}
a.box {
width: 10em;
height: 10em;
background-color: #C0C0C0;
text-align: left;
}
</style>
</head>
<body>
<div align="left">
<a href="test.htm" class="box">test</a>
</div>
</body>
</html>
Und hier der mit float:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
body {
background-color: #FFFFFF;
font-size: 101%;
margin: 0em 0em 0em 0em;
}
a.box {
width: 10em;
height: 10em;
background-color: #C0C0C0;
text-align: left;
float: left;
}
</style>
</head>
<body>
<div align="left">
<a href="test.htm" class="box">test</a>
</div>
</body>
</html>
Ich wäre für Hilfe sehr dankbar.
Noch eine schöne Nacht, Jean
-
Hallo.
Merkwürdigerweise interessiert den Browser (FF) diese Größenangabe überhaupt nicht. Das a ist nur so groß wie sein Text.
Das ist für Inline-Elemente wie
<a>völlig normal.Aber das größere Mysterium: Wenn ich dem a-tag ein float: left zuweise, wird plötzlich die Größe korrekt dargestellt. Weiß jemand, was es damit auf sich hat?
Durch das
float: leftwird automatisch diedisplay-Eigenschaft aufblockgesetzt, so dass jetzt die Breiten- und Höhenangaben Geltung erhalten.
MfG, at-
Hallo at,
danke für den Hinweis. Mir ist der Unterschied zwischen inline und block irgendwie noch nicht ganz klar geworden. Aber ich kann ja auch <a> einfach auf block setzen, denke ich.
Gruß Jean
-
-
Merkwürdigerweise interessiert den Browser (FF) diese Größenangabe überhaupt nicht. Das a ist nur so groß wie sein Text.
Das ist schon korrekt.
CSS2 Spezifikation: http://www.w3.org/TR/REC-CSS2/visudet.html#q4
und auf deutsch: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.3.1Aber das größere Mysterium: Wenn ich dem a-tag ein float: left zuweise, wird plötzlich die Größe korrekt dargestellt. Weiß jemand, was es damit auf sich hat?
Auch das ist korrekt
CSS2 Spezifikation: http://www.w3.org/TR/REC-CSS2/visuren.html#floats
und wieder auch auf deutsch: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5Es ist ja auch durchaus sinnvoll für ein Element mit der Eigenschaft "float" auch die Eigenschaft "width" anzugeben. Wie du siehst ist dies nach CSS2 auch zwingend notwendig, nach CSS2.1 allerdings nicht mehr. Die Breite richtet sich dann, falls kein "width" angegeben wurde, nach dem Inhalt des Elements.
-
Hallo,
danke, dass du die Links gepostet hast. Ich werde mir morgen mal Zeit nehmen, das zu lesen.
Gruß Jean
-