✔ syntaxfehler in div? verzweifelt :-(

angela_hh · 23. April 2005

hallo ihr lieben,
ich versuche verzweifelt hinzubekommen, dass auch meine visited links einen hover-effekt haben. jemand hat es mir "vorgebastelt" und jetzt keine zeit mehr. ich bin motiviert, aber anfängerin. und komme nicht klar. ich zeige euch mal, wie das ausssieht:

/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;
text-align:center;
color:#2F2398;
border-color:#999999;
border-style:inset;
border-width:1;
background-repeat:repeat;
background-image:url(stripe1.gif);

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
background-image: url("stripe1.gif");
}

#sectionLinks a:link, #sectionLinks a:visited{
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("stripe1.gif");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #003399;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: url("stripe.gif");
font-weight: bold;
text-decoration: none;
}
#sectionLinks a:visited{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: url("stripe1.gif");
font-weight: bold;
color:999999;
text-decoration: none;
}

/*#sectionLinks a:hover {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("stripe1.gif");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #003399;
}*/

die html:
<body>
<div id="masthead">
<img border="1" src="image/banner_pur.jpg" width="100%">
<table border="0" cellspacing="1" width="100%">
<tr>

<td><div id="sectionLinks"><a href="index.html">Home</a></div></td>
<td><div id="sectionLinks"><a href="mich.html">(M) ich</a></div></td>
<td><div id="sectionLinks"><a href="touren.html">Touren</a></div></td>
<td><div id="sectionLinks"><a href="hamburg.html">Hamburg</a></div></td>
<td><div id="sectionLinks"><a href="kontakt.html">Kontakt</a></div></td>
<td><div id="sectionLinks"><a href="impressum.html">Impressum</a></div></td>
<td><div id="sectionLinks"><a href="tipps.html">Tipps</a></div></td>
</tr>
<tr>
<td colspan="7"> <p>Hamburg</p>
<p align="center"><b>
</b></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p></td>
</tr>
<tr>

<td><div id="sectionLinks"><a href="index.html">Home</a></div></td>

<td><div id="sectionLinks"><a href="mich.html">(M) ich</a></div></td>
<td><div id="sectionLinks"><a href="touren.html">Touren</a></div></td>
<td><div id="sectionLinks"><a href="hamburg.html">Hamburg</a></div></td>
<td><div id="sectionLinks"><a href="kontakt.html">Kontakt</a></div></td>
<td><div id="sectionLinks"><a href="impressum.html">Impressum</a></div></td>
<td><div id="sectionLinks"><a href="tipps.html">Tipps</a></div></td>
</tr>
</table>
</div>
</body></html>
danke für hilfe
angela

Maik · 23. April 2005

Mal was grundsätzliches:

Innerhalb eines Dokuments / einer Seite darf eine ID nur einmal vergeben werden.
Du hast die ID #sectionLinks in deinem Demo-Source aber 14 mal eingebaut!
In diesem Fall muss eine CSS-Klasse .sectionLinks für die DIV's verwendet werden:

HTML:

<div class="sectionLinks"> ... </div>
<div class="sectionLinks"> ... </div>
<div class="sectionLinks"> ... </div>
<!-- usw. -->

Die Hintergrundgrafik stripe1.gif verwendest du gleichzeitig für unterschiedliche Elemente innerhalb des Elternelements #sectionLinks, das ebenfalls diese Hintergrundgrafik besitzt

Mit diesem (modifizierten) Source-Code funktioniert der :hover-Effekt auch für die :visited-Links.

HTML:

<html>
<head>
<title></title>

<style type="text/css">
<!--
div.sectionLinks
{
margin: 0px;
padding: 0px;
text-align:center;
color:#2F2398;
border-color:#999999;
border-style:inset;
border-width:1px;
}

div.sectionLinks h3
{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

div.sectionLinks a:link, div.sectionLinks a:visited
{
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(stripe1.gif);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #003399;
}

div.sectionLinks a:hover
{
border-top: 1px solid #cccccc;
background-color: #ddeeff;
background-image: url(stripe.gif);
font-weight: bold;
text-decoration: none;
}

div.sectionLinks a:active { }
-->
</style>

</head>
<body>

<div id="masthead">
<img border="1" src="image/banner_pur.jpg" width="100%">

<table border="0" cellspacing="1" width="100%">
<tr>

<td><div class="sectionLinks"><a href="index.html">Home</a></div></td>
<td><div class="sectionLinks"><a href="mich.html">(M) ich</a></div></td>
<td><div class="sectionLinks"><a href="touren.html">Touren</a></div></td>
<td><div class="sectionLinks"><a href="hamburg.html">Hamburg</a></div></td>
<td><div class="sectionLinks"><a href="kontakt.html">Kontakt</a></div></td>
<td><div class="sectionLinks"><a href="impressum.html">Impressum</a></div></td>
<td><div class="sectionLinks"><a href="tipps.html">Tipps</a></div></td>
</tr>
<tr>
<td colspan="7">&nbsp;<p>Hamburg</p>

<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p></td>
</tr>
<tr>

<td><div class="sectionLinks"><a href="index.html">Home</a></div></td>
<td><div class="sectionLinks"><a href="mich.html">(M) ich</a></div></td>
<td><div class="sectionLinks"><a href="touren.html">Touren</a></div></td>
<td><div class="sectionLinks"><a href="hamburg.html">Hamburg</a></div></td>
<td><div class="sectionLinks"><a href="kontakt.html">Kontakt</a></div></td>
<td><div class="sectionLinks"><a href="impressum.html">Impressum</a></div></td>
<td><div class="sectionLinks"><a href="tipps.html">Tipps</a></div></td>
</tr>
</table>
</div>

</body>
</html>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

angela_hh · 23. April 2005

@ michaelsinterface,
dankeschön

was wäre die welt (und vor allem ich) ohne so tolle leute wie dich

nun hab ich was gelernt und kann fröhlich weitermachen
lob lob lob
eine gut gelaunte angela

✔ syntaxfehler in div? verzweifelt :-(

angela_hh

Grünschnabel

Maik

angela_hh

Grünschnabel

Neue Beiträge