Bild neben zentriertem Bild darstellen

[ferris90]

Hallo!

Ich habe eine Tabelle entworfen, die ein Bild (1) zentriert auf der Seite anzeigt. Neben diesem Bild (1) soll jetzt ein zweites Bild (2) stehen.

Dabei soll Bild 1 immer zentriert sein. Bild 2 soll einfach nur rechts daneben auf gleicher Höhe sein. Hier mal eine Grafik, wie es aussehen soll:

http://imgur.com/LjLwJ2I

Unabhängig von der Bildschirmauflösung des Betrachters soll Bild 1 immer zentriert sein, Bild 2 stets direkt rechts daneben. Habe es schon mit DIV probiert, blicke da aber noch nicht so gut durch (habe z.B. Bild 2 vom rechten Bildschirmrand ausgerichtet, mit dem Ergebnis, dass es Bild 1 bei einer niedrigen Bildschirmauflösung (z.B. 1280, 1024) überlagerte.

Für Tipps & Hilfe wäre ich dankbar! :-)

 

[threadi]

Was du suchst hat mit Gestaltung zu tun, also CSS. HTML dient nur der Strukturierung. Daher habe ich deine Frage mal in den richtigen Bereich des Forums verschoben.

Mittels CSS sehe ich aktuell mehrere Lösungsmöglichkeiten für deinen Wunsch. U.a. absolute Zentrierung und evtl. auch flex-Boxen. Schau dich danach mal um.

 

[Sempervivum]

Threadi ist mir zuvor gekommen. Ich habe dieses ausgearbeitet und offenbar funktioniert es:

<div style="margin: auto; width: 250px; height: 150px; position: relative">
<img src="images/1.jpg">
<img src="images/logo.png" style="position: absolute; left: 250px">
</div>

 

[ferris90]

Threadi ist mir zuvor gekommen. Ich habe dieses ausgearbeitet und offenbar funktioniert es:

<div style="margin: auto; width: 250px; height: 150px; position: relative">
<img src="images/1.jpg">
<img src="images/logo.png" style="position: absolute; left: 250px">
</div>

Super, genial! Genau das ist es :-) Vielen Dank für die schnelle Hilfe und noch einen schönen Abend.

 

[Sempervivum]

Geht auch ohne absolute Angabe von Breite und Position:

<div style="text-align: center">
<span style="display: inline-block; position: relative">
<img src="images/1.jpg">
<img src="images/logo.png" style="position: absolute; left: 100%">
</span>
</div>