28172 sujets

CSS et mise en forme, CSS3

Bonjour,

C'est à nouveau moi pour un site qui est fait de slides horizontales. Le site fonctionne plutôt bien, il ne me reste -presque- plus qu'à insérer le contenu avant la mise en ligne

J'en arrive enfin au bout et j'en suis plutôt content Smiley smile . Il persiste toutefois un problème important avec Chrome. Comme je vous le disais, c'est un site fait de "slides" qui "glissent" horizontalement lorsqu'on navigue par le menu : tous les éléments qui sont en position:fixed disparaissent lors de toute navigation par le menu.
Les éléments (logo, menu et footer) sont invisibles, mais ils sont toujours là, car si je passe la souris par dessus, ils réapparaissent comme par magie... Smiley eek
> le mieux pour s'en rendre compte c'est de tester en live (avec Chrome), voici le lien du site

Je 'ai jamais vu ce genre de comportement, ce qui est étrange c'est que sur Safari (et même IE) il n'y a pas ce problème. A quoi cela peut-il être dû ?

Merci et bon we !
Modifié par miltonis (11 Nov 2010 - 16:59)
Bonjour,

Je relance mon sujet car il est toujours d'actualité.
Quelqu'un peut me donner un coup de main svp ? Avez-vous pu reproduire le "bug" ?

Voici le code CSS concerné:
html {
	height: 100%;
	padding: 0;
	margin: 0;	
}
body {
	font-family: Verdana, Geneva, sans-serif;
	color: #222;
	font-size: 13px;
	text-align: left;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}


/* GENERAL */
#conteneur {
	position: relative;
	top: 0;
	left: 0;
	width: 7150px;
	height: 100%;
	margin: 0;
	padding: 0;
}


/* BOXES */
div#box0 {
	background-image: url(../images/bck_box1.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
}
div#box1 {
	background-image: url(../images/bck_box2.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
}
...
div.box {
	float: left;
	position: relative;
	width: 1400px; /* 1430, voir aussi #header */
	height: 100%;	
	padding: 0 30px 0 0;
	margin: 0;	
}
div.bloc_videoIndex {
	float: left;
	z-index: 1100;
}


/* HEADER */
#header {
	position: fixed;
	top: 15px;
	left: 0;
	width: 1430px;
	padding: 0;
	margin: 0;
	z-index: 10;
}
#logo {
	position: relative;
	left: 350px;
	padding: 0;
	margin: 0;
}


/* MENU */
#menu {
	position: fixed;
	float: left;
	font-family: helvetica, sans-serif;
	text-transform: uppercase;
	top: 170px;
	left: 250px;
	margin: 0;
	padding: 0 0 3px 0;
	clear: both;
	z-index: 500;
}
#menu li {
	float: left;
        ....
	height: 34px;
	margin: 0 5px 0 0;
	padding: 0 0 0 0;
}


merci
Modifié par miltonis (01 Nov 2010 - 20:02)