Frage zu verlinken mit Bildern

Nic · 31. Dezember 2007

hi hab da mal ne Frage:

ICh hab eine kleine Linksammlung erstellt. Hier muss man auf die Bilder klciken und kann dann auf die anderen Seiten drauf. Wenn ich die Seite mit dem Scriptly Editor teste werden alle Bilder vollständig angezeigt. öffne ich allerdings die Datei seperat und teste die mit einem beliebigen Browser z.b Firefox werden die Bilder nicht richtig angezeigt und sind nur als blaue Striche erkennbar. Hier mal der Quellcode:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>




    <title>Links</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />




    <link href="style.css" type="text/css" rel="stylesheet" />







</head>




           <style type="text/css">
<!--







body {
  color:#66CCFF;
  font-size:13pt;
  font-family:Comic Sans MS, "Times New Roman", sans-serif;
}




-->
</style>







  <hr> <a href="index.html">Startseite</a> <a href="&uuml;ber_mich.html">Ueber mich</a> <a href="&uuml;ber_meine_freundin.html">&Uuml;ber meine freundin</a> <a href=" Pics von uns ^^.html"> Pics</a> <hr />







<body background=http://www.wallpaper-area.to/wallpaper/13/2641/Art_by_ShOcKrOcKeR_004.jpg </body>




  <body>




    <h1> <font color=#66CCFF> Linksammlung: </font> </h1>
    Klickt einfach auf die Bilder. Ihr werdet dann schon weitergeleitet. (Wenn es etwas dauert habt bitte geduld. Danke)
  </body>
            <div style="position: absolute; top: 300px; right: 200px; left: 25px;" >
         <a href="http://www.html-seminar.de/" target="_blank">
 <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/html-seminar.jpg" width="474" height="66" alt=""
 width="474" height="66" border="1"
 alt="html-seminar.de - jetzt HTML lernen" />
 </a> </div>










  <div style="position: absolute; top: 300px; right: 90px; left; 300px;">
    <a href="http://www.djsiro.de/" target="_blank">
     <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/djsiro.jpg" alt=""
     border=1
     alt="" />
     </a> </div>







  <div style="position: absolute; top: 350px; right: 90px; left; 300px;">
    <a href="http://www.djsiro.de/" target="_blank">
     <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/shadowstream.jpg" alt=""
     border=1
     alt="" />
     </a> </div>




  <div style="position: absolute; top: 450px; right: 300px; left; 300px;">
    <a href="http://www.german-bash.org/" target="_blank">
     <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/Hplogo2.jpg" alt=""
     border=1
     alt="" />
     </a> </div>




               <div style="position: absolute; top: 650px; right: 200px; left: 25px;" >
         <a href="http://www.hardnheavys.de/" target="_blank">
 <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/logo.sm.jpg"  alt=""
  border="1"
 alt="" />
 </a> </div>




   <div style="position: absolute; top: 625px; right: 200px; left; 90px;">
      <body> Links geht es zu: Hard'n Heavys. Rechts geht es zu: myblog (von Julia^^) </body>
      </div>




   <div style="position: absolute; top: 650px; right: 25px; left; 200px;">
    <a href="http://www.myblog.de/juli-lein" target="_blank">
     <img src="D:/Bilder/Herzen_050.jpg" alt=""  width="100" height="100"
     border=1
     alt="" />
     </a> </div>




</html>

Alles anzeigen

Foster · 1. Januar 2008

Sieht ja schick aus, deine Seite

Was die Bilder betrifft:
Möglicherweise sind sie einfach falsch verlinkt, weshalb sie auch garnicht angezeigt werden können.
Du solltest den Pfad zu deinen Bildern auch immer relativ angeben, also nur <img src="bild.jpg" />, wenn das Bild im gleichen Ordner liegt, wie die HTML-Datei, die darauf zugreift. Liegt das Bild nicht im gleichen Ordner sollte es in den HTML-Ordner, oder in einen Unterordner davon verschoben werden (Code wäre dann zB <img src="bilder/bild.jpg" />).

Noch andere kleine Verbesserungen in deinem Code:

right: 90px; left; 300px;
Ergibt keinen Sinn, weil das Bild dann eine ganz bestimmte Größe bräuchte um genau die Abstände zu den Rändern zu haben. Und das ist von der Bildschirmauflösung abhängig und damit ganz unterschiedlich.
Also immer nur einen Wert in x- (links oder rechts) und einen in y-Richtung (oben oder unten) angeben.

Wie schon gesagt Bilder immer relativ verlinken, damit, wenn du das Projekt ins Netz lädst noch alles beisammen ist und möglichst auch vermeiden Bilder von andren Webseiten zu verweden. Das verstößt 1. möglicherweise gegen ein Copyright und kann teuer für dich werden und 2. kann das Bild auf der Ziel-URL gelöscht werden und ist somit bei dir nicht mehr sichtbar.

<head> und <body> sind bei dir etwas falsch eingesetzt.
CSS-Angaben, zB kommen mit in den Head.
Direkt nach dem </head> kommt der <body>, ohne irgendwas dazwischen und dein doppeltes <body> ist auch nicht nötig.
Das <body>-Tag ohne weiter Angaben drin kannst du vollkommen weglöschen.

Bei folgendem Code:

Code

<div style="position: absolute; top: 300px; right: 200px; left: 25px;" > 
         <a href="http://www.html-seminar.de/" target="_blank"> 
 <img src="C:/Dokumente und Einstellungen/Administrator/Desktop/html_pics/html-seminar.jpg" width="474" height="66" alt="" 
 width="474" height="66" border="1" 
 alt="html-seminar.de - jetzt HTML lernen" /> 
 </a> </div>

Hast du für das Bild jeweils 2 mal width="", 2 mal height="" und 2 mal alt="" verwendet. Soetwas solltest du also auch besser vermeiden. Es kommt dabei zwar vielleicht nicht zu irgendwelchen Fehlern in der Anzeige aber unsauberes HTML ist es trotzdem

Wegen deinem eigentlichen Problem, solltest du also mal checken, ob die Bild-Pfade richtig sind, oder noch besser gleich die Bilder in den gleichen Ordner packen und den Pfad relativ angeben.

Gruß, Foster

Nic · 7. Januar 2008

hi hab grade mal schnell reingeschaut.
also vom iexplorer werden die bilder exakt dargestellt vom fireox nicht. aber denke trotzdem, dass das an was anderem liegt.
ich werds schon rausfinden... macht ja spaß
danke für deine Tipps die werd ich mal alle ausprobieren kann ja nicht schaden nur helfen
und noch danke für dein nettes kompliment zur Seite
ich stelle sie vor sobald alles fertig ist. wird aber noch was dauern, da ich nur am Wochenende und das abends Zeit dafür hab.
wegen Schule und anderen Dingen...

Danke erstmal & bis bald

N!Ci

Frage zu verlinken mit Bildern

Jetzt mitmachen!

Teilen