Des liens "bouffent" des autres...why?

Question

dups

22 Feb 2006 à 09:35

Salut,

J'arrive à la findu codage d'un site, et je m'aperçois que les lien par défaut sont mal interprété.

Les liens "#navcontainer" domine mes liens banales de mes pages...
Pour un peu plus de clarté, voici le code.

Smiley biggol


<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>
      Daniel _ Gabarit
    </title>
    <link href="daniel.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="global">
	<h1 id="top"></h1>
      <!-- global-->
      <div id="header">
        <!-- header-->
        <div id="bandeau_logo">
          <div class="logo" >
            <a href="http://www.auto-ecole-daniel.ch">
              <img alt="logo auto-école Daniel Lausanne" title ="logotype de Daniel de Lausanne"  width="134" height="94"  src="images/logo.gif"/></a>
          </div>
          <h3 id="reference">
            Téléphonez-nous? 
            <br />
            079 606 14 34 </h3>
        </div>
        <div id="menu">
          <div id="tabs10">
            <ul>
              <li>
              <a href="#" title="accueil">
                <span>
                  ACCUEIL
                </span></a></li>
              <li>
              <a href="#" title="moniteurs">
                <span>
                  MONITEURS
                </span></a></li>
             <li>
                  
              <a href="#" title="cours">
                <span>
                  COURS</span></a></li>
              <li>
              <a href="#" title="tarifs">
                <span>
                  TARIFS
                </span></a></li>
              <li>
              <a href="#" title="boutique">
                <span>
                  BOUTIQUE</span></a></li>
              <li>
              <a href="#" title="contact">
                <span>
                  CONTACT
                </span></a></li>
              <li>
              
            </ul>
          </div>
        </div>
        <div id="image">
        </div>
      </div>
      <!-- fin header-->
      <!-- contenus droite-->
      <div id="contenant">
        <!-- contenus gauche-->
        <div id="contenus">
          <a name="contenus"></a>
          <div class="colonne_gauche_titre">
            <h2>Général</h2>
          </div>
		  
		  <div id="colonnegauche">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tempor, neque sit amet lobortis blandit, justo arcu vehicula augue, in vulputate dui sem non sem. Praesent risus neque, aliquet ac, blandit et, vulputate sed, lectus. Suspendisse vel purus et felis commodo ultricies. Integer tristique ante eget elit. Cras dignissim nonummy orci. Duis blandit. In id risus et nibh imperdiet auctor. Cras vestibulum mauris id turpis. Donec placerat erat ac pede. Sed suscipit hendrerit mi. Duis quam. Pellentesque eu lectus imperdiet lectus lobortis luctus. Donec ullamcorper sagittis sapien. Sed quis nibh. Phasellus dignissim, sem vitae fermentum pulvinar, massa sem feugiat lorem, ut semper nulla enim ut sapien. </p>
          
        </div>
        <div id="colonnedroite">
		
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tempor, neque sit amet lobortis blandit, justo arcu vehicula augue, in vulputate dui sem non sem. Praesent risus neque, aliquet ac, blandit et, vulputate sed, lectus. Suspendisse vel purus et felis commodo ultricies. Integer tristique ante eget elit. Cras dignissim nonummy orci. Duis blandit. In id risus et nibh imperdiet auctor. Cras vestibulum mauris id turpis. Donec placerat erat ac pede. Sed suscipit hendrerit mi. Duis quam. Pellentesque eu lectus imperdiet lectus lobortis luctus. Donec ullamcorper sagittis sapien. Sed quis nibh. Phasellus dignissim, sem vitae fermentum pulvinar, massa se<a href="#">m feugiat </a>lorem, ut semper nulla enim ut sapien. </p>
    
</div> 

 <div class="ancre"> <a href="#top">Haut de page</a> </div>
           
            
         <div class="clr"> </div>
      
          <div class="colonne_gauche_titre">
		
			<h1 id="sensibilisation"></h1>
            <h2>Sensibilisation</h2>
          </div>
		  <div class="colonnelarge">
		  <p>
		  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tempor, neque sit amet lobortis blandit, justo arcu vehicula augue, in vulputate dui sem non sem. Praesent risus neque, aliquet ac, blandit et, vulputate sed, lectus. Suspendisse vel purus et felis commodo ultricies. Integer tristique ante eget elit. Cras dignissim nonummy orci. Duis blandit. In id risus et nibh imperdiet auctor. Cras vestibulum mauris id turpis. Donec placerat erat ac pede. Sed suscipit hendrerit mi. Duis quam. Pellentesque eu lectus imperdiet lectus lobortis luctus. Donec ullamcorper sagittis sapien. Sed quis nibh. Phasellus dignissim, sem vitae fermentum pulvinar, massa sem feugiat lorem, ut semper nulla enim ut sapien.</p>
		  </div>
		   <div class="ancre"> <a href="#top">Haut de page</a> </div>
	    </div>
        <div id="colonne_droite">
          <div class="colonne_droite_titre">
            <h2>Cours</h2>
          </div>
          <div class="colonne_droite_menu">
            <div id="navcontainer">
              <ul id="navlist">
                <li id="active">
                  <a id="current" href="#" >Général</a></li>
                <li>
                <a href="#sensibilisation">Sensibilisation</a></li>
                <li>
                <a href="#">Premier secours</a></li>
                <li>
                <a href="#">Voiture</a></li>
                <li>
                <a href="#">Motos</a></li>
              </ul>
            </div>
          </div>
          <div class="CMS_NoCSS">
            &nbsp;
          </div>
          <div class="colonne_droite_titre">
            <h2>Contact</h2>
          </div>
          <div class="colonne_droite_menu">
            <p><em>Daniel-auto-camion</em><br />
	Lausanne - Valentin 14<br />

	Renens - Rue Neu</a>ve 7<br />
			
              <a href=
			  
			  title="courriel">info@auto-ecole-daniel.ch</a>
              <br />
            </p>
          </div>
          
        </div>
        <div class="CMS_Clr">
        </div>
        <!-- footer-->
        <div id="footer">
          <div id="copyright"><a href="#">Design by </a></div>
          <div id="footernav">
            <ul id="footernavlist">
              <li>
                <a href="">Accueil</a></li>
              <li>
                <a href="#">Moniteurs</a></li>
              <li>
                <a href="#top">Cours</a></li>
              <li>
                <a href="#">Tarifs</a></li>
              <li>
                <a href="#">Boutique</a></li>
              <li>
                <a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

et la css correspopndante:


/* ------------- PAGE GENERALE ------------- */
/* ---------------------------------------- */
html, body {
	height: 101%;
	margin: 0px;
	padding: 0px;
	font: 10pt  arial, helvetica, sans-serif;
	line-height: 140%;
	color: black;
}
body {
	background: url(images/degrade.jpg) repeat-x;
}
h1 {
	margin: 0px;
	padding: 0px;
	color: #888;
	font: normal 900 24px/1 verdana, arial, sans-serif;

}
h2 {
	margin: 4px 15px 5px 15px;
	padding: 0px;
	color: #333;
	font-family:  arial, sans-serif;
	font-size: 100%;
	line-height: 1;
	font-weight: bold;
	letter-spacing: 1.3px;
}
h3 {
	margin: 0px 15px 5px 25px;
	padding: 0px;
	font: bold 100%/1 arial, sans-serif;
	color: #FFF;
	line-height: 150%;
}
h4 {
	margin: 0px 15px 5px 25px;
	padding: 0px;
	font: bold 100%/1 verdana, arial, sans-serif;
	color: #666;
}
h5 {
	margin: 0px;
	padding: 0px;
	font: bold 90%/1 verdana, arial, sans-serif;
	color: #ccc;
}
sub {
	margin: 0px;
	padding: 0px;
	font: 8pt verdana, arial, helvetica, sans-serif;
	color: #666666;
}
a:link, a:visited {
	color: #005AA9;
	border-bottom: 1px dotted #005AA9;
	text-decoration: none;
}
a:hover {
	color: #005AA9;
	border: none;
}
a:active{
	border-bottom: 1px dotted #005AA9;
	text-decoration: none;
}
em {
	color: #005AA9;
	font-weight: bold;
}
img {
	border: 0;
	border-style: none;
}
hr {
	border: 0;
	color: #ddd;
	background-color: #ddd;
	height: 1px;
	width: 100%;
	text-align: left;
}
ul {
	margin: 0px 0px 10px 28px;
	padding: 0px;
}
ol {
	margin: 0px 0px 10px 28px;
	padding: 0px;
}
li {
	margin: 4px 0px;
	padding: 0px;
}
form {
	margin: 0px;
	margin-left: 25px;
	padding: 0px;
}
select, input, textarea {
	padding: 0px;
	margin: 0px;
	font: 8pt verdana, arial, helvetica, sans-serif;
	color: #666666;
}
select, input {
	vertical-align: middle;
}
select {
	border: 1px solid black;
	height: 20px;
}
input {
	height: 16px;
	padding: 2px 3px 0px 3px;
}
textarea {
	width: 215px;
	padding: 3px;
	border: 1px solid #999;
	overflow: auto;
}
/* -------------- GLOBAL -------------- */
/* ---------------------------------------- */
#global {
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 50%;
	width: 744px;
	margin-left: -372px;
	top: 13px;
/* moitié de la largeur */
	background: transparent url(images/background.jpg) no-repeat;
}
/* ---------------- HEADER ---------------- */
/* ---------------------------------------- */
#header {
	position: absolute;
	top: 9px;
	height: 339px;
	width: 746px;
	margin: 0px;
	padding: 0px;
}
#bandeau_logo {
	position: absolute;
	top: 2px;
	left: 13px;
	width: 720px;
	height: 94px;
	margin: 0px;
	padding: 0px;
	background: transparent url(images/bandeau.gif) no-repeat;
}
#logo {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 94px;
	width: 134px;
	margin: 0px;
	padding: 0px;
}
#logo a:link, a:visited {
	color: #005AA9;
	border: none;
	text-decoration: none;
}
#logo a:hover {
	color: #005AA9;
	border: none;
}
#logo a:active {
	border-bottom: 1px dotted #005AA9;
	text-decoration: none;
}
#reference {
	position: absolute;
	height: 60px;
	width: 150px;
	margin: 45px 0px 20px 560px;
	padding: 0px;
	left: 1px;
	top: -7px;
	letter-spacing: 0.1em;
	font-weight:bold;
}
#image {
	position: absolute;
	top: 130px;
	left: 13px;
	width: 720px;
	height: 187px;
	margin: 0px;
	padding: 0px;
	background: url(images/image.jpg) no-repeat;
}
#menu {
	position: absolute;
	top: 101px;
	left: 13px;
	width: 720px;
	height: 24px;
	margin: 0px;
	padding: 0px;
	background: url(images/bcmenu.jpg) repeat;
	letter-spacing: 1.1px;
}
#tabs10 {
	float: left;
	width: 100%;
	font-size: 93%;
	line-height: normal;
}
#tabs10 ul {
	margin: 0;
	padding: 0px 10px 0 0px;
	list-style: none;
}
#tabs10 li {
	display: inline;
	margin: 0;
	padding: 0;
}
#tabs10 a {
	float: left;
	background: url(images/tableftAA.gif) no-repeat left top;
	margin: 0;
	padding: 0 0 0 4px;
	text-decoration: none;
	font-weight: bold;
	border: none;
}
#tabs10 a span {
	float: left;
	display: block;
	background: url(images/tabrigi22.gif) no-repeat right top;
	padding: 5px 15px 4px 6px;
	color: #333;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs10 a span {
	float: none;
}
/* End IE5-Mac hack */
#tabs9 a:hover span{
	color: #FFF;
}
#tabs10 a:hover  {
	background-position: 0% -43px;
}
#tabs10 a:hover span {
	background-position: 100% -43px;
}



/* ------------- COLONNE MENU DROITE------------- */
/* ----------------------------------------------- */
#contenant {
	width: 746px;
	height: auto;
	padding: 364px 0px 0px 0px;
	margin: 0px;
	/*border: dotted;*/
}
#colonne_droite {
	position: absolute;
	/*border: dotted;*/
	float: right;
	width: 240px;
	height: 449px;
	padding: 0px;
	margin: 364px 0px 0px 515px;
	left: 1px;
	top: 1px;
	height: 449px;
}
#colonne_droite p {
	margin: 0px 0px 5px 25px;
	font: 10pt arial, sans-serif;
	letter-spacing: 1.2px;
}
div.colonne_droite_titre {
	height: 48px;
	margin: 0px 0px 0px 25px;
	padding: 15px 15px 0px 15px;
	background: transparent url(images/titredroite.jpg) no-repeat top left;
	color: #333;
	font: bold 12pt  arial, helvetica, sans-serif;
}
div.colonne_gauche_titre {
	height: 48px;
	width: 513px;
	padding: 15px 0px 0px 20px;
	margin:0px;
	background: transparent url(images/titregauche.gif) no-repeat top left;
	color: #333;
	font: bold 12pt  arial, helvetica, sans-serif;
}
#navcontainer {
	width: auto;
}
#navcontainer ul {
	margin: 0px 0px 0px 25px;
	padding: 0px 18px 10px 0px;
	color: #000000;
	font: 10pt  arial, sans-serif;
	line-height: 130%;
}
#navcontainer li {
	list-style-type: none;
}
#navcontainer a {
	display: block;
	padding: 2px 3px 3px 3px;
	width: 192px;
	border: none;
	letter-spacing: 1.2px;
}
#navcontainer a:link, a:visited, #navlist a#current {
	color: #005AA9;
	font-weight: bold;
	text-decoration: none;
}
#navcontainer a:hover,  a#current {
	color: #fff;
	background: transparent url(images/roll.gif) no-repeat top left;
}
#navlist a#current {
	color: #fff;
}
/* ------------- CONTENUS------------- */
/* ---------------------------------------- */
#contenus {
	width: 500px;
	/*font: 9pt verdana, helvetica, arial, sans-serif;
*/
	line-height: 140%;
/*italic fix for IE*/
	margin: 0px 0px 0px 13px;
	/*border: dotted;*/
}
/* ---------- GENERAL CLASSES & STYLES ----------- */
/* ----------------------------------------------- */
.2colonnes_clear {
position: relative;
	display: inline-block;
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	/* background: green; */
	}
.2colonnes_gauche_gauche {
width: 238px;
	padding: 0px;
	margin: 0px 0px 0px 14px;
	vertical-align: top;
	overflow: visible;
	/* background: red; */
}
.2colonnes_gauche_droite {
	position: absolute;
	display: inline-block;
	top: 1px;
	right: 10px;
	width: 238px;
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	overflow: visible;
	height: 234px;
	/* background: red; */
}
#colonnegauche{
float :left; width: 240px; margin: 0px 0px 0px 3px;
}
#colonnedroite{
float: left; width: 240px;   margin: 0px 0px 0px 10px;
}
/* -------------------- FOOTER ------------------- */
/* ----------------------------------------------- */
#footer {
	clear: both;
	position: relative;
	bottom: 0px;
	height: 22px;
	width: 746px;
	background: transparent url(images/footer2.gif) no-repeat;
	color: #999;
	font: 8pt verdana, arial,  helvetica, sans-serif;
	margin-top: 10px;
	margin-right: 13px;
	margin-bottom: 0px;
	margin-left: 13px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#footer a {
	color: #FFF;
	white-space: nowrap;
	font: 8pt verdana, arial, helvetica, sans-serif;
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
}


#copyright {
	float: right;
	margin: 0px;
	padding: 0px 37px 1px 14px;
	font: 8pt arial, sans-serif;
	text-align: right;
}
#copyright a{
color:#FFFFFF;
border:none;
text-decoration:none;
	
}
#copyright a:hover {
color: #005AA9;
}
#footernav {
	padding: 0px 0px 14px 0px;
}
#footernavist {
}
#footernavlist li {
	margin: 3px;
	padding: 0px;
	list-style-type: none;
	display: inline;
}
#footernavlist li a {
text-indent:inherit
	letter-spacing: 0.11em;
	float: left;
	padding: 0px 0px 0px 20px;
	color: #fff;
	font: bold 8pt  arial,sans-serif;
	text-decoration: none;
	border:none;
	
}

#footernavlist li a:hover {

	color: #005AA9;

	
}

/* ---------------- OPTIONS---------------- */
/* ----------------------------------------------- */

div.CMS_Clr {
	clear: both;
	overflow: hidden;
	height: 1px;
}

.ancre  {
float: left; width: 240px;   margin: 0px 0px 0px 0px; padding:0px 0px 0px 420px;
	
	


}

.clr {
	clear: both;
	height: 10px;
}

.colonnelarge {
	width: 500px;
	margin-top: 0;
	float: left;
	padding: 0px 20px 0px 0px;
}

Qui peu me filer un coup de main? Smiley rolleyes

Merci et bonne journée
dups

mephisto

22 Feb 2006 à 10:09

a écrit :
<div class="colonne_droite_menu">
<p><em>Daniel-auto-camion</em><br />
Lausanne - Valentin 14<br />

Renens - Rue Neu</a>ve 7<br />

<a href=

title="courriel">info@auto-ecole-daniel.ch</a>
<br />
</p>
</div>

C'est pas cette balise </a> toute seule qui poserait problème par hasard?
Modifié par mephisto (22 Feb 2006 - 10:09)

Christian Le Bouler

22 Feb 2006 à 10:16

salut,

pour avancer dans ton problème voici quatre étapes utiles :

1. tu fais 1 copier de ton code html

2. tu vas sur cette page : http://validator.w3.org/

3. Tu fais un coller dans la zone adéquate

4. tu lances le check

++
Modifié par clb56 (22 Feb 2006 - 10:17)

dups

22 Feb 2006 à 10:22

Salut,

J'ai checké, une petite faute dans le menu principal un <li> errant... mais le problème persiste.
Le </a> n'a rien changé.
Merci de votre aide
Smiley cligne

dups

22 Feb 2006 à 18:10

SAlut,

Petite précision, sous ff et opéra, les liens se comportent normalement sauf l'éternel IE

Merci de votre aimable aide Smiley biggrin

dups

Sujet clos