Zwei Elemente nebeneinander anordnen

[GSR]

Hi,

ich bin grade dabei, einen html-Code auf einer Seite zu erstellen.
Mein Problem: Ich habe zwei Elemente, die nebeneinander und - falls möglich - auch noch mittig positioniert sein sollen.

Es handelt sich um folgende Elemente:

1. Ein Bild mit Bildunterschrift

2. Ein Bild mit PayPal-Button



Der Code sieht bisher wie folgt aus:

<img src="http://www10.pic-upload.de/05.03.12/did49xhwd2al.jpg"/><font color="red"<font size=5>Contact <a href="mailto:*E-Mail-Adresse">*E-Mail-Adresse*</a></font ></font>

<img src="http://www10.pic-upload.de/05.03.12/vrlt36df5ah.jpg"/>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="XNMJJ7NXR8NC4"><table><tr><td><input type="hidden" name="Number Of Beats" value="">Number Of Beats</td></tr><tr><td><select name="os0"><option value="1 Beat">1 Beat $20,00 USD</option>
<option value="2 Beats">2 Beats $35,00 USD</option>
<option value="5 Beats">5 Beats $80,00 USD</option>
</select> </td></tr><tr><td><input type="hidden" name="on1" value="Beat Name">Beat Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr></table>
<input type="hidden" name="currency_code" value="USD"><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1"></form>

Wie kann ich das am einfachsten regeln?

 

[Space Vampire]

Mit CSS und float setzt du Elemente nebeneinander.
Wenn du beide Elemente gemeinsam zentrieren willst, umgibst du sie mit einem Wrapper.
<p> oder <div> in diesem Fall.
Dieser bekommt als width die Gesamtbreite der beiden Elemente und du kannst dann den Wrapper mit CSS margin: 0 auto; zentrieren.

 

[GSR]

Wo muss der Float-Befehl genau hin, damit nicht nur die Bilder sondern auch der Text (bei 1.) bzw. der PayPal-Button (bei 2.) mit "floaten"?

 

[threadi]

Im <img>-Element sollte es reichen. Allerdings sind die Quellcode-Schnippsel die Du zeigst fehlerhaft. Hoffentlich sind die Originale richtig?

 

[GSR]

Naja, zumindest werden die Bilder sowie Text und PayPal-Button richtig angezeigt, nur eben nicht an den richtigen Stellen ;)

Wo sind denn die Fehler im Quellcode?

 

[GSR]

Hi,

irgendwie funktioniert das nicht ganz, beziehungsweise versteh ich es nicht richtig.

Hier noch mal der aktuelle Code:

<img src="http://www10.pic-upload.de/05.03.12/vrlt36df5ah.jpg"/><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="XNMJJ7NXR8NC4"><table><tr><td><input type="hidden" name="Number Of Beats" value="">Number Of Beats</td></tr><tr><td><select name="os0"><option value="1 Beat">1 Beat $20,00 USD</option>
<option value="2 Beats">2 Beats $35,00 USD</option>
<option value="5 Beats">5 Beats $80,00 USD</option>
</select> </td></tr><tr><td><input type="hidden" name="on1" value="Beat Name">Beat Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr></table>
<input type="hidden" name="currency_code" value="USD"><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1"></form>


<img src="http://www10.pic-upload.de/05.03.12/did49xhwd2al.jpg"/>
<font color="red"<font size=3>Contact <br/><a href="mailto:[email protected]">[email protected]</a></font ></font>

So wird es aktuell angezeigt:



Und so hätte ich es gerne:

 

[threadi]

Dann bau um beide Bereiche je ein Hilfselement.

<div class="links">hier das was links stehen soll</div>
<div class="rechts">hier das was rechts stehen soll</div>

und ergänze für diese als CSS-Eigenschaften

.links {
 float: left;
 width: 300px;
}
.rechts { float: left; }

An deinem Code oben ist wie schon gesagt einiges falsch. Tabelleninhalte hast Du nicht, also lass die Tabelle weg. Das Element <font> sollte man nicht mehr nutzen, CSS ist für jegliche Gestaltung da. Und bei sowas wie

<font color="red"<font size=3>

sollte doch schon auffallen, dass da ein > fehlt?!

 

[Tronjer]

Entweder Link zur Seite oder den Code zumindest in HTML-Tags und richtig eingerückt. Code als Quote liest keiner.

Wobei die Aufgabe an sich ganz einfach ist. Du wrapst den Content von "Leasing Rights" bis zu den Logos in einem Div und den verbleibenden Rest in einem zweiten. Anschließend belegst du beide mit float:left.

 

[GSR]

Dann bau um beide Bereiche je ein Hilfselement.

<div class="links">hier das was links stehen soll</div>
<div class="rechts">hier das was rechts stehen soll</div>

und ergänze für diese als CSS-Eigenschaften

.links {
 float: left;
 width: 300px;
}
.rechts { float: left; }

Super, das hat geklappt. Nur das mit dem zentrieren funktioniert nur nicht. Ich hab einen weiteren div um beide Elemente herum gebaut, und im die class=lease zugewiesen. Dann im CSS-Editor .lease { margin: 0 auto; } eingefügt, dann wurden die Elemente allerdings wieder so wie vorher, also untereinander angezeigt.
Was hab ich da falsch gemacht?

 

[threadi]

Außer dem margin musst Du dem Element auch eine feste Breite geben - dann klappt es.