Bild(span) zentrieren

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe auf meiner Homepage (genauer MySpace) ein Bild als span ins Profil eingebettet, sodass wenn man auf die Seite kommt erstmal nur dieses Bild sieht.

[CODE]
body{
background-position:top center;margin-top: 670;}
span.topbanner {
top: 30;
left: 42%;
margin-left: -315px;
width: 100%;
height: 500px;
position: absolute;

}

FrontBild
[/CODE]

Allerdings ist diese Anpassung an meine Bildschirmauflösung angepasst.
Ich möchte nun, dass das Bild zentriert auf allen möglichen Auflösungen zentriert erscheint.
Kann mir wer helfen, ich bekomme das nicht so ganz hin.

Gruß

2

Wenn Du das so wie bisher positionieren (position:absolute;) willst, dann wirst Du wohl mit left:50%; und maring-left:-400px; arbeiten müssen.

3

Wozu ist das ? Was macht das außen rum anders als das oder das selber?

height: 500px;

Das dürfte nicht klappen, weil ein Inline-Element ist und diesen Elementen keine Höhe zugewiesen werden kann.
Dass das so aussieht, als würde es funktionieren, wird vermutlich daran liegen, dass das Image so hoch ist.

margin-top: 670;

Da fehlt die Einheit. In CSS muss immer eine Einheit angegeben werden (außer bei 0).

top: 30;

Genauso hier.

Deine Positionierung mit left und margin-left kann, wenn 42% weniger als 315px sind, dazu führen, dass das Element links aus dem Viewport verschwindet und NICHT durch Scrollbalken wiedergeholt werden kann, weil Scrollbalken nicht links über den Rand hinaus scrollen können!

Allerdings ist diese Anpassung an meine Bildschirmauflösung angepasst.

Webseiten haben mit der Bildschirmauflösung nichts zu tun. Die ist irrelevant.
Das erkennst Du auch daran, dass es in CSS keine Möglichkeit gibt, auf diese zu reflektieren. CSS kennt die Auflösung nicht und muss sie auch nicht kennen.
4

Hallo erstmal danke für die Antworten.

@stachelbeer:
Die Umsetzung ist mir eigentlich egal, hauptsache ich habe das Bild zentriert.

@ Efchen:
Das Problem ist, dass man auf der MySpace Seite nicht so einfach den Quellcode bearbeiten kannn, sondern nur durch bestimmte Elemente was machen kann.

Ich möchte das ein Bild noch über der Navigationsleiste von MySpace erscheint, was dieser Span anscheinend auch macht.
Der Link () soll auf den unteren Teil der Seite verlinken und das Bild soll einfach ein Bild sein O.o
Wie auch immer, das klappt auf jedenfall und erfüllt Sinn und Zweck.

Merkwürdiger Weise klappen die Angaben auch trotz fehlender Einheiten.

Und auch das Bild wird angepasst. Das Original ist in deutlich höherer Auflösung vorhanden.
Warum auch immer das klappt, es klappt :slight_smile:

Vllt habe ich mich ein bisschen falsch ausgedrückt.
Dennoch möchte ich gern das eben dieses Bild im zentrierten Bereich oben angezeigt wird. Das gesamte Layout ist so, dass der „wichtige Bereich“ also die Informationen 80% (breite) der Website einnehmen und eben zentriert dargestellt wird (eine Art balken). Das Bild kann allerdings auch so dargestellt werden dass nach oben unten links rechts xx pixel vom Rand entfernt sind, ist das mit dem Code umsetzbar?

Alternative vorschläge nehm ich auch gern :slight_smile:

Gruß Veote