Bild zentrieren HTML

darkcobalt · 19.01.2015

Hi Leute. ich habe ein einfaches HTML File mit einem Bild. Wie muss ich den Code abänderen damit das Bild horizontal wie auch vertikal automatisch zentriert angezeigt wird???

CODE//////////////

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITEL</title>
<style type="text/css">
body {
    background-color: #FFF;
}
</style>
</head>

<body>
<img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="new" />
</map>
</body>
</html>

als HTML-Code eingefügt - Dobi78

DJND · 19.01.2015

<img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" align="Center" valign="middle"/>

Probier mal ob das so klappt.

owieortho · 19.01.2015

DJND schrieb:
...align="Center" valign="middle"...

deprecated (veraltet)...
Pack Dein Bild in einen DIV-Container mit einem Klassennamen Deiner Wahl und setze im CSS die Breiten- und Höhenwerte auf die gleichen Werte, wie das Bild und die margins auf deren Hälfte.

CSS:

.dein_klassenname {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 246px;
     height: 246px;
     margin-left: -123px;
     margin-top: -123px;
}

hth
O.

pixelmaker · 19.01.2015

owieortho schrieb:
deprecated (veraltet)...

Ich wundere mich immer über die Hellseher hier die ihre Statements abgeben ohne zu wissen was mit dieser HTML Datei geschehen soll.
Ich habe gerade wieder mit einer HTML Mailvorlage gekämpft deren Formtierung nur mit Tabellen in Outlook funktioniert. Das ist so was von "veraltet", geht aber nicht anders.

grüße
ralf

owieortho · 19.01.2015

Jo,

wie konnte DJND nur ahnen, dass darkcobalt an einer Emailvorlage arbeitet.

Du hast natürlich recht, dass in diesem Fall auf diese Techniken zurückgegriffen werden müsste. Und ich habe so geantwortet, weil ich, vielleicht irrtümlicherweise, vom Einsatz auf einer "normal" verwendeten Datei ausging. Das könnten wir jetzt sicherlich weiter diskutieren, aber ich glaube das braucht's nicht. Ich habe es nicht herablassend gemeint und verzeihe mir, mich beim "Hellseher" ein wenig gewundert zu haben.

O.

darkcobalt · 19.01.2015

Hi Leute. Danke für eure Hilfe.

Es ist keine Emailvorlage sondern soll eine Startseite sein von der weg ich denn auf 4 weitere Wordpress Seiten verlinke. Ich kenne mich mit HTML nicht so gut aus und bin euch sehr dankbar.

ich werde das mit css versuchen !!! noch eine frage zu der verlinkung von den 4 WP Seiten. Ich würde eben ein grosses Bild in die Mitte laden und diesem dann so Link Hotspots einzeichnen (Dreamweaver) hinter denn jeweils der Link zur jeweiligen Seite steht.

PAsst das so oder ist das auch veraltet bzw. was kann ich tun damit iphone und smartphone diese "startseite" dann auch verstehen? DANKE!!!!!!!!!!!

cythux · 19.01.2015

Html5 verwenden und css3

darkcobalt · 19.01.2015

Habs mal adaptiert, will aber noch nicht so recht

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITEL</title>
<style type="text/css">
body {
    background-color: #FFF;
}
.style {
 
    position: absolute;
     top: 50%;
     left: 50%;
     width: 246px;
     height: 246px;
     margin-left: -123px;
     margin-top: -123px;
 
 
}
</style>
</head>

<body>
<img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="new" />
</map>
</body>
</html>

Aelfry · 19.01.2015

darkcobalt schrieb:
Habs mal adaptiert

nope, hast du nicht - der css code von owieortho muss natürlich noch auf dein Bild angepasst werden:

HTML:

     width: 1440px;
     height: 787px;
     margin-left: -720px; /* 50% deiner Bildbreite */
     margin-top: -394px; /* 50% deiner Bildhöhe */

Ansonsten musst du deinem image natürlich noch die Klasse zuweisen (die ich btw nicht "style" nennen würde)

Aelfry · 20.01.2015

pixelmaker schrieb:
Ich wundere mich immer über die Hellseher hier die ihre Statements abgeben ohne zu wissen was mit dieser HTML Datei geschehen soll.
Ich habe gerade wieder mit einer HTML Mailvorlage gekämpft deren Formtierung nur mit Tabellen in Outlook funktioniert. Das ist so was von "veraltet", geht aber nicht anders.

Es hat nichts mit Hellsehen zu tun, wenn man im Zweifelsfall eher eine moderne Lösung empfiehlt, anstatt unerfahrenen Usern veraltete Techniken zu zeigen.

Da im Eingangspost nichts auf irgendeinem Spezialfall hinweist (Email newsletter etc.), ist es nur logisch von einer normalen Website auszugehen.
Von daher war der Einwand von owieortho durchaus gerechtfertigt.

Gelöschtes Mitglied 633957 · 20.01.2015

Aelfry schrieb:
der css code von owieortho muss natürlich noch auf dein Bild angepasst werden [..] Ansonsten musst du deinem image natürlich noch die Klasse zuweisen..

Vielleicht ist es so für einen Anfänger leichter zu verstehen:

Code:

img.style {                    /* Deine style-Klasse für das img-Element */
  position: absolute;          /* Positionierung, gemessen am Rand des nächsthöheren Elements, das nicht position:static ist - absolute verhält sich dynamisch */
  left: 50%;                   /* left u. top: Linke und obere Kante in die Mitte rücken */
  top: 50%;                    /* Die linke, obere Ecke ist nun mittig (horizontal und vertikal) im Browserfenster bzw. body ausgerichtet */
  width: 1440px;               /* Die Breite in Pixel (px) entspricht der Breite der Grafik */
  height: 787px;               /* Die Höhe entspricht der Höhe der Grafik */
  margin-left: -720px;         /* Den Außenabstand um die Hälfte verringern (50% left minus die Hälfte der Grafikbreite) */
  margin-top: -393.5px;        /* Das Gleiche für die Höhe (Nun ist die Mitte der Grafik in der Mitte des Browserfensters) */
}

Im IMG-Tag die Klasse style einbinden, durch class="style":

HTML:

<img class="style" src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" />

Im AREA-Tag wird das Ziel new angegeben. Ist new ein Kontext-Name eines bestehenden Fensters? Wenn nicht würde ich target="_blank" (Link in neuem Fenster öffnen) oder target="_self" (Link im gleichen Fenster öffnen) verwenden:

HTML:

<area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="_blank" />

Es sei denn, Du möchtest mit dem Link, das neue Fenster mit dem Namen new erstellen!

Besten Gruß,
tynick

DJND · 20.01.2015

owieortho schrieb:
deprecated (veraltet)...
Pack Dein Bild in einen DIV-Container mit einem Klassennamen Deiner Wahl und setze im CSS die Breiten- und Höhenwerte auf die gleichen Werte, wie das Bild und die margins auf deren Hälfte.

CSS:

.dein_klassenname { position: absolute; top: 50%; left: 50%; width: 246px; height: 246px; margin-left: -123px; margin-top: -123px; }

hth
O.

Sorry, war mir nicht bewusst, dass dies so veraltet ist. Ich lerne aber immer gerne dazu! ;-)

darkcobalt · 20.01.2015

Vielen vielen Dank für die tolle Beschreibung nehmen dem Code. So ist es echt verständlich uns funktioniert wunderbar.

Zwei Fragen hätte ich noch zum Abschluss.

1) Wie kann ich den horizontalen Scollbalken im Browser deaktiveren? Der erscheint wenn das Fenster zu klein ist und ist unnötig.

2) Wie baue ich in diese kleine einfache HTML Seite jetzt Google Schlagworte und Meta Infos (ich glaube so heisst das) ein damit diese Hauptseite dann auch sogut gefunden wird wie die dahinter verlinkten WordpressSeiten (diese werden toll unter Google gefunden). Was sind da Tricks, MustHaves damit auch seine einfache statische Seite gut verlinkt wird?

fakerer · 23.01.2015

ausblenden kannst du ihn in dem du einfach alles mit

CSS:

body {
  overflow: hidden;
}

ausblendest was außerhalb des Fensters liegt
aber warum ist der unnötig wenn das Fenster zu klein ist brauchst du ihn ja um nach unten zu scrollen oder etwa nicht^^

MetaInfos zu mit den meta keywords

HTML:

<meta name="keywords" content="word 1 word2" />

aber inwieweit die noch bei google ne rolle spielen, oder was aktuell gerade so wie gewertet wird kann ich leider nicht sagen