CSS Probleme beim Bild verlinken

PuITutorials · 28. Dezember 2011

Hallo,

Ich weiß, das diese Frage war. sehr dumm rüberkommt aber ich bin ein Anfänger und weiß einfach nicht mehr weiter und ja ich hab schon gegoogelt nur das ist alles irgentwie anders!

Code:

<div id="videos"></div><div id="forum"></div><div style="clear: both;"></div></div>

Die id videos und forum sind einfach Bilder hier der Css Code

Code:

#videos {
margin: 10px 10px 10px 20px;
background: url(../bilder/videos.png);
width: 465px;
height: 70px;
float: left;
overflow: auto;
}

#forum {
margin: 10px 0px 0px 10px;
background: url(../bilder/forum.png);
width: 465px;
height: 70px;
float: left;
overflow: auto;
}

Wie kann ich die Bilder jetzt verlinken ?

Gruß

Kausalat · 28. Dezember 2011

Du musst im HTML-Quelltext einen Link erstellen nach dem Schema:

Code:

<div id="videos"><a href="link">Linktext</a></div>

Dies ist semantisch gesehen allerdings ein fragwürdiges Konstrukt. Falls du eine Menüleiste planst, wäre eine ungeordnete Liste (<ul>) angebrachter.

PuITutorials · 28. Dezember 2011

Danke schonmal für deine Hilfe

Dies ist semantisch gesehen allerdings ein fragwürdiges Konstrukt. Falls du eine Menüleiste planst, wäre eine ungeordnete Liste (<ul>) angebrachter.

Ne sind nur zwei Bilder

Ein Problem gibt es aber noch jetzt ist über den Bildern der Text videos.html und nur der ist verlinkt ! Nicht die Bilder !

Hier der Code:

Code:

<div id="videos"><a href="link">videos.html</a></div><div id="forum"><a href="link">Linktext</a></div><div style="clear: both;"></div></div>

Kausalat · 28. Dezember 2011

Anstatt des fragwürdigen div-Containers musst du deine Styles auf das a-Element in jedem Container anwenden (#videos a { ... }). Vergiss dabei die Eigenschaft "display: block;" nicht.

PuITutorials · 28. Dezember 2011

(#videos a { ... })

Muss bei dem ... der Link rein ?

Kausalat · 28. Dezember 2011

Nein, Links werden generell nicht in CSS-Dateien (oder in CSS-Styles innerhalb des <head>-Tags) gepackt, sondern in den HTML-Quelltext. Die Auslassungspunkte stehen für die CSS-Eigenschaften des Elements.

Kompakt zusammengefasst:

Der HTML-Code für den Link könnte (semantisch fragwürdig, aber etwas kompakter ohne div-Suppe) lauten:

Code:

<a href="Linkadresse" id="videos">Linktext</a>

In deine CSS-Datei kommt Folgendes:

Code:

a#videos { 
margin: 10px 10px 10px 20px;
background: url(../bilder/videos.png);
width: 465px;
height: 70px;
float: left;
display: block;
}

Entsprechend analog verfährst du mit deiner zweiten "Linkkachel".

PuITutorials · 28. Dezember 2011

Habs jetzt so nur da ist immernoch nicht das Bild verlinkt sondern nur die Schrift überm Bild

Code:

#videos {
margin: 10px 10px 10px 20px;
background: url(../bilder/videos.png);
width: 465px;
height: 70px;
float: left;
overflow: auto;
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
}

Kausalat · 28. Dezember 2011

Vergleiche bitte mit meiner Ergänzung in meinem Beitrag "über dir". Bei deinem CSS-Quelltext haben sich Klammerfehler eingeschlichen und es fehlt die Anweisung "display: block" ...

Im Übrigen solltest du den gesamten Quelltext deiner Seite von Grund auf "bereinigen". Damit tust du dir bei weiteren Arbeiten an der Seite nur einen Gefallen und lernst nebenbei, dass bei HTML und CSS oft weniger mehr ist

.

Daaron · 28. Dezember 2011

Wieso überhaupt so ein eigenartiges Konstrukt mit CSS-Background? Wenn man Bilder darstellen will, dann gibt es dafür doch das <img>-Element...
Warum nicht einfach:

HTML:

<a href="linkziel.html"><img src="bild1.jpg" width=300 height=100 alt="Beschreibung für Sehbehinderte"></a>

mercsen · 28. Dezember 2011

der weg über das a element ist auf jedenfall der leichtere.....
ansonsten würde ichnoch in #video ein
cursor: pointer;

machen, damit man auch sieht das es sich dort um klickbaren inhalt handelt

Daaron · 28. Dezember 2011

Oder man spart sich das div#video und sagt zur Not nur <a id="video" href="..."></a> (Ja, nix zwischen die Tags) und packt im CSS eben ein

#video
{
display:block; (inline-block wär auch gut)
width: 100px;
height: 100px;
background: url(...)...;
}

ABER: Die Variante über <a><img></a> ist die einzige, die auch bei Textbrowsern, Screenreadern, Braille-Terminals und natürlich Suchmaschinen-Bots korrekt funktioniert, vorausgesetzt das Alt-Attribut des Bilds und nach Möglichkeit auch das Title-Attribut des Ankers beschreibt den Link entsprechend treffend.
Man sollt seine eigenen Seite immer einmal selbst in einem Textbrowser wie Lynx aufrufen um mal zu erkennen, was man da eigentlich für einen Mist gecodet hat.

w0nd4bra · 2. Januar 2012

(Ja, nix zwischen die Tags) ---> dann passiert nichts
&nbsp dazwischen

Suche

CSS Probleme beim Bild verlinken

PuITutorials

Ensign

Kausalat

Gast

PuITutorials

Ensign

Kausalat

Gast

PuITutorials

Ensign

Kausalat

Gast

PuITutorials

Ensign

Kausalat

Gast

Daaron

Fleet Admiral

mercsen

Lt. Commander

Daaron

Fleet Admiral

w0nd4bra

Commander

Ähnliche Themen