Linkbild Zentrieren ??

Porkee · 20. Oktober 2010

Hallo Leute, zuersteinmal ich bin ein Absoluter html-CSS anfänger und möchte mir gerne schritt für schritt eine Seite basteln.

Mein erster schritt ist es Eine Startseite zu schreiben die ganz einfach ein Einheitlichen Hintergrund Hatt und ein Bild Zentriert in der Mitte welches ich anklicken muss um auf die eigentliche Startseite zu gelangen.

und da kommt es zu meinem Problem... Die Hintergrundfarbe zu bestimmen ist wohl das einfachste, aber wie Zentriere ich mein Linkbild so das es genau in der Mitte der Seite ist und das die Linkfläche wirklich nur so groß wie das Bild bleibt ?

hier mein bisheriger code:

HTML

<!doctype html>
<html>




<head>
    <title>Startseite</title>
 <style type="text/css">
<!--
body {
    background:Black;
}
{




}
-->
</style>
    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="design.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>
<a href="E:\WoWWebseite\start.htm"><div align="center"><img align="center" src="E:\WoWWebseite\WOWLogo.png" border="0" /></div></a>
</body>
</html>

Alles anzeigen

Hier ist derzeit das Problem das das Bild nur oben Mittig steht und die Linkfläche sich nach rechts und links weit neben dem Bild ausdehnt.

lauras · 20. Oktober 2010

Hallo,

dein Ansatz ist schon gar nicht so schlecht, nur solltest du das ganze lieber komplett über die Stylesheets lösen. Der div, den du da verwendest, den brauchst du auch eigentlich nicht, du gruppierst ja nichts.

Du hast also den Link um das Bild (ich kürze das jetzt mal ein bisschen ab, die Pfade kannst du dann selbst einfügen):

Code

<a href=""><img src="" alt="" width="" height="" /></a>

Das ist dann deine Grundstruktur, darin fügst du die Pfade, den Alternativtext des Bildes und Höhe und Breite ein - das ist wichtig, damit bei langsamem Laden der Platz für das Bild reserviert wird, auch wenn es noch nicht geladen ist.

Jetzt willst du das ganze zentrieren. Da das ja, wie ich aus deiner Beschreibung nehme, das einzige Element auf der Site ist, machen wir es uns einfach und machen das img-Element vom inline zum block-Element:

Code

a img {
display: block;
margin: 0 auto; }

und zentrieren es dann über die Zentreirungstechnik für block-Elemente, margin: 0 auto; d.h. automatische Außenabstände für das Element, die dann gleich breit sid. Damit ist das Element zentriert.

Gruß
Laura

Porkee · 20. Oktober 2010

Danke schonmal für die nette antwort

Ich habe das jetzt alles wie du sagtest umgesetzt

HTML

<!doctype html>
<html>




<head>
    <title>Startseite</title>
 <style type="text/css">
<!--
body {
    background:Black;
}
a img {
display: block;
margin: 0 auto; }
-->
</style>
    <meta charset="ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="design.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>
<a href="E:\WoWWebseite\start.htm"><img src="E:\WoWWebseite\WOWLogo.png" alt="Weiter zu Vanquisher" width="450" height="300" border="0" /></a>
</body>
</html>

Alles anzeigen

Der Link im Bild ist jetzt auch richtig! Zentriert ist es auch aber leider nur oberhalb wollte es iwie genau in die Mitte bekommen also von oben/unten und den seiten gesehen.

Hab den wert jetzt nochmal zusätzlich für margin-top:20%; angegeben ist recht mittig aber das ist bestimmt nicht die beste lösung

Basi · 20. Oktober 2010

Das ist ganz einfach wenn du weißt wie breit und hoch dein Bild ist:

Code

<img src="" />

Code

img {
  display: block;
  position: relative;
  left: 50%;
  margin-left: -500px;
  top: 50%;
  margin-top: -500px;
}

Ich gehe jetzt davon aus das Bild ist 1000px breit und hoch, bei margin-left und margin-top musst du jeweils den Negativwert der Hälfte des Bildes eintragen.

Linkbild Zentrieren ??

Jetzt mitmachen!

Teilen