Li-Element mit PDF Verlinkung

lukme

Hallo, ich bin momentan dabei einen Download-Bereich auf meiner Seite einzurichten.

HTML

<h5><strong>Kategorie 1</strong></h5><ul class="download">    <li>Produkt1</li>    <li>Produkt2</li>    <li>Produkt3</li></ul><h5><strong>Kategorie 2</strong></h5><h6 style="padding-left: 30px;"><strong>Überflur</strong></h6><ul class="download">    <li>Produkt 4</li>    <li>Produkt 5</li>    <li>Produkt 6</li></ul>
<style type="text/css">
ul.download {    list-style-type: none;    padding: 0px;    margin: 0px;}
ul.download li {    background-image: url(http://png.findicons.com/files/icons/977/rrze/48/move_waiting_down_alternative.png);    background-repeat: no-repeat;background-size: 24px 24px;     padding-left: 50px;margin-bottom:10px;line-height:24px;}
</style>

Mit Klicken auf die jeweiligen Produkte wird eine PDF gedownloadet. Ich wollte dies mit <a href="..."></a> umsetzen, sodass jeweils das ganze li-Element auf die PDF verlinkt ist mit dem kleinen Downloadbild.
Wie setze ich dies um? Mit <a href> klappt dies bei mir nicht.

Vielen Dank schonmal

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Hallo

Link zu Seite?
Was klappt nicht?

Code

<ul>
<li>
<a href="http://meineseite.net/uploads/pdf1.pdf">PDF 1</a>
</li>
<li>
<a href="http://meineseite.net/uploads/pdf2.pdf">PDF 2</a>
</li>
.
.
.
.
</ul>

Alles anzeigen

wäre ein Beispiel

lukme

Ich weiß nicht, wie ich mein komplettes li-Element mit a href verlinken kann. Also mit dem LI-Background image...

SirEctor

Wenn der ganze LI anklickbar sein soll, musst Du den A-Tag noch per CSS etwas ändern

Code

li a {
  display:block; 
  width: 100%;
  height: ??px;
}

die Höhe musst Du dann noch auswählen.

pixselig

Naja, du musst ja nicht das li-Elemet komplett verlinken, sondern es reicht doch wenn du in das Listenelement einen Link hineinsetzt. Das Listenelement nimmt dann (so nichts anderes dezitiert im Stylesheet angegeben) eh die Grösse des a-Elements an, sodass der Hintergrund des li-Elemets zugleich der Hintergrund des a-Elements wird. Sicherheutshalber, kannst du ja dem a-Element noch ein

Code

display: inline-block;

mitgeben.

Für genauere Hilfe wäre aber ein LINK sehr hilfreich.

PS: SirEctor war schneller ;)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Li-Element mit PDF Verlinkung

Jetzt mitmachen!