Verlinktes Bild zentrieren (CSS?)

[ssbeyer]

Hallo, meine Frage bezieht sich auf folgendes:

Ich bin dabei ein Intro zu erstellen, wobei das Bild als "weiter" dienen soll, so, wenn ich das Bild ganz normal verlinke & zentriere pickt es aber oben am Rand, wenn ich es jedoch im CSS als Background einbinde, ist es von der Position perfekt, aber den Hintergrund kann ich nicht verlinken :s.

Bitte um Hilfe, danke :)

 

[T4k3C4r3]

Verlinke doch einfach die Div

<a href="#"> <div> </div> </a>

~T4k3C4r3

 

[ssbeyer]

Danke für deine Antwort :)
aber wie meinst du das genau ?
ich hab doch garkeine div id drinnen?

 

[T4k3C4r3]

Du kannst der Div ja eine ID geben:

<a href="#"> <div id="DeineID"> </div> </a>

 

[ssbeyer]

ok also im html ist es so :

<div id="main">
<a href="Index.html"> <div><img src="Images/Intro_fertig.jpg" width="1070" height="688" /></div> </a>


</div>

und im css:

div#main {
background: url(Images/Intro_fertig.jpg) fixed no-repeat center;
}

jetzt wird mir das bild 2x verlinkt angezeigt :S

 

[T4k3C4r3]

klar weil du das bild 2 mal einbindest bzw anzeigst: Ich habs dir hier mal makiert:

<div id="main">
<a href="Index.html"> <div><img src="Images/Intro_fertig.jpg" width="1070" height="688" /></div> </a>


</div>

und im css:

div#main {
background: url(Images/Intro_fertig.jpg) fixed no-repeat center;
}

 

[T4k3C4r3]

Aber du hast da viel zu viel Crap-Code drin:

Am einfachsten wäre es ja so:

<a href="Index.html"><img  src="Images/Intro_fertig.jpg" width="1070" height="688"  /></a>

Da brauchst du keine Divs. Du kannst auf Wunsch ja auch noch weitere Css-Attribute hinzufügen.

~T4k3C4r3

 

[ssbeyer]

ok ich hab jetzt im css die div#main rausgelöscht, weil das ganze div möchte ich nicht verlinken, das gefällt mir nicht, gibt es eine andere möglichkeit ? ich hab jetzt folgendes im html:

<a href="Index.html"><img src="Images/Intro_fertig.jpg" width="1070" height="688" /></a>

wenn ich das jetzt auf <center> setze pickt es aber oben am rand :s gibt es noch eine andere möglichkeit ?

 

[T4k3C4r3]

Ich würde das ganze in eine Div packen und dieser anschließend alle nötigen Css Attribute hinzufügen:

HTML:

<div id="buttonWeiter">
    <a href="Index.html"><img src="Images/Intro_fertig.jpg" width="1070" height="688" /></a>
</div>

CSS:

#buttonWeiter {
    margin-top:25px; /*Abstand den du nach oben haben willst (in %, px,...) */
    width:;              /*Breite*/
    height:;             /*Höhe*/
    text-align: center;
    /*
        ...
    */
}

 

[thuemmy]

Wenn ich Dein Anliegen richtig verstanden habe, dann suchst Du dieses hier: Horizontale und vertikale Zentrierung mit CSS

 

[ssbeyer]

vielen lieben dank, ich habe es jetzt geschafft :)
ich habe es so gelöst:

<a href="Index.html"><div style="position:absolute;margin:auto;margin-top:-345px;top:50%;width:100%;vertical-align:middle;text-align:center;">
<img src="Images/Intro_fertig.jpg" alt="Intro" style="height:auto;width:auto;" /></a>

 

[Elroy]

Hallo.

Das ist natürlich wunderbar falsch da ein Link keine Blockelemente enthalten darf und div ist nunmal ein Blockelement.

Warum hast du es nicht so gemacht wie von thuemmy vorgeschlagen?

Gruss
Elroy

 

[T4k3C4r3]

Du solltest die Div auch wieder End-Taggen: </div>

Edit: @Elroy oh dachte es ist erlaub da es eig auch funktioniert. Das es nicht seriös ist, ist mir klar, aber alles im allen hat es normalerweise funktioniert.

Wobei das in diesem Fall keinster weise nötig ist.

 

[Elroy]

dachte es ist erlaub da es eig auch funktioniert.

Ein Layout mit Tabellen zu erstellen funktioniert auch.

Es gibt eben bestimmte Regeln an die man sich halten sollte. Nur weil etwas funktioniert heisst es noch lange nicht das es richtig ist.

Gruss
Elroy