Linkbild Zentrieren ??

Gute Homepagetools - Zusätze für Eure Page - Page optimieren und lade Zeit prüfen - spezielle Fragen zu Eurer Page - Problemlösungen

Moderator: lauras

Beiträge bitte im neuen Forum

Linkbild Zentrieren ??

Beitragvon Porkee » Mittwoch 20. Oktober 2010, 12:30

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:

Code: Alles auswählen
<!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>


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.
Porkee
HTML-Suchnase
 
Beiträge: 2
Registriert: Mittwoch 20. Oktober 2010, 11:47

Re: Linkbild Zentrieren ??

Beitragvon lauras » Mittwoch 20. Oktober 2010, 12:46

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: Alles auswählen
<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: Alles auswählen
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
Benutzeravatar
lauras
Moderator
 
Beiträge: 2114
Registriert: Samstag 3. November 2007, 22:08

Re: Linkbild Zentrieren ??

Beitragvon Porkee » Mittwoch 20. Oktober 2010, 13:11

Danke schonmal für die nette antwort :)

Ich habe das jetzt alles wie du sagtest umgesetzt

Code: Alles auswählen
<!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>


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
Porkee
HTML-Suchnase
 
Beiträge: 2
Registriert: Mittwoch 20. Oktober 2010, 11:47

Re: Linkbild Zentrieren ??

Beitragvon Basiii » Mittwoch 20. Oktober 2010, 13:20

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

Code: Alles auswählen

  <img src="" />


Code: Alles auswählen
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.
Benutzeravatar
Basiii
HTML-Acrobat
 
Beiträge: 1139
Registriert: Dienstag 12. Januar 2010, 13:57


Beiträge bitte im neuen Forum

Zurück zu Homepage

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron