✔ Wie muss ich meinen html code schreiben?

A

Alemdar_123

Hey Leute ich designe Myspace Seiten und ich habe ein problemm ich war letzens auf der seite eines Musikers aus der USA und als ich mit meiner Maus über den Add, Mail, Photos usw button drüber ging hat die Farbe sich verändert ich weiß das es ein html code ist aber ich weiß nicht wie ich es schreiben soll , ich zeige euch mal eine beispielseite : http://www.mdepict.com/a3layouts/0002/xl.html direkt unter dem Header Banner sind die Add, Mail, Photos usw buttons

ich danke jetzt schonmal für eure hilfe

lg
 
Hi,

das ist eher eine Frage für's CSS-Forum.

Mein Tutorial CSS-Rollover beschäftigt sich mit dem Tauschen der Hintergrundbilder von Links, was in der genannten Seite ebenfalls der Fall ist.

Dort kommt dem Stylesheet zufolge die vorgestellte Methode "CSS-Rollover mit background-position" zum Einsatz, bei der das Hintergrundbild beim Hovern entsprechend neu positioniert wird - Stichwort: "CSS Sprites".

Siehe z.B. das Hintergrundbild http://www.mdepict.com/a3layouts/0002/navigation/b_add.png für den Menüpunkt "Add" und der dazugehörige CSS-Code:
CSS: 
#add {
display:block;
background-position:top left;
 width: 187px;
 height: 148px;
 background: url("navigation/b_add.png");
}
#add:hover {background-position: top right;}

mfg Maik
 
hey maik ich hatte jetzt eine frage den code was du mir jetzt aufgeschrieben hast ist aber nicht der ganze oda ?
könntest du mir vielleicht den code mal aufschreiben so das es genau wie bei dem us künstler klappen tut


lg
 
Eines voraus: bitte beachte unsere Netiquette (Nr.15) bzgl. der erwünschten Groß- und Kleinschreibung - vielen Dank! :)

Ich hab nur einen Auszug des Stylesheets gezeigt.

Der Quellcode der Seite ist auch für dich frei zugänglich, um ihn zu studieren, und die interessanten Passagen herauszukopieren. Wo ist hier also das Problem?

mfg Maik
 
Der Osterhase war eben zu Besuch ;-)

  • CSS-Code:
CSS: 
#add {
display:block;
background-position:top left;
 width: 187px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_add.png");
}
#add:hover {background-position: top right;}


#mail {
display:block;
background-position:top left;
 width: 188px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_mail.png");
}
#mail:hover {background-position: top right;}


#pics {
display:block;
background-position:top left;
 width: 186px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_pics.png");
}
#pics:hover {background-position: top right;}


#fav {
display:block;
background-position:top left;
 width: 189px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_fav.png");
}
#fav:hover {background-position: top right;}
  • HTML-Code:
HTML: 
<table width="749" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="187"><a id="add" href="http://www.mdepict.com/" target="_blank" title="Add"></a></td>
          <td width="188"><a id="mail" href="http://www.mdepict.com/" target="_blank" title="Mail"></a></td>
          <td width="186"><a id="pics" href="http://www.mdepict.com/" target="_blank" title="Pics"></a></td>
          <td width="188"><a id="fav" href="http://www.mdepict.com/" target="_blank" title="Fav"></a></td>
        </tr>
</table>

Zur Analyse des Quellcodes von Webseiten empfehle ich dir diese Firefox-Erweiterungen:

mfg Maik
 
Hey Maik ich habe dein Code grad eingefügt aber es klappt nicht ich habe erst CSS Code 1 danach Html Code 2 dadrunter eingefügt aber es hat nicht geklappt,woran könnte es liegen.

lg
 
Wohl falsch eingefügt ;-)

Dieser Code funktioniert einwandfrei:
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>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-04-01" />

<title>tutorials.de</title>

<style type="text/css">
#add {
display:block;
background-position:top left;
 width: 187px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_add.png");
}
#add:hover {background-position: top right;}
 
 
#mail {
display:block;
background-position:top left;
 width: 188px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_mail.png");
}
#mail:hover {background-position: top right;}
 
 
#pics {
display:block;
background-position:top left;
 width: 186px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_pics.png");
}
#pics:hover {background-position: top right;}
 
 
#fav {
display:block;
background-position:top left;
 width: 189px;
 height: 148px;
 background: url("http://www.mdepict.com/a3layouts/0002/navigation/b_fav.png");
}
#fav:hover {background-position: top right;}
</style>

</head>
<body>

<table width="749" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="187"><a id="add" href="http://www.mdepict.com/" target="_blank" title="Add"></a></td>
          <td width="188"><a id="mail" href="http://www.mdepict.com/" target="_blank" title="Mail"></a></td>
          <td width="186"><a id="pics" href="http://www.mdepict.com/" target="_blank" title="Pics"></a></td>
          <td width="188"><a id="fav" href="http://www.mdepict.com/" target="_blank" title="Fav"></a></td>
        </tr>
</table>

</body>
</html>


mfg Maik
 
Mit den beiden Screenshots kann ich herzlich wenig anfangen.

Gibt's auch einen Link zu der Seite?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück