Zurück   Webmasterwelt - Webmaster-Forum > Webdesign und Programmierung Forum > HTML & CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1  
Alt 07.12.2011, 08:27
Benutzerbild von Guvoro
Neuer
 
Registriert seit: 07.12.2011
Beiträge: 3
Standard Hyperlink für Grafik - CSS funzt dazwischen?!

Hallo!

Erstmal herzlichen Dank, für dieses tolle Forum!

Ich hab per CSS Bereiche definiert, in die ich mir beliebige Bilder einfügen kann und darunter ist ein Beschriftungsfeld.

Code:
#corp, #indu, #Aspern, #Schoepf, #Malfatti, #Tivoli, #Einsiedelei, #Puffer, #Eipeldauer, #Langobarden, #Rathausplatz {
  float: left;
  width: 50%;
}
#corp-img, #indu-img, #Aspern-img, #Schoepf-img, #Malfatti-img, #Tivoli-img, #Einsiedelei-img, #Puffer-img, #Eipeldauer-img, #Langobarden-img, #Rathausplatz-img {
  background: url(images/pic_2.jpg) no-repeat;
  width: 112px;
  height: 23px;
  float: left;
  margin-right: 18px;
  margin-bottom: 10px;
  text-align: center;
  padding-top: 90px;
  font-size: 9px;
  font-weight: bold;
}
#indu-img {
  background: url(images/pic_3.jpg) no-repeat;
}
#Aspern-img {
  background: url(images/Aspernstr_thumb.jpg) no-repeat;
}
#Schoepf-img {
  background: url(images/Schoepf_thumb.jpg) no-repeat;
}
etc.blabla
Code:
        <div id="Aspern" style="width: 33%">
          <div id="Aspern-img">
          	<span lang="de">
          	<a href="file://///Sbsserver/EigeneDateien/tech3/Meine%20Websites/Aspernstrasse.html">Aspernstraße</a></span></div>
        </div>
      </div>
      <div id="Schoepf" style="width: 33%">
          <div id="Schoepf-img">
          	<span lang="de">
			  <a href="file://///Sbsserver/EigeneDateien/tech3/Meine%20Websites/Schoepfwerk.html">Am Schoepfwerk</a></span></div>
            </div>
etc. blabla
Problem:
Mein Textfeld unter den Bildern, folgt dem gewünschten Hyperlink, doch ich bekomme es einfach nicht gebacken, den Bildern einen Link zuzuweisen (der dann auch tatsächlich funktioniert)!
So schaut das aus:


Also wie schaffe ich es, dass die Bilder auch "klickbar" werden? :-)
Jaja, ein Handgriff und mein Problem ist gelöst - Kann ich mir denken! Bitte kreuzigt mich nicht :P
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
  #2  
Alt 07.12.2011, 10:29
Benutzerbild von jonatan_männchen
Erfahrener
 
Registriert seit: 12.10.2008
Ort: Winterthur (Schweiz)
Beiträge: 87
jonatan_männchen eine Nachricht über MSN schicken jonatan_männchen eine Nachricht über Skype™ schicken
Standard

Du musst den Link bereits auf das Element #Aspern-img legen.
Ich würde dir empfehlen das div-Element #Aspern-img durch einen img-Element zu wechseln und den a-Tag um Das Bild inklusive Text zu legen.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
  #3  
Alt 07.12.2011, 12:06
Benutzerbild von Guvoro
Neuer
 
Registriert seit: 07.12.2011
Beiträge: 3
Standard

Zitat:
Zitat von jonatan_männchen Beitrag anzeigen
Du musst den Link bereits auf das Element #Aspern-img legen.
Das dachte ich mir auch schon. Mein Problem ist nur, dass ich das nicht richtig auf die Reihe bekomme. Kannst du mir deinen Vorschlag vielleicht mittels Codebeispiel etwas näher bringen? Ich wäre dir sehr dankbar.
Mir kommt vor, als hätte ich den blöden Hyperlink schon an jede erdenkliche Stelle des Codes gesetzt. Will nicht funktionieren

Zitat:
Zitat von jonatan_männchen Beitrag anzeigen
Ich würde dir empfehlen das div-Element #Aspern-img durch einen img-Element zu wechseln und den a-Tag um Das Bild inklusive Text zu legen.
Selbiges gilt für deinen zweiten Tipp. Leider bin ich kein Webdesign-Pro oder so...
EDIT: Ok, das mit dem <div> durch <img> ersetzen hab ich doch kapiert
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
  #4  
Alt 14.12.2011, 10:02
Benutzerbild von jonatan_männchen
Erfahrener
 
Registriert seit: 12.10.2008
Ort: Winterthur (Schweiz)
Beiträge: 87
jonatan_männchen eine Nachricht über MSN schicken jonatan_männchen eine Nachricht über Skype™ schicken
Standard

Zitat:
Zitat von Guvoro Beitrag anzeigen
Das dachte ich mir auch schon. Mein Problem ist nur, dass ich das nicht richtig auf die Reihe bekomme. Kannst du mir deinen Vorschlag vielleicht mittels Codebeispiel etwas näher bringen? Ich wäre dir sehr dankbar.
Mir kommt vor, als hätte ich den blöden Hyperlink schon an jede erdenkliche Stelle des Codes gesetzt. Will nicht funktionieren



Selbiges gilt für deinen zweiten Tipp. Leider bin ich kein Webdesign-Pro oder so...
EDIT: Ok, das mit dem <div> durch <img> ersetzen hab ich doch kapiert
Einfach <a href="http://example.com"><img src="foo.jpg" />Dein Text</a>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
  #5  
Alt 14.12.2011, 10:43
Benutzerbild von Guvoro
Neuer
 
Registriert seit: 07.12.2011
Beiträge: 3
Standard

Vielen Dank für deine Tipps! Funzt mittlerweile alles so, wie es soll :-)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
  #6  
Alt 15.12.2011, 06:15
Benutzerbild von wendywu
Neuer
 
Registriert seit: 23.11.2011
Beiträge: 2
Standard

Willkommen bei Partnersuche bei elitedaten.de - Kontaktanzeigen, Chat, Singles, Dating, Flirten
Einfach Verlieben: Elitedaten.de findet kostenlos Ihren Traumpartner. Das Dating-Portal macht Singles zu Paaren.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiTweet this Post!
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
bild, bilder, css, html, hyperlink

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an



Alle Zeitangaben in WEZ +1. Es ist jetzt 09:58 Uhr.