28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème d'affichage css sur un site avec IE6. Le site fonctionne à merveille sous IE7 et FIREFOX.
J'ai, sur mon site, une colonne a gauche avec différant menu et à droite le contenu de la page comme ça :

/////////////////////////////
////MENU////CONTENU////
//////////////CONTENU////
////MENU////CONTENU////
//////////////CONTENU////
////MENU////CONTENU////
//////////////CONTENU////
////////////////////////////

sous IE 6 la page s'affiche comme ça :
/////////////////////////////
////MENU//////////////////
////////////////////////////
////MENU//////////////////
////////////////////////////
////MENU//////////////////
////////////////////////////
////MENU//////////////////
//////////////CONTENU////
//////////////CONTENU////
//////////////CONTENU////
//////////////CONTENU////
//////////////CONTENU////
/////////////////////////////
le contenu reste bien a droite du menu mais ce place en dessous. je ne comprend pas pourquoi!! le CSS reste une énigme pour moi. pouriez vous m'apporter votre aide ?

merci
PS : comment faire pour mettre l'url sans que celle si ne soit visible par les robot google ? je ne souhaite pas que ce sujet soit référencé par google !!!
Regarde peut-être du côté de la propriété CSS clear: none
Ce genre de comportement peut aussi être dû au fait qu'un bloc a une taille trop grande mais ne peut pas chevaucher l'autre, donc il se met au-dessous. Pour t'en rendre compte, ajoute temporairement une petite bordure à tes blocs border: 1px solid black;

Pour empêcher l'indexation d'une page (on ne peut pas l'empêcher pour un lien) tu peux aller regarder la FAQ de Google
Difficile de dire sans voir le code... mais à tout hasard ça pourrait être dû au bug des doubles marges sur un élément flottant. Rajoute donc "display: inline;" sur ton bloc contenu (en admettant que tes blocs soient positionnés en float).
Modifié par jb_gfx (03 Sep 2008 - 14:42)
le css des ces 2 div :

div#left {
    width:270px;
	float:left;
	margin:0px;z-index:1;
}



div#right {
    margin-left: 273px;
	margin-right: 61px;z-index:1;
}

celles ci sont contenu dans :
div#site {
    text-align:left;
    background: url(images/site.jpg) repeat-y 0 0;
    width: 1000px;
    margin : auto
	z-index:1;
}


(j'editerai apres)
le site en question : coursdelatrevaresse.fr
Modifié par mictif (03 Sep 2008 - 15:40)
Up ! je ne trouve toujours pas... aidez moi j'ai bien peur de devoir utiliser un tableau pour remplacer le css !!!
remerci Smiley smile
Salut Mictif !

Je viens de tester ton code sur IE6, ton code css fonctionne très bien !
Si tu veux plus d'aide, pourrais-tu nous donner ton code html ainsi que le code css qui va avec des éléments internes car ça ne peut venir que de là.

Code css :

div#left {
	width: 270px;
	float: left;
	margin: 0;
	z-index: 1;
	border: 1px solid red;
}
div#right {
	margin-left: 273px;
	margin-right: 61px;
	z-index: 1;
	border: 1px solid green;
}
div#site {
	text-align: left;
	width: 1000px;
	margin: auto;
	z-index: 1;
	border: 1px solid blue;
}


Code html :

<div id="site">
	<div id="left">left</div>
	<div id="right">right</div>
</div>
Merce pour l'astuce du "inline" dans les div flottants !!!

Enfin IE6 et FF comprennent mes margins de la même façon Smiley cligne