Kurze html Hilfe benötigt

[taks]

Kurze html Hilfe benötigt

Abend zusammen

Ich bin dran eine Bildergalarie mit html zu erstellen.
Dazu verwende ich:
<a href="bild1gross.jpg"><img src="bild1klein.jpg" /></a>
Jetzt frage ich mich: Wie kann ich das Bild in der Grossansicht im Fenster zentrieren?


Danke und gruss

taks

 

[Leandros]

AW: Kurze html Hilfe benötigt

Gar nicht. Das Darstellen des Bildes ist Aufgabe des Browsers und wäre das selbe als würdest du es über File:/// darstellen.
Nutz z.B Fancybox.

 

[DarkMo]

AW: Kurze html Hilfe benötigt

oder... ne html (oder gar php) datei erstellen, die das bild in groß anzeigt und auf diese verlinken, statt das bild ansich ^^ dann kannste in der datei alles angeben, dass das bild so dargestellt wird, wie du es magst.

 

[Leandros]

AW: Kurze html Hilfe benötigt

oder... ne html (oder gar php) datei erstellen, die das bild in groß anzeigt und auf diese verlinken, statt das bild ansich ^^ dann kannste in der datei alles angeben, dass das bild so dargestellt wird, wie du es magst.

Dann schon lieber ne ShadowBox ala FancyBox. Das ist total easy.

Hab da grade mal ein Beispiel gebastelt, büdde. Edit this Fiddle - jsFiddle

 

[Ahab]

AW: Kurze html Hilfe benötigt

Würde auch zu einem Plugin wie Fancybox raten.

Wenn du es (löblicherweise) doch selbst basteln willst, gib in den CSS-Properties folgende Eigenschaften an:

position: fixed;
left: 50%;
top: 50%;

Dann musst du margin-left und margin-top noch negativ auf die Hälfte der Höhe und Breite des Bildes setzen. Bei 500 x 300 wären das:

margin-left: -250px;
margin-top: -150px;

Mit diesen Grundeinstellungen positionierst du das Bild exakt in der Mitte des Bildschirms, ausgehend vom Viewport.

 

[nay]

AW: Kurze html Hilfe benötigt

Wenn man IE8 und ein paar andere ältere Browser ignoriert kann man sicherlich eine HTML-CSS-only fancybox für Bilder aller Größen bauen. Der einzige Sinn dabei wäre, dass man mit einigen neuen CSS Features vertraut wird.

Ansonsten:

- fancybox oder ähnliches Plugin (z.B. colorbox) einbinden
- eventuell ein besseres Fallback als _blank links wenn Javascript ausgeschaltet ist (siehe Facebook)