nicht angemeldet
ELemente verschieden in DIV positionieren
0 0 
Der Martin
ELemente verschieden in DIV positionieren
Hallo,
ich habe wahrscheinlich eine Frage, die schon tausende Mal gestellt wurde. In einer Webanwendung habe ich eine Tabelle, die durch verschiedene Aktionen beeinflusst werden kann. Dazu habe ich ein DIV um die die Elemente gebaut.
Nun ist es aber so, dass das Span-Element mit dem Bild (das zweite) immer eine Zeile tiefer dargestellt wird. Das kann ich gar nicht verstehen.
Hier mal der Auszug aus der darzustellenden Seite.
<html>
<body>
<div style="padding: 3px; border: solid 2px #555;">
<div style="background-color: #369; color: #fff; padding: 2px; margin-bottom: 3px;">
<span style="width: 200px;">Auszuwertendes Jahr:
<select>
<option selected="selected" value="2007">2007</option>
<option value="2008">2008</option>
</select>
</span>
<span style="float: right;width: 100px;"><img src="drucker.gif" alt="drucken"/></span>
</div>
<table>
<tr><td>Test</td></tr>
</table>
</div>
</body>
</html>
Vielleicht kann mir jemand helfen. Bin nämlich am verzweifeln.
Andreas
-
Bau dir doch bitte erstmal ein Formular um dein Select. Das Formular darfst Du dann gerne per CSS inline setzen.
-
Bau dir doch bitte erstmal ein Formular um dein Select. Das Formular darfst Du dann gerne per CSS inline setzen.
Das habe ich doch alles schon.
Es geht ja nicht um die Anwendung, sondern nur um die Darstellung.
-
Das habe ich doch alles schon.
Ich habe weder ein Formular gesehen, noch das inline.
Es geht ja nicht um die Anwendung, sondern nur um die Darstellung.
Schon klar. Ich hab ja auch gesagt, was du mal probieren koenntest. Und Du sagst das hast Du alles schon. Wen dem so ist sollte es jetzt entweder funktionieren oder immer noch nicht und Du darfst gerne den neuen Code posten.
-
Meine Schuld. Hab dein Float nicht gesehen...
Was moechtest Du ueberhaupt bezwecken?
-
Meine Schuld. Hab dein Float nicht gesehen...
Was moechtest Du ueberhaupt bezwecken?
Also es soll eine Zeile werden, die so ähnlich aussieht:
-------------------------------------------------------
| Text und sowas BILD|
-------------------------------------------------------Das Bild soll einfach rechts stehen, alles andere von links. Ich denke das float da ganz okay ist. Aber es geht eben nicht. Wenn du den Code aus dem ersten POsting mal in eine Datei packst, merkst du, was ich meine.
Andreas
-
Mich interessiert nur ob die Tabelle zwischen den beiden spans landen soll.
Ansonsten: gibt doch erstmal dem ersten span ein float:left
Da das Div in dem dei Tabelle liegt ausserhalb des ersten ist, sollte die Tabelle wohl unter den beiden spans erscheinen? Also brauchst du im 2. Div noch ein clear:both.
Falls wirklich die Tabelle ZWISCHEN den Spans erscheinen soll hast Du da ganz schoenen Murks geschrieben. (der zwar geht aber so keinen Sinn ergibt)
-
Mich interessiert nur ob die Tabelle zwischen den beiden spans landen soll.
Nein. Das soll auf gar keinen Fall sein! Ich hatte im Quelltext (habe ihn auch nochmal angehängt) das Beispiel so beschrieben, wie es in meiner Seite ist.
Ansonsten: gibt doch erstmal dem ersten span ein float:left
Ich habe dem zweiten span float:right zugewiesen, da ich möchte, dass das Element an der rechten Seite bleibt.
Sieh dir mal den Quellcode an.
<html>
<body>
<div style="padding: 3px; border: solid 2px #555;"><div style="background-color: #369; padding: 2px; margin-bottom: 3px;">
<span style="width: 200px;">Elemente und sowas...
</span>
<span style="float: right;width: 100px;"><img src="drucker.gif" alt="drucken"/></span>
</div><div style="clear:both;">
<table>
<tr><td>Test</td></tr>
</table>
</div>
</div>
</body>
</html>Andreas
-
Moin!
Schon klar.
Schau dir mal diesen Code an:
<html> <body> <div style="padding: 3px; border: solid 2px #555;"> <div style="width:100%; background-color: #369; padding: 2px; margin-bottom: 3px;"> <span style="float:left; width: 200px;">Elemente und sowas... </span> <span style="float: right;width: 100px;"><img src="drucker.gif" alt="drucken"/></span> </div> <div style="clear:both;"> <table> <tr><td>Test</td></tr> </table> </div> </div> </body> </html>Das sollte ungefaehr sein, was Du haben willst, oder? Beachte die 2 CSS Eigenschaften die ich hinzugefuegt habe.
Gruss
-
Ich habe nur Deinen Code dazu gebracht, zu machen was Du willst. Das heisst nicht dass er so auch wirklich ok ist. Da Du sowieso floatest kannst du die spans gleich zu divs machen damit die width Angaben nicht ungueltig sind und um das geplante select gehoert ein Formular, welches du am Besten mit margin:0px versiehst.
-
-
-
-
-
-
-
-
Hi,
<div style="background-color: #369; color: #fff; padding: 2px; margin-bottom: 3px;">
<span style="width: 200px;">Auszuwertendes Jahr:
<select>
<option selected="selected" value="2007">2007</option>
<option value="2008">2008</option>
</select>
</span>
<span style="float: right;width: 100px;"><img src="drucker.gif" alt="drucken"/></span>
</div>ich frage mich erstens, warum du das Bild noch in ein separates span-Element verpackst, anstatt das img-Element selbst direkt auszurichten.
Und zweitens würde ich dir empfehlen, die Reihenfolge zu tauschen - also das Element, das nach rechts floatet, zuerst zu notieren. Dann hat es schon mal seinen Platz, und der Rest floatet drumherum.
Übrigens darf die width-Angabe des ersten span in deinem Quelltext gar keine Wirkung haben, da span ein Inline-Element ist und width nicht auf Inline-Elenmente anwendbar ist.
So long,
Martin--
Alkohl ist ungesund,
Rauchen ist schädlich,
Sex ist unanständig
- und die Erde ist eine flache Scheibe.