Baumstumpf (24.03.2015), Gameboy9 (25.03.2015), Open Thought (26.03.2015), TheRaven (26.03.2015)
-
24.03.2015, 21:10 #1
HTML: Bilder anordnen mit Links?
Hi,
eigentlich dachte ich, ich könnte das, jedoch bin ich momentan am verzweifeln an den Basis-Sachen
Mein Problem ist (ich weiß, es ist noch nicht 100% richtig angeordnet),
ich habe einen div-bereich mit nem hintergrund und positioniere dadrauf mit padding und einer fixed-position bilder.
Diese Bilder sollen einen Link haben.
Auf zwei der Bilder kann ich klicken, auf die restlichen jedoch nicht...
Was mache ich falsch?
HTML-Code:<div style="width:379px; height:586px; background-image: url('images/Person.png'); border: 2px solid;"> <div style="position:fixed; padding-top:45px; padding-left:142px;"><a href="unequip/head"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Head"></a></div> <div style="position:fixed; padding-top:180px; padding-left:142px;"><a href="unequip/torso"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Torso"></a></div> <div style="position:fixed; padding-top:220px;"><a href="unequip/rightHand"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Right Hand"></a></div> <div style="position:fixed; padding-top:220px; padding-left:290px;"><a href="unequip/leftHand"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Left Hand"></a></div> <div style="position:fixed; padding-top:480px; padding-left:142px;"><a href="unequip/feet"><img src="images/figure-empty.png" width="90" height="90" border="0" alt="Feet"></a></div> </div>
Live-Demo: http://web541.asphosting.co.at/Person/
Liebe Grüße
BaumstumpfGeändert von Baumstumpf (24.03.2015 um 21:11 Uhr)
-
24.03.2015, 22:16 #2
- Registriert seit
- 15.11.2011
- Beiträge
- 6.210
- Blog Entries
- 5
Thanked 9.132 Times in 3.006 PostsAW: HTML: Bilder anordnen mit Links?
Bitte zukünftig Quellcode immer direkt hier zusammen mit Screenshots einfügen und eigene Seiten maximal als zusätzliche Live-Demo verwenden. Sonst ist der Thread nutzlos sobald die Seite in einigen Tagen oder spätestens Wochen von dem Space gelöscht wird oder dieser aus anderen Gründen nicht mehr erreichbar ist. Ich habe deinen Beitrag daher entsprechend überarbeitet. Des weiteren ist es grundsätzlich immer empfehlenswert ein korrektes HTML-Grundgerüst zu verwenden, da es ohne zu abenteuerlichen Fehlern kommen kann (besonders im IE).
Dein Problem liegen aber woanders: Erst mal legst du mehrere Elemente übereinander, d.H. technisch werden deine Münzen vom Hintergrund verdeckt und sind daher nicht klickbar. Mittels z-index kannst du die Elemente "nach vorne holen", dann können sie auch angeklickt werden.
Auch wenn es grundsätzlich funktioniert solltest du dich aber an ein paar Grundsätze halten, sonst wird dein Code spätestens mit zunehmendem Volumen ein totales Chaos und komplett unwartbar werden: Erst mal sind Redundanzen zu vermeiden, da sie den Code unnötig aufblähen und bei nachträglichen Änderungen einen erheblichen Mehraufwand verursachen. Das style-Attribut von HTML-Elementen ist daher böse, und sollte nur in Ausnahmefällen genutzt werden wenn es wirklich Sinn macht. Zum Beispiel wenn ein einzigartiges Element dynamisch generiert wird und es sich nur um sehr wenig CSS handelt wie etwa eine Höhenangabe. Auch die Width- und Height HTML-Attribute von Bildern sollten möglichst in CSS ausgelagert werden. Um das zu erreichen arbeitet man mit CSS-Klassen/Ids.
Unterzieht man deinen Code mit diesen Kriterien einem Refactoring, könnte das ganze so aussehen:
HTML-Code:<div class="coin-person"> <a class="coin coin-head" href="unequip/head"> <img src="http://web541.asphosting.co.at/Person/images/figure-empty.png" alt="Head"> </a> <a class="coin coin-body" href="unequip/torso"> <img src="http://web541.asphosting.co.at/Person/images/figure-empty.png" alt="Torso"> </a> ... </div>
.coin-person {
width: 379px;
height: 586px;
background-image: url('http://web541.asphosting.co.at/Person/images/Person.png');
border: 2px solid;
}
.coin-person .coin {
position: fixed;
z-index: 9999;
}
.coin-person .coin img {
width: 90px;
height: 90px;
border: 0;
}
.coin-person .coin.coin-head {
margin-top: 45px;
margin-left: 142px;
}
.coin-person .coin.coin-body {
margin-top: 180px;
margin-left: 142px;
}
Der unnötige Div-Container um jede Münze ist wie man sieht weggefallen. Generell sollten unnötige Wrapper vermieden werden, da sie unnötiges HTML erzeugen und dadurch auch die Übersicht verschlechtern. An meinem Beispiel sieht man auch sehr schön, warum man die korrekten Abstandstypen verwenden sollte. Du hattest zur Positionierung den Innenabstand (padding) verwendet. Bewirkt optisch erst mal dasselbe wie der Außenabstand (margin), allerdings gehört der Innenabstand ebenfalls zum Element. Ohne den Wrapper wie in meinem Beispiel würde daher nicht nur die Münze sondern die gesamte Fläche anklickbar werden, wenn padding statt margin verwendet wird:
-
The Following 4 Users Say Thank You to DMW007 For This Useful Post:
-
26.03.2015, 14:04 #3
AW: HTML: Bilder anordnen mit Links?
Sehr gute Erklärung, ich wusste das auch nicht genau.
Ähnliche Themen
-
[HTML Tutorial] #4 - Links & Bilder
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 18.07.2012, 18:26 -
SEO Links
Von Gelöschter Benutzer im Forum WebentwicklungAntworten: 2Letzter Beitrag: 14.07.2012, 18:16 -
[Sammelthread] Ref Links
Von Visorx im Forum OffTopicAntworten: 87Letzter Beitrag: 06.05.2012, 09:39 -
Youtube Links
Von Bushido RH im Forum Fragen & ProblemeAntworten: 1Letzter Beitrag: 07.12.2011, 17:21 -
Windows 7 Icons oben anordnen ?
Von Y zu dem K im Forum WindowsAntworten: 4Letzter Beitrag: 21.11.2011, 20:36
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.