TWNet

The Webdevelopers' Net

Doorgaan naar inhoud

[CSS] Meerdere linkkleuren doen het niet

Stel hier je vragen over (X)HTML, CSS, XML, XSL.
Plaats een reactie

[CSS] Meerdere linkkleuren doen het niet

Berichtdoor Eiersneijer » di okt 31, 2006 13:56

Als ik in IE mijn site open krijg ik de links te zien die ik in een andere div heb gemaakt.

Beetje moeilijk uit te leggen maar hier kun je een beetje zien wat ik bedoel. Het moet er uit komen te zien zoals het nu in FF is, maar IE laat de links zien zoals ze in de linker navigatiebalk staan.

Ik heb gemaakt als een descendant selector, dat de link in een bepaalde div andere waardes krijgt. Maar het werkt voor geen meter :P

HTML:
Code: Selecteer alles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Eiersneijende Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="tosti">      <!-- BEGIN TOSTI -->

<div id="header">        <!-- BEGIN HEADER -->
<img src="images/header.jpg">
</div>                 <!-- EINDE HEADER -->

<div id="bak">

<div id="nav_l_out">    <!-- BEGIN NAV_L_OUT -->

<div id="nav_l_inn">   <!-- BEGIN NAV_L_INN -->
<h2>Main Menu</h2>
<a href="#" id="current">Home</a>
<a href="#">Forum</a>
<a href="#">Contact</a>
<a href="#">Links</a>
<a href="#">Zoek</a>
<a href="#">FAGs</a>
<a href="#">Gebruikerslijst</a>
<h2>&nbsp;</h2>
</div>               <!-- BEGIN NAV_L_INN -->

</div>               <!-- EINDE NAV_L_OUT -->

<div id="rechts">        <!-- BEGIN RECHTS -->

<div id="inhoud">       <!-- BEGIN INHOUD -->
<span class="inhoud">
<table width="100%">
   <tr>
      <td width="50%"><h2>Laatste Nieuws</h2></td>
      <td width="50%"><h2>Laatste Reviews</h2></td>
   </tr>
   <tr>
      <td><ul>
            <li><a href="#">Belphegor - nieuw video</a></li>
            <li><a href="#">Therion - Nieuwe zanger gevonden</a></li>
            <li><a href="#">Primal Fear - Werkt aan nieuw album</a></li>
            <li><a href="#">In Flames - Gitarist neemt pauze</a></li>
            <li><a href="#">Unleash The Fury is gitarist kwijt</a></li>
         </ul>
      </td>
      <td><ul>
            <li><a href="#">Above The Weeping World [Insomnium]</a></li>
            <li><a href="#">With Oden On Our Side [Amon Amarth]</a></li>
            <li><a href="#">Pariah [Naglfar]</a></li>
            <li><a href="#">Resurrection Through Carnage [bloodbath]</a></li>
            <li><a href="#">The Burning Halo [Draconian]</a></li>
         </ul>
      </td>
   </tr>
</table>
</span>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>                <!-- EINDE INHOUD -->

<div id="nav_r_out">   <!-- BEGIN NAV_R_OUT -->

<div id="nav_r_inn">   <!-- BEGIN NAV_R_INN -->
<h2>Rechts</h2>
m<br>
e<br>
n<br>
u<br>
<h2>&nbsp;</h2>
</div>               <!-- EINDE NAV_R_INN -->

</div>                <!-- EINDE NAV_R_OUT -->

</div>               <!-- EINDE RECHTS -->

</div>
<div id="voet">         <!-- BEGIN VOET -->
<p>&copy; Eiersneijer.net 2006</p>
</div>               <!-- EINDE VOET -->

</div>
</body>
</html>


En de CSS:
Code: Selecteer alles
/******************/
/* DIV'S TEMPLATE */
/******************/

#tosti{
   width:902px;
   text-align:left; 
   margin: 0 auto;
}

#header{
   background-color:#010101;
   margin-bottom: 10px;
}

#bak{
   background-color:#242424;
   float:left;
   border: 1px solid #010101;
   margin-bottom: 10px;
}

#rechts{
   width:725px;
   float:right;
   margin-bottom: 10px;
   background-color: #242424;
}

#nav_l_out{
   width:175px;
   float:left;
   background-color:#242424;
   margin-bottom:10px;
}

#nav_l_inn{
   width:165px;
   border: 1px solid #010101;
   margin: 5 5;
   color: #9F9F9F;
}

#nav_r_out{
   width:175px;
   float:right;
   background-color:#242424;
}

#nav_r_inn{
   width:165px;
   border: 1px solid #010101;
   margin: 5 5;
}

#inhoud{
   background-color: #242424; 
   float: left;
   width:546px;
   padding: 0 2;
}

#voet{
   border: 1px solid #010101;
   background-color:#242424;
   background-image: url(../images/voet.gif);
   background-repeat: repeat-x;
   clear:both;
   text-align: center;
   font-family: Times New Roman;
   font-size: 16px;
}

/***************/
/****LAY-OUT****/
/***************/

body{
   font-family: Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   margin:0;
   padding:0;
   text-align:center;
   color: #FFFFFF;
   background-color: #242424;
   background-image: url(../images/body_bg.jpg);
   background-attachment: fixed;
}

/***************/
/***TEXT ENZ.***/
/***************/

#inhoud a:link, a:visited{
   color : #AF8C62;
   text-decoration : none;
   font-weight: normal;
   border: 0px;
}

#inhoud a:hover {
   color : #E1B683;
   text-decoration : none;
   font-weight: normal;
   border: 0px;
}

#nav_l_inn a:link, a:visited{
   display: block;
   width: 163;
   text-indent: 10px;
   text-decoration: none;
   font-weight: bold;
   font-size: 11px;
   color: #9F9F9F;
   border-bottom: 1px solid #010101;
   margin-top: 3px;
   padding-bottom: 2px;
}

#nav_l_inn a:hover{
   text-indent: 15px;
   text-decoration: none;
   font-weight: bold;
   font-size: 11px;
   color: #CFCFCF;
   border-right: 2px solid #A22700;
}

#nav_l_inn a:hover#current{
   text-indent: 15px;
   text-decoration: none;
   font-weight: bold;
   font-size: 11px;
   color: #CFCFCF;
   border-right: 2px solid #A22700;
}

#nav_l_inn #current{
   display: block;
   width: 163;
   text-indent: 10px;
   font-weight: bold;
   font-size: 11px;
   color: #A22700;
   border-right: 2px solid #A22700;
   border-bottom: 1px solid #010101;
}

h2{
   color: #DCDCDC;
   background-color: #242424;
   background-image: url(../images/balk.gif);
   background-repeat: repeat-x;
   text-align: center;
   font-weight: bold;
   font-size: 11px;
   font-family: Geneva, Arial;
   margin: 5 2 2 2;
   padding-top: 3px;
   padding-bottom: 5px;
}

/***************/
/****LIJSTEN****/
/***************/

li{
   font-size : 11px;
   list-style: url(../images/pijl.gif);
   line-height: 14px;   
}

ul{
   margin: 2px;
   padding-left: 18px;
   list-style: none;
}


Hopelijk weet hier iemand hoe dit zit![/code]
Eiersneijer
 
Berichten: 35
Geregistreerd: di okt 31, 2006 12:44
Omhoog

Berichtdoor AtleX » di okt 31, 2006 14:05

Wil je nog een keer uitleggen wat je precies bedoelt, want ik zie zo in IE en FF geen verschil. :)
Avatar gebruiker
AtleX
 
Berichten: 147
Geregistreerd: za okt 28, 2006 9:35
Omhoog

Berichtdoor Eiersneijer » di okt 31, 2006 14:30

Nou, als je hem opent in Firefox krijgen de links in het midden een geel/goude kleur. Die kleur heb ik hier ingesteld:

Code: Selecteer alles
#inhoud a:link, a:visited{
   color : #AF8C62;
   text-decoration : none;
   font-weight: normal;
   border: 0px;
}

#inhoud a:hover {
   color : #E1B683;
   text-decoration : none;
   font-weight: normal;
   border: 0px;
}


zodat het alleen in de div met id inhoud die links krijgt.

Het menu links bestaat ook uit links die hier staan:

Code: Selecteer alles
#nav_l_inn a:link, a:visited{
   display: block;
   width: 163;
   text-indent: 10px;
   text-decoration: none;
   font-weight: bold;
   font-size: 11px;
   color: #9F9F9F;
   border-bottom: 1px solid #010101;
   margin-top: 3px;
   padding-bottom: 2px;
}

#nav_l_inn a:hover{
   text-indent: 15px;
   text-decoration: none;
   font-weight: bold;
   font-size: 11px;
   color: #CFCFCF;
   border-right: 2px solid #A22700;
}


Nu doet Firefox het precies zoals het moet, maar IE laad in de inhoud-div de kleuren van nav_l_inn. Het rare is dan dat hij de hover wel goed laad.

Ik hoop dat je nu snapt wat ik bedoel :)
Eiersneijer
 
Berichten: 35
Geregistreerd: di okt 31, 2006 12:44
Omhoog

Berichtdoor AtleX » di okt 31, 2006 14:36

Je CSS bevat een aantal foutjes, en ik vermoed dat het daaraan ligt.
Avatar gebruiker
AtleX
 
Berichten: 147
Geregistreerd: za okt 28, 2006 9:35
Omhoog

Berichtdoor AtleX » di okt 31, 2006 14:42

Ik heb het :) Op regel 108 van de CSS heb je het volgende staan:
Code: Selecteer alles
#nav_l_inn a:link, a:visited{

Dat moet het volgende worden:
Code: Selecteer alles
#nav_l_inn a:link, #nav_l_inn a:visited{

Dan werkt het wel. :) De aangepaste CSS (inclusief gefixte validation errors) is hier te downloaden.
Avatar gebruiker
AtleX
 
Berichten: 147
Geregistreerd: za okt 28, 2006 9:35
Omhoog

Berichtdoor Eiersneijer » di okt 31, 2006 14:51

Kijk eens aan! Het werkt!

Mijn eerste \o/ naar TWNet :)

Volgende keer maar eerst valideren voor ik met fouten aankom :)
Eiersneijer
 
Berichten: 35
Geregistreerd: di okt 31, 2006 12:44
Omhoog

Berichtdoor AtleX » di okt 31, 2006 14:53

Het lag nu niet aan de fouten, aangezien browsers bij ontbrekende maatregelen altijd voor pixels kiezen, je had nu gewoon een foutje gemaakt in de CSS zelf. En geloof me, dit soort fouten komen nog best vaak voor. :P En het grootste nadeel is, ze vallen niet op.
Avatar gebruiker
AtleX
 
Berichten: 147
Geregistreerd: za okt 28, 2006 9:35
Omhoog

Berichtdoor Eiersneijer » di okt 31, 2006 14:58

Ja inderdaad, nu dat ik de oplossing zie vind ik het opeens ook heel logisch waarom hij het niet goed deed terwijl ik hier toch al een tijd mee aan het puzzelen was :)
Eiersneijer
 
Berichten: 35
Geregistreerd: di okt 31, 2006 12:44
Omhoog
Plaats een reactie

Keer terug naar (X)HTML & CSS

Wie is er online

Gebruikers op dit forum: Geen geregistreerde gebruikers en 1 gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
phpBB.nl Vertaling
phpBB SEO
cron