HTML Bild mittig darstellen, rechts daneben ein Text

DTC

Ensign
Registriert
Dez. 2003
Beiträge
253
Gelöst: Bild mittig darstellen, rechts daneben ein Text

Hallo allerseits,

ich möchte mittels HTML und CSS ein Bild auf einer Seite horizontal mittig darstellen.
Rechts neben dem Bild soll ein Text, ein weiteres Bild oder irgendein anderes Element dargestellt werden.
Der Abstand zum mittigen Bild soll genau festgelegt werden können.

Beispiel-Bild:
Beispiel.jpg

Bisher habe ich dazu leider nix im Netz gefunden...

Gruß DTC
 
Zuletzt bearbeitet:
Horizontal zentrieren funktioniert so, dass du dem Objekt erst eine feste Breite gibst und dann im CSS "margin: 0 auto" drauf setzt.

Beispiel im CSS:
PHP:
#foo {
  width: 1050px;
  margin: 0 auto;
}
 
Stichpunkt "float"

zwei Div Container erstellen einen Links floaten den anderen rechts.

Nebuk hat schon den richtigen Ansatz allerdings für ich es anders machen:


Code:
#foo-links {
width: 100%;
max-width: 48%
float: left;
}

#foo-rechts {
width: 100%;
max-width: 48%
float: right;
}
 
bsp.jpg funktioniert so:
Code:
<html>
<head>
<body>
<div style="margin: 0 auto; width: 300px; height: 300px; background: grey;">
	<div style="float: right;margin-right: -120px; width: 100px; height: 100px; background: red;">
	</div>
</div>
</body>
</html>

du positionierst den rechten kasten eigentlich im ersten, gibst ihm aber über negatives margin im endeffekt eine koordinate 20px rechts daneben.

@vorredner: damit kannst du ihm aber keinen festen abstand zum mittleren objekt geben, oder komm ich grad nur nicht drauf..
 
Hallo,

danke für die Antworten, aber das alles löst mein Problem nicht :(

Ich weiß, wie ich das Bild mittig bekomme - das Problem ist aber, dass das Bild mittig bleiben soll, sobald ich daneben einen Text positioniere.
Selfhtml und Co. hab ich mir alles schon angeschaut. Und leider habe ich auch noch keine Webseite gefunden, wo ich mir den Quelltext "abschauen" kann.

Wie gesagt, ich möchte nicht, dass das Bild und der Text zusammen mittig dargestellt werden.
Ich möchte nur das große Bild in der Mitte haben - und rechts daneben halt irgendwas anderes darstellen, sei es Text oder ein weiteres Bild usw.
Dabei soll der Abstand zwischen dem großen Bild und dem Text z.B. auf 100 Pixel festgelegt werden. D.h. der Abstand des Textes zum großen Bild soll immer gleich bleiben, egal, wie groß die Bildschirmauflösung ist.
Ergänzung ()

@ Cai-pirinha

Genau das habe ich gesucht... muss ich mir gleich mal anschauen :)
 
Poste doch einfach mal was du bisher schon hast. So kann man vlt den Fehler finden.
 
@CapFuture

floats und margin 0 auto sind alles aber keine Hacks. Das sind valide CSS Elemente.

Das von dir verlinkte das sind "hacks" vor allem wenn man sowas nutzen muss:

Code:
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;

Entweder:

Code:
box-orient: horizontal;

​oder gar nicht nutzen.
 
Jup ich denke mal Opera auch.
 
@Daaron

Es gibt auch noch ältere Opera Versionen die sich noch wirklich Opera nennen dürfen. Der neue Opera ist einfach nur ein Chrome mit anderem Namen und Hersteller...
 
Blablabla.... böse Opera-Hersteller, die ganz böse ihre eigene halbgare Engine entsorgt haben und auf den defacto-Standard gewechselt haben...
Jeder Opera ab 12 kanns, jeder davor kanns nicht. Alle Operas zusammen haben einen Marktanteil von gut 3%...

Opera ist genau der Browser, auf den ich bei der Entwicklung GAR KEINE Rücksicht nehme. Das Ding ist seltener als der IE8....
 
@Daaron

Ich achte auch nicht drauf Opera geht mir auch sonst wo vorbei ;) Auch IE 6-8 geht mir sonst wo vorbei. Wenn man heute nicht min. den 9er benutzt pech.
 
Zurück
Oben