Ik ben een website aan het maken waarbij de "content" is opgedeeld in 2 delen. Namelijk "left" en "sidebar". In "left" komt gewoon de inhoud van de site te staan en in "sidebar" heb ik een imagefader staan met daaronder een plaatje (background-image) die als achtergrond voor een menubalk bedoeld is. In die balk moet dan de tekst "Links" komen te staan en daaronder dan de links. Die background-image heb ik in mijn CSS verwerkt. In IE is deze image wel te zien en in FF niet.
Dit is mijn CSS:
Dit is mijn HTML-code:
Waar <h2>Links</h2> staat, daar komt ook de "background-image: images/title2.jpg" te staan. In IE lukt dit maar in FF zie je de afbeelding niet. Weet iemand hoe dit op te lossen valt?
Dit is mijn CSS:
HTML:
#sidebar {
width: 240px;
text-align: center;
min-height: 600px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
padding: 10px;
border-top: none;
}
#sidebar li li {
margin: 0;
padding: 3px 0;
}
<!-- BALK VOOR RECHTERKANT -->
#sidebar li h2 {
height: 36px;
margin: 0;
padding: 10px 0 0 0px;
background: url(images/title2.jpg) no-repeat;
font-size: 18px;
color: #ffffff;
}
#sidebar a:link {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar a:visited {
text-decoration: none;
}
#sidebar li a {
padding-left: 0px;
}
Dit is mijn HTML-code:
HTML:
<div id="sidebar">
<ul>
<li>
<ul>
//Hier staat dan de imagefader, heb ik nu weggelaten
</ul>
</li>
<li>
<h2>Links</h2>
</li>
<li>
<a href="url"><img src="img" width="140" height="140" border="0" style="filter:alpha(opacity=100);"></a>
</li>
<li>
<a href="url"><img src="img" width="140" height="140" border="0" style="filter:alpha(opacity=100);"></a> </li>
</ul>
</div>
Waar <h2>Links</h2> staat, daar komt ook de "background-image: images/title2.jpg" te staan. In IE lukt dit maar in FF zie je de afbeelding niet. Weet iemand hoe dit op te lossen valt?
Laatst bewerkt: