Bild immer zentriert ohne frames

K

Klegs

Angesehenes Mitglied
hallo zusammen

ich probiere schon seit längerem ein bild zu zentrieren ohne die site mit frames zu verbauen. das ziel wäre das das bild unabhängig von der browsergrösse immer im zentrum ist.

wie hier zum beispiel:

www.topjobs.ch

mit frames gehts aber ohne , habe ich so meine liebe mühe!

gruess
 
hallo klegs

mein vorschlag > layer

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel</title>
</head>

<body>

<div style="position: absolute; top: 50%; left: 50%; height: 10px; width: 10px">
<div style="position: absolute; top: -200px; left: -150px; height: 400px; width: 300px;">
<img src="" alt="" width="300" height="400" style="background-color: #990000">
</div>
</div>
</body>
</html>




grüsse ric
Würmer....
 
Hallo Cookie

soweit so gut. mein bild heisst "indexbild.jpg" und ist 800 px breit und 500 px hoch.
wo genau muss ich das bil einfügen in dem code.

ich meinte zwischen den "" beim img src, oder?

wenn ich das mache und die zahlen änder, wills nicht so recht....
ohmy.gif

wie wäre es denn richtig?

gruess
 
QUOTE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel</title>
</head>

<body>

<div style="position: absolute; top: 50%; left: 50%; height: 10px; width: 10px">
<div style="position: absolute; top: -250px; left: -400px; height: 500px; width: 800px;">
<img src="indexbild.jpg" alt="Mein Indexbild" width="800" height="500">
</div>
</div>
</body>
</html>





hoffe habe mich nicht verschrieben.... habe es nicht getestet, sollte aber iO sein.

ACHTUNG: dein bild indexbild.jpg muss im selben ordner liegen, ansonsten must du
den pfad anpassen.

grüsse ric
 
cookie danke es geht.

kannst du mir noch erklären was du mit den pixel und den % angaben genau definierst.
so kann ich es das nächste mal auch alleine
wink.gif


gruess
 
nabend klegs.... hier noch die anleitung.

es handelt sich um zwei layer.....

layer eins wird absolut in der mitte positioniert.
position: absolute; top: 50%; left: 50%; height: 10px; width: 10px

layer 2 (ausgerichtet am zentrierten layer 1) wird mit der positionierung minus
um die hälfte der layergrösse 2 zurückgesetzt, was schlussendlich die zentrierung
zur folge hat.... äää scheisse, ob das jemand versteht ??????

ich erklär dir wohl besser was du ändern musst, dann kannst du das eher nachvollziehen.



Positionierung Layer 1 bleibt so bestehen
<div style="position: absolute; top: 50%; left: 50%; height: 10px; width: 10px">

Positionierung und Grösse Layer 2 ändert sich mit der grösse des Bildes
die Positionierung enstpricht der Hälfte der Länge / Breite
<div style="position: absolute; top: -250px; left: -400px; height: 500px; width: 800px;">


Grösse des Bildes (ändert sich)
<img src="indexbild.jpg" alt="Mein Indexbild" width="800" height="500">

alles klar ?? ui gar nicht so einfach das in worten zu erklären :-D

grüsse ric
 
Moin ric

Alles klar habs verstanden!
Vielen dank und noch schöne festtage.

gruess
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben