28173 sujets

CSS et mise en forme, CSS3

CSS & Compatibilité, quelques problemes...

Bonjour à tous.

Je travaille sur mon premier site entièrement en css (http://synapz.free.fr/aikido)et je bute sur quelques ecueils.

Sous FF, le menu de droite ne semble pas prendre en compte la css a:hover.
[Edit: si en fait... l'irrationnel et l'info.... ]

Sous IE, les divs sont tous decalés et de même le a:hover ne fionctionne pas.

Si quelqu'un peut éclairer ma lanterne...
Smiley confus

Merci ! Smiley biggrin Smiley eek Smiley eek
Modifié par Cronos (19 Oct 2006 - 15:59)
Hello Cronos Smiley cligne ,

Tout d'abord ta page n'est pas validée à cause d'un alt manquant sur l'image header et de 2 <br /> insérée dans des <li> !
pour ton décalage dans IE :
enlève height: auto; dans div global qui ne sert à rien.
enlève height: auto; dans div contenu qui ne sert à rien.
enlève width: 480px; dans div contenu qui ne sert à rien et provoque le décalage Smiley smile .
Et pour le décalage des liens cela vient du margin-left: -15px; dans div menuLiens. Pour plus d'infos regardes dans la FAQ

@+
Merci !

Il me reste encore 2 petits details sous IE.

Un decalage de quelques pixels en haut de la div qui contient le menu, et lorsque je passe la souris sur les liens, ils se decalent...

J'ai fouillé le code, je capte pas pourquoi.

Je vous joins un copie d'ecran Smiley cligne

upload/9033-sousIE.gif
Modifié par Cronos (19 Oct 2006 - 14:35)
Salut,

Ce code devrait fonctionner :
<!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>Aikido - Cadets de Bretagne - Rennes</title>
<style type="text/css">
<!--
.Style1 {
	color: #9B193D;
	font-weight: bold;
}

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: normal;
	background-image: url(http://synapz.free.fr/aikido/images/aikido_fond2.jpg);
	margin: 0;
	padding: 0;
	}
	
	
/* POSITIONNEMENT*/

#global {
	background-image: url(http://synapz.free.fr/aikido/images/aikido_currentbg.jpg);
	background-repeat: repeat-y;
	width: 745px;
	margin-left: auto;
	margin-right: auto;
}
#header {
	width: 702px;
	float: none;
	height: 230px;
	margin-left: 24px;
}

#centre {
	width: 702px;
	margin-left: 24px;
}

#navi {
	background-image: url(http://synapz.free.fr/aikido/images/aikido_fondnav.jpg);
	background-repeat: no-repeat;
	width: 191px;
	height: 270px;
	float: left;
	padding: 40px 0 0 0;
}

#contenu {
	background-color: #FFFFFF;
	padding-left: 15px;
	padding-top: 20px;
	padding-right: 15px;
	margin-left: 191px;
	padding-bottom: 40px;
	background-repeat: repeat-y;
}

#menuBas {
	/*background-attachment: fixed;*/
	background-image: url(http://synapz.free.fr/aikido/images/aikido_bottom.jpg);
	background-repeat: no-repeat;
	margin-left: 24px;
	height: 24px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	padding-top: 15px;
}
#photo {
	width: 231px;
	float: right;
	margin-right: 0px;
	border: 1px solid #981E35;
	padding: 2px;
	margin-left: 10px;
	margin-top: 18px;
}


/*NAVIGATION*/
#navi ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navi li {
margin: 15px 25px;
padding: 0;
list-style-type: none;
}


#navi li a { 
	padding-bottom: 5px;
}

.SautLigne {
padding-top:20px;
}

#menuLiens {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	list-style: none;
	color: #FFFFFF;
	font-weight: bold;
	list-style-position: outside;
}
#menuLiens a {
	text-decoration: none;
	display: block;
	line-height: 10px;
	border-bottom: 1px solid #778589;
	width: 140px;
	color: #FFFFFF;
}

#menuLiens a:hover {

	border-bottom: 1px solid #006699;
	color: #8f4962;
}

#liensBas {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

img { 
	display:block; 
}

-->
</style>
</head>

<body>
<div id="global">

	<div id="header">
	<img src="http://synapz.free.fr/aikido/images/aikido_header.jpg" width="702" height="230" alt="" />
	</div>
	
	<div id="centre">	
	
	<div id="navi">	
		<ul id="menuLiens"> 
		  <li><a href="index.html">Accueil</a></li>
		  <li><a href="aikido.html">Aikido</a></li>
		  <li><a href="enfants.html">Aikido & les enfants</a></li>
		  <li><a href="info.html">Infos Pratiques</a></li>
		  <li><a href="notions.html">Notions & principes</a></li>
		  <li><a href="amis.html">Amis & partenaires</a></li>
          <li><a href="contact.html" class="SautLigne">Contact</a></li>
		</ul>
	</div>
	
	<div id="contenu">
	 :: <span class="Style1">Accueil</span><br />
	 <br />
	 
	 	 
	 <div id="photo"><img src="http://synapz.free.fr/aikido/images/accueil_osensei.jpg" width="231" height="307" alt="" /></div>

	 <br />
	 	 Bienvenue sur le site du Dojo des Cadets de Bretagne, association sportive et culturelle en partenariat avec 	la ville de Rennes.<br />
	 <br />
	 
	 L'Aikido est un art martial japonais créé par Morikeï Ueshiba
	(1883-1969). Il fut inspiré par les meilleurs maitres de l'époque. 
	<br />
    <br />
	Discipline physique et morale, l'Aikido permet d'acquérir une parfaite maîtrise de soi en assurant un developpement harmonieux du corps. 
	<br />
	<br />
    <br />
    <br />
    <br />
    <br />
    <br />
	</div>

	</div>

	<div id="menuBas">
		<a href="index.html">accueil</a> | <a href="aikido.html">aïkido</a> |  <a href="enfants.html">aïkido & les enfants</a> | <a href="infos.html">infos</a> | <a href="notions.html">notions</a> | <a href="amis.html">amis</a> | <a href="contact.html">contact</a> 
	</div>
	
</div>	
</body>
</html>

Pour info j'ai rajouté les balises alt manquantes, fermé les balises <li> ouvertes et enlevé les <br /> inseréés au milieu d'elles Smiley cligne

Pour le décalage dans IE :
img { 
	display:block; 
}

Pour le décalage au passage sur les liens cela est dû aux différences de margin et padding entre les navigateurs des éléments ul et li.
D'où l'ajout du code
#navi ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navi li {
margin: 15px 25px;
padding: 0;
list-style-type: none;
}


#navi li a { 
	padding-bottom: 5px;
}


@+
Sujet clos
Aller à