28112 sujets

CSS et mise en forme, CSS3

[Résolu] Chevauchement CSS

Bonjour,

je développe actuellement un site web qui doit être compatible IE6 à 8 et firefox.


la structure et simple pour le moment, mais me pose déjà un léger problème.
je vais dans un premier temps vous montrer l'affichage sous IE et Firefox

Visualisation type sous IE
upload/30900-menuie.jpg

Visualisation Firefox
upload/30900-menufirefo.jpg

Ayant un Margin-top de 10 pixel, firefox prend en compte la marge mais en se positionnant par rapport au header alors que IE se positionne par rapport au menu

Ce que je veux en résultat c'est ce que m'interprète IE c'est à dire positionner le body par rapport au menu

sachant que j'ai u CSS pour mon menu et un CSS global


CSS global
body
{
	background-color: #FFFFFF;
}
.header {

	margin-top: 10px;
	color: #FFFFFF;
	background-image: url(images/design/Logo.jpg);
	background-color:#750506;
	height: 168px;
	width: 734px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}


.body{
	margin-top: 10px;
	color: #FFFFFF;
	background-color:#D2232A;
	height: 1000px;
	width: 734px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;



CSS Menu:




ul#topnav {
	position:relative;
	margin: 0; padding: 0;
	float: left;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 1.2em;
	background: url(topnav_stretch.gif) repeat-x;
	width:100%; 


}
ul#topnav li {
	position:relative; /*--positionnement du sous menu --*/
	float: left;
	height:41px;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Séparateurs entre chaque menu--*/
	

}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;   /*--couleur d'écriture--*/
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li span {
	-moz-opacity:0.8;
	opacity: 0.8;
	filter:alpha(opacity=80);
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:41px;
	display: none; /*--Hide by default--*/
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	  -o-border-bottom-right-radius: 5px;
	-ikab-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
    -o-border-bottom-left-radius: 5px;
	-ikab-border-bottom-left-radius: 5px;


}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}



Je sais pas si mon explication est claire, n'hésitez pas à me demander plus d'info.
Si il faut j'uploaderai mes pages pour que vous puissiez voir concrètement...

Merci d'avance de votre aide Smiley smile
Modifié par Zombiman (07 Jul 2010 - 16:15)
Hello,

Difficile à dire sans avoir la page elle-même sous les yeux. Sans le code HTML, il nous manque pas mal d'informations. Et avoir accès à la page directement permet de faire des tests rapidement (Firebug, Web Inspector...).

Une piste, à tout hasard: il ne faut pas faire flotter le menu. Le float:left utilisé n'a rien à faire là et pourrais être la source d'une partie de tes problèmes.
Hello Smiley smile

c'est moi qui craque ou ton code a un petit problème ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
	<title> Acceuil spectateurs</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

	<!-- Inclusion de l'&#65533;lement css g&#65533;n&#65533;ral-->
	<link rel="stylesheet" media="all" type="text/css" href="css/design.css" /> 

	<!-- Inclusion du css du menu public-->
	<link rel="stylesheet" media="all" type="text/css" href="menu_public/menu_public.css" />
	

	
	<!-- Inclusion des &#65533;lements pour la gestion d'images-->

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
	<title>Header</title>

	<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

	<!-- Inclusion de l'&#65533;lement css g&#65533;n&#65533;ral-->
	<link rel="stylesheet" media="all" type="text/css" href="css/design.css" /> 

	<div class="header"></div>
	
</head>

<body> 

</body> 

</html> 
</head>

<body> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="all" type="text/css" href="menu_public.css" /> 
<script src="menu_public/jquery-1.3.2.min.js" type="text/javascript"></script>

</head>

<body>

<ul id="topnav">
    <li><a href="#">Programme de la saison</a></li>
    <li>

        <a href="#">Programme scolaire</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Petit age</a> |
            <a href="#">age moyen</a> |
            <a href="#">gandes &#65533;coles</a>
        </span>

        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

</body>
</html> 

<div class="body"></div>
	
	<br />
	<br />
	<br />

	
	<!-- :test d'image avec lightbox<a href="images/BigMike.jpg" rel="lightbox"><img src="images/BigMike.jpg" width="100" height="85" alt="" /></a>-->
	

</body> 

</html>


Je pense que tu as du te planter en faisant des copiers / coller, parce que là tu as 3 doctypes, deux pages html mixées en une seule Smiley decu

Commence par un petit ménage de code =)
Modifié par saiko_sama (07 Jul 2010 - 13:50)
Bon j'ai fait du ménage normalement ça devrait être plus clair ^^

j'avais trois fois la meme chose car je fait des includes et vu que les page que j'incluais contenant le doctype et tout le reste bah ... ^^


je redonne le lien

Voici le lien
Modifié par Zombiman (07 Jul 2010 - 14:05)
Chez moi il reste <div class="header"></div> dans ton head. Passe un coup de validateur sur tes pages en général le fait d'avoir des pages valides pour le html résoud souvent certains problèmes.
c'est normal car mon inclusion et dans le head.
Ceci-dis je vais plutôt le mettre dans mon body mais je pense pas que cela fasse un grand changement au niveau de l'affichage, après niveau validation c'est peut être mieux

http://marionnette-belfort.com/test/indexpublic.php


reste toujours le problème du positionnement du body par rapport au menu sous FF que je n'arrive toujours pas à comprendre.
Le fait de le mettre dans le body ne fait pas de changement visible, certes, mais au moins ta page est valide. Mettre du code html dans le head n'est pas valide w3c.
Au passage des erreurs, ta balise .body n'est pas fermée dans la css, et tu as deux fois position:relative; dans ton ul#topnav

Pour ton problème, si tu enlèves ton menu, juste pour le test, tu verras que sous FF ou chrome il garde ton espace blanc entre le body et header, mais pas sous IE6. On dirait que chrome et FF déposent délicatement ton menu par dessus le div le plus proche (.body), mais que IE6 l'intercale entre les 2 div et tu as ton décalage. Pour une fois j'aurais tendance à dire que le comportement de IE est plus "logique" mais bon.

Autre problème, ton menu passe sur deux lignes, voir 3 quand on redimensionne le navigateur et là ça devient carrément immonde sous IE6 : plus d'image de fond, le menu passe en texte blanc sur fond blanc. De plus, ton sous menu devient inaccessible et ce même sous firefox.

Pour fixer ton menu sur une ligne pour IE, tu peux tricher, et remonter le .body de quelques pixels avec une marge négative et un commentaire conditionnel pour n'appliquer la css qu'à IE : 

.body{
margin-top:-50px;
}


Cependant cela sera toujours décalé dès que ton menu passera sur 2 ou 3 lignes. Perso je commencerais par revoir mon menu pour éviter qu'il puisse passer sur 2 ou 3 lignes, surtout que ton image de fond est une image fixe. Peut être en passer certains en sous menus, regrouper des items, voir en mettre d'autres ailleurs que dans le menu principal?
Modifié par saiko_sama (07 Jul 2010 - 14:50)
problème résolu,

j'ai finalement opté pour le chevauchement du body avec le menu.


Pour ce qui est de l'empilage de ligne j'ai tout simplement enlever le type de position pour le sous menu ce qui m'évite ce genre de problèmes

aller je rebalance le lien pour le résultat "final"

http://marionnette-belfort.com/test/indexpublic.php



Je vous remercie à tous de votre aide, vos critiques et conseils m'ont permis de mieux réfléchir au pourquoi du comment du problème et de penser à d'autres solutions plus adaptées


encore un gros merci Smiley smile

@+++
Sujet clos
Aller à