• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anfänger 1. Homepage

X

xeon

Neues Mitglied
Hi,

ich habe beschlossen nun auch mal HTML zu lernen...

Bin gerade dabei meine 1. Homepage zu erstellen... und irgendwie komme ich nicht mehr richtig weiter...

mein code:

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">
<head>

 <style>
   a       { display:block;
             background-image:url(Index_07.gif);
             width:179px; height:68px; left:50px;}
   a:hover { background-image:url(Index_07_2.png); }
 </style>
 
  <style>
   b       { display:block;
             background-image:url(Index_09.gif);
             width:179px; height:68px; top:350px; }
   b:hover { background-image:url(Index_09_2.png); }
</style>

  <style>
   c       { display:block;
             background-image:url(agb.png);
             width:500px; height:120px; top:350px; }
        
</style>

  <style>
   d       { display:block;
             background-image:url(agb_1.png);
             width:75px; height:26px; top:350px; }
   d:hover { background-image:url(agb_2.png); }
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beispiel</title>
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p><img src="probe.png" alt="" width="1000" height="600" /></p>
<div style="position:absolute; top:595px; left:23px;">
<a href="http://www.google.de"></a></div>
<div style="position:absolute; top:666px; left:23px;">
<b href="http://www.google.de"></b></div>
<div style="position:absolute; top:562px; left:275px ">
<c href="http://www.google3.de"></c></div>
<div style="position:absolute; top:660px; left:852px;">
<d href="http://www.google2.de"></d></div>
</body>
</html>
Wie ihr seht habe ich einige Buttons im Einsatz, die beim Drüberfahren nen schönen Effekt zeigen...

Mit Firefox funktioniert alles bestens, jedoch im IE werden die letzen 2 Buttons nicht angezeigt. Ich vermute das liegt am <c href und <d href...

Hatt jemand ne Idee wie ich dies Lösen kann? Sollte auf jeden Fall auf dem IE und Firefox funktionieren...

grüße
xeon
 
Danke!

Habe nun den Code etwas geändert. Nun wird alles außer das 4. Bild auch im IE angezeigt.
Finde aber einfach keine Lösung wie ich das mit dem <d href ändere. Wenn ich <a href schreibe kommt an die Stelle des 4. Bildes auch das 1.Bild..^^

Kann mir vielleicht jemand dies anhand des Quellcodes erklären oder mir einen genauen link über dieses Verhalten schicken?


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">
<head>

 <style>
   a       { display:block;
             background-image:url(Index_07.gif);
             width:179px; height:68px; left:50px;}
   a:hover { background-image:url(Index_07_2.png); }
 </style>
 
  <style>
   b       { display:block;
             background-image:url(Index_09.gif);
             width:179px; height:68px; top:350px; }
   b:hover { background-image:url(Index_09_2.png); }
</style>

  <style>
    #agb{
         background-image: url(agb.png);
         width: 500px;
         height: 120px;
}

</style>

  <style>
   d       { display:block;
             background-image:url(agb_1.png);
             width:75px; height:26px; top:350px; }
   d:hover { background-image:url(agb_2.png); }
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beispiel</title>
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p><img src="probe.png" alt="" width="1000" height="600" /></p>
<div style="position:absolute; top:595px; left:23px;">
<a href="http://www.google.de"></a></div>
<div style="position:absolute; top:666px; left:23px;">
<b href="http://www.google.de"></b></div>
<div id="agb" style="position:absolute; top:562px; left:275px;">
</div>
<div style="position:absolute; top:660px; left:852px;">
<a href="http://www.google2.de"></a></div>
</body>
</html>

Danke für eure Hilfe schonmal!

grüße
xeon
 
Ich hab dir einen sehr guten Link gegeben, den musst du nur durchsehen. Da kommt dann im CSS-Teil auch die Verwendung von IDs und Klassen, damit kannst du deine Links unterschiedlich formatieren.

<b href> ist brigends noch immer falsch, wenn es ein Link sein soll, muss es ein <a> sein.
 
Hallo.

Deine margin Angaben stimmen auch nicht.
Lies dir mal das hier durch: Margin - Aussenabstände.

Wenn das eine Navigation sein soll tu dir einen Gefallen und lerne es lieber gleich richtig.
Für eine Navigation benutzt man eine Liste und keine Divs.

Gruss
Elroy
 
schreibe dein css auch besser ein eine seperate css-datei. das macht deinen code wesentlich übersichtlicher
 
Bin auch gerade Anfänger, hatte auch Mühe damit
Ist aber gar nicht so schwer, ein link ist immer <a>
wenn du aber die Links verschieden formatieren möchtest geht dies mit klassen.
du kannst also zum beispiel dies machen

<a href="aseite.html" class="a">a</a>
<a href="bseite.html" class="b">a</a>
<a href="cseite.html" class="c">a</a>

danach machst du in einer externen css date, oder im <style> abschnitt folgendes
a.a{border: 1px white solid}
a.b{border: 1px white dotted}
a.c{border: 1px white dashed}

a.a:hover{border: 1px black solid}
a.b:hover{border: 1px black dotted}
a.c:hover{border: 1px black dashed}

Ich hoffe ich konnte dir damit helfen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben