nicht angemeldet
Positionierung
Hallo,
ich habe eine Frage bezüglich der Positionierung. Innerhalb eines Rahmens mit fester Breite möchte ich verschiedenes (Texteingabefelder, Auswahlfelder,...) in in Spalten anordnen. Dann möchte ich die Möglichkeit haben, darunter wieder mit neuer Überschrift einen neuen Rahmen mit gleichen Eigenschaften zu erstellen. Dieser wird aber nicht unterhalb des vorigen Rahmens angeordnet, sondern überlappend. Kann mir da vielleicht jemand helfen, wo das Problem liegt bzw. wie ich es hinbekomme, dass der zweite Rahmen einfach unter den vorigen gestellt wird.
Hier mal der Code:
<!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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>1</title>
<style type="text/css" media="all">
<!--
.Grundrahmen {
width: 658px;
font-family: arial, Helvetica;
font-size:11px;
}
.pos000 {
position: absolute;
left: 0px;
float: left;
}
.pos168 {
position: absolute;
left: 168px;
float: left;
}
.pos336 {
position: absolute;
left: 336px;
float: left;
}
.pos504 {
position: absolute;
left: 504px;
float: left;
}
-->
</style>
</head>
<body>
<div class="Grundrahmen">
<div class="pos000">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
<div class= "pos168">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /><br>
<br>
<input type="text" name="textfieldName" size="24" style="width: 154px;"/><br>
<br>
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
<div class= "pos336">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
</div>
<div class="Grundrahmen">
<p><p>
<div class="pos000">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
<div class= "pos168">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /><br>
<br>
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
<div class= "pos336">
<input type="text" name="textfieldName" size="24" style="width: 154px;" /></div>
</p></p>
</div>
</body>
</html>
Viele Grüße,
Otto
-
.pos000 {
position: absolute;
left: 0px;
float: left;
}
.pos168 {
position: absolute;
left: 168px;
float: left;
}
.pos336 {
position: absolute;
left: 336px;
float: left;
}
.pos504 {
position: absolute;
left: 504px;
float: left;
}das float:left; sorgt dafür, dass die Höhe des Grundrahmens die Höhe der .pos-Elemente ignoriert.
Außerdem ist float:left; bei absoluter Positionierung Schwachsinn.cu
-
.pos000 {
position: absolute;
left: 0px;
float: left;
}
.pos168 {
position: absolute;
left: 168px;
float: left;
}
.pos336 {
position: absolute;
left: 336px;
float: left;
}
.pos504 {
position: absolute;
left: 504px;
float: left;
}das float:left; sorgt dafür, dass die Höhe des Grundrahmens die Höhe der .pos-Elemente ignoriert.
Außerdem ist float:left; bei absoluter Positionierung Schwachsinn.cu
aber durch das float:left; erreiche ich doch, dass die Elemente in gleicher Höhe angezeigt werden. Ansonsten werden sie auch etwas nach unten versetzt. Oder wie könnte ich das sonst umgehen?
Viele Grüße
-
Hi,
aber durch das float:left; erreiche ich doch, dass die Elemente in gleicher Höhe angezeigt werden. Ansonsten werden sie auch etwas nach unten versetzt.
Nein, das bewirkt in diesem Falle die absolute Positionierung.
Wenn position den Wert absolute hat, dann wird float automatisch none.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
aber durch das float:left; erreiche ich doch, dass die Elemente in gleicher Höhe angezeigt werden. Ansonsten werden sie auch etwas nach unten versetzt.
Nein, das bewirkt in diesem Falle die absolute Positionierung.
Wenn position den Wert absolute hat, dann wird float automatisch none.
MfG ChrisB
Ich hätte es mir vielleicht mal im Browser ansehen sollen. Da stimmt dann alles ohne float. Nur GoLive zeit mir an, dass es falsch aussehen würde.
Vielen Dank für den Hinweis.
Viele Grüße,
Otto-
Hi,
aber durch das float:left; erreiche ich doch, dass die Elemente in gleicher Höhe angezeigt werden. Ansonsten werden sie auch etwas nach unten versetzt.
Nein, das bewirkt in diesem Falle die absolute Positionierung.
Wenn position den Wert absolute hat, dann wird float automatisch none.
MfG ChrisB
Ich hätte es mir vielleicht mal im Browser ansehen sollen. Da stimmt dann alles ohne float. Nur GoLive zeit mir an, dass es falsch aussehen würde.
Vielen Dank für den Hinweis.
Viele Grüße,
OttoOk, passt doch noch nicht ganz. Die Objekte werden zwar nebeneinander dargestellt (diesmal ohne float), aber darunterliegende werden immer noch über die oberen Objekte gelegt (Rahmen wird nicht als solcher mit Höhe erkannt).
Wie bekomme ich denn das noch hin?<!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> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Adobe GoLive" /> <title>1</title> <style type="text/css" media="all"><!-- <!--.Grundrahmen { top:100px;
width: 658px;
font-family: arial, Helvetica;
font-size:11px;}
.pos000 {
position: absolute;
left: 0px;
float:left;
}
.pos168 {
position: absolute;
left: 168px;
}
.pos336 {
position: absolute;
left: 336px;
}
--></style>
</head><body> <div class="Grundrahmen"> <div class="pos000"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> <div class= "pos168"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /><br> <br> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> <div class= "pos336"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> </div> <div class="Grundrahmen"> <div class="pos000"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> <div class= "pos168"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /><br> <br> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> <div class= "pos336"> <input type="text" name="textfieldName" size="24" style="width: 154px;" /></div> </div> </body></html>
Viele Grüße,
Otto-
Hi,
bitte zitiere mal vernünftig - das, worauf du dich konkret beziehst, und nicht gedankenlos einfach alles!
Ok, passt doch noch nicht ganz. Die Objekte werden zwar nebeneinander dargestellt (diesmal ohne float), aber darunterliegende werden immer noch über die oberen Objekte gelegt (Rahmen wird nicht als solcher mit Höhe erkannt).
Wie bekomme ich denn das noch hin?Bei absoluter Positionierung - gar nicht, die nimmt Elemente aus dem Fluss.
Das macht float zwar zunächst mal auch - aber man kann trotzdem dafür sorgen, dass umgebende Elemente die Floats einschliessen.http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
-
-