Bild in der Mitte der Seite?

Status
Nicht offen für weitere Antworten.
O

online

Erfahrenes Mitglied
Hallo, hab gerade vergebens versucht ein bild komplett zentriert auszurichten, sowohl an der x - Achse, als auch an der y - Achse!

Es funktioniert, dass es in der Mitte (von Links nach rechts) ist, aber nicht in der Mitte (von Oben nach unten)!
Kann mir bitte jemand erklären, wie ich das schafen kann?

Danke

Online
 
mit html gar nicht. mit php sollte es eigentlich so gehen:
+seitenhöhe abfragen
+höhe des bildes subtrahieren
+wert durch 2 teilen
+diesen dann als wert für top-marign einsetzen.
 
PHP: 
<table width="100%" height="100%" border="0">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<img src="...">
</td>
</tr>
</table>
 
Original geschrieben von therealcharlie
mit html gar nicht. mit php sollte es eigentlich so gehen:
+seitenhöhe abfragen
+höhe des bildes subtrahieren
+wert durch 2 teilen
+diesen dann als wert für top-marign einsetzen.
Zum Vergrößern anklicken....

Will es nur kurz erwähnen, aber mit php kann man die Seitenhöhe nicht abfragen.
SilentWarriors Lösung funktioniert bestens, ist aber nicht HTML Standart.

Edit: Das mit dem height beanstanden ist vielleicht (oder warscheinlich) etwas kleinlich.

Würde es also lieber per CSS lösen.
Hier gibt es Ansätze:
css.fractatulum.net

Viele Grüße,

Stefan
 
Zuletzt bearbeitet:
Danke!
Aber irgendwie funktioniert das alles nicht!

Hier mal mein Code:

PHP: 
<style type="text/css">
body {
	background-color: #131c47;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style></head>

<body scroll="no" valign="middle" align="center">
<table width="100%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0" valign="middle">
  <tr>
    <td valign="middle" align="center"><div align="center" valign="middle"><img src="image/impressum.gif" width="753" height="403" border="0" usemap="#Map" align="center" valign="middle">
          <map name="Map">
            <area shape="rect" coords="127,14,284,64" href="test.htm" target="_self">
            <area shape="rect" coords="316,46,407,70" href="bewertung.htm" target="_self">
            <area shape="rect" coords="436,44,513,72" href="lagerung.htm" target="_self">
            <area shape="rect" coords="541,44,639,71" href="impressum.htm" target="_self">
            <area shape="rect" coords="5,384,138,400" href="hallo.htm" target="_blank">
          </map>
    </div></td>
  </tr>
</table>
 
Habe gerade nochmal geschaut und es gibt anscheinend keine wirklich gute Lösung.
Aber das von dir gepostete Stück funktioniert bei mir unter Firefox und IE 6 bestens.

Edit: Noch ein Tipp. Mit
overflow: hidden;
im CSS werden die scrollbalken auch im Firefox/Mozilla nicht dargestellt.

Viele Grüße,

Stefan
 
Zuletzt bearbeitet:
Hi,

eine Möglichkeit der Zentrierung besteht noch mit CSS. Du solltest zuvor sicherstellen,
dass Dein Anzeigebereich und der Body tatsächlich 100% betragen. Anschliessend
kann das Zentrieren erfolgen.
Code: 
/* 100% Anzeigebereich gewährleisten */
body, html{ height: 100%;
            width: 100%;}

/* Zentrieren */
img.zentriert{ position: absolute;
               left: 50%;
               margin-left: -376px;  /* Halbe Breite des Bildes */
               top: 50%;
               margin-top: -201px;   /* Halbe Höhe des Bildes */}
Der zugehörige HTML-Code:
Code: 
<img class="zentriert" src="image/impressum.gif" width="753" height="403" border="0" usemap="#Map">
Ciao
Quaese
 
SilentWarriors Lösung funktioniert bestens, ist aber nicht HTML Standart.
Zum Vergrößern anklicken....
Das weiss ich, aber da rund 90% aller HTML-Coder ohnehin nur irgendwelchen Pfuschercode schreiben, den der IE mit etwas Glück noch richtig interpretiert, habe ich gedacht, es interessiert sowieso keinen, ob das valides HTML ist oder nicht. Naja, aber ich freue mich, dass es doch einer gemerkt hat. :)
 
Original geschrieben von SilentWarrior
Das weiss ich, aber da rund 90% aller HTML-Coder ohnehin nur irgendwelchen Pfuschercode schreiben, den der IE mit etwas Glück noch richtig interpretiert, habe ich gedacht, es interessiert sowieso keinen, ob das valides HTML ist oder nicht. Naja, aber ich freue mich, dass es doch einer gemerkt hat. :)
Zum Vergrößern anklicken....

Ich schau danach, versuchs und lass es dann.
Es ist einfach zu ermüdend, aber der Gedanke mit validem HTML Seiten zu erstellen die so aussehen wie sie sollen hat was.
Aber leider ist das Ergebniss meistens nicht oder nur mit viel Trickserei zu gebrauchen.

Viele Grüße,

Stefan
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück