18073 sujets

Questions générales et questions de débutants

Problème de décalage sur FireFox

Bonjour à tous,

j'ai un petit soucis avec le code de la nouvelle version de mon site à cette adresse : -http://www.usj86.com/USJ86v3/
Il y a un décalage (une bande blanche entre le header et la partie centrale, et un espace entre le header et le bandeau adsense à droite).
Sous IE ça fonctionne, mais pas sous Firefox.

Voici le code : 
<body class="nospace">
	
	<div class="main">
		
		<div class="central">
			
			<div class="corps">
				<div class="dmh"></div><?php include "$page"; ?><div class="dmhb"></div>
			</div>
			
			<div class="pied"><?php include("footer.htm"); ?></div>
			
		</div>
 		
		<div class="menu-gauche"><?php include("menu-gauche.php"); ?></div>
		
		<div class="menu-droite"><?php include("menu-droite.htm"); ?></div>
		
	</div>
	
	<div class="header"><?php include("header.htm"); ?></div>
		
</body>


et la feuille de style :

.nospace {
	width:100%;
	margin: 0;
	padding: 0;
	font-family:"Trebuchet MS", sans-serif;
	font-size: 85%;
	}
.header {
	position:absolute;
	top:0px;
	width:100%;
	right:15px;
	margin: 0 -15px 0 0;
	padding: 0;
	height:170px;
	background:#000000 url(../images/logo-usj86-fond.jpg)
	}
.main {
	position:absolute;
	top:170px;
	width:100%;
	right:15px;
	margin-right:-15px
	}
* html body .main {
	height:100%;
	overflow:hidden
	}
/* IE-mac ne voit pas les lignes qui suivent \*/
* html body .main {
	height:0px;
	overflow:visible
	} 
/* fin du text caché pour IE/mac */
.central {
	position:relative;
	top:0px;
	width:auto;
	margin:0;
	margin-left:150px;
	margin-right:120px;
	background-color:#F1F1F1;
	}
.corps {
	position:relative;
	min-height:600px
	}
* html body .corps {
	height:600px
	}
/* div-min-height-bottom */	
.dmh {
	position:relative;
	height:400px;
	width:0px;
	float:left
	}
/* div-min-height-bottom */	
.dmhb {
	position:relative;
	height:0px;
	clear:left
	}
.menu-gauche {
	position:absolute;
	height:100%;
	width:150px;
	top:0px;
	left:0px;
	background-color:#191919;
	color:#FFFFFF
	}
.menu-droite {
	position:absolute;
	height:100%;
	width:120px;
	top:0px;
	right:15px;
	margin-right:-15px;
	background-color:#F1F1F1;
	}
.pied {
	position:relative;
	width:100%;
	height:15px;
	background-color:#F1F1F1;
	}


Merci beaucoup pour vos réponses.
Ca doit être un problème de marges ... essaie de mettre les marges à 0, notament pour le <h1> dans la partie contenu.

En passant, ton code est un peu bizarre, pour être gentil Smiley ohwell

On utilise les class pour appliquer le même style via CSS à un grand nombre d'éléments. Dans le cas d'éléments uniques, on utilise les id ...
Voir Quelle est la différence entre une classe et un id

De plus, tu utilises beaucoup de <div> imbriqués, dans la partie centrale ? Est-ce qu'ils sont bien nécessaires ? Tu peux trouver ICI des exemples de strucuture, compare ton code avec ceux-là, tu verras que tu peux faire plus simple (et donc plus efficace).

Si ton code est inutilement compliqué, tu risques de faire plus facilement des erreurs, et c'est plus dur de s'y retrouver Smiley cligne
Merci d'avoir répond si vite Sopo.

En effet, pour la partie centrale, c'était bien le margin de la balise H1.
Il reste maintenant le décalage entre le bandeau adsense et le header mais c'est déjà mieux.

Pour le code, je sais qu'il doit y avoir mieux et plus clair mais comme je débute en css (je suis en train de refaire mon site pour ça) c'est pas facile facile. Et puis, je me balade sur ce forum et sur le site d'Alsacreations de temps en temps pour pouvoir justement m'améliorer.

Enfin si tu vois des trucs à changer qui ferait que le code soit moins chargé, n'hésite pas.

Et merci encore.
Eh bien, je pense que tu devrais lire au moins les tutos Bases et indispensables une bonne fois avant de te lancer !

Ensuite, choisis un gabarit de site et adapte-le à tes besoins, en essayant de rester le plus simple possible.

Une fois que tu as bien compris le fonctionnement et que tu sais ce que tu veux faire, tu verras que tu arrives à un résultat très rapidement. Si tu as déjà tes images & co, construire ton site ne prends que quelques heures ... Smiley murf

Mais il faut avoir compris le positionnement et les class & id pour arriver à structurer le site. Sinon, tu vas galérer. Ca vaut vraiment la peine de prendre le temps d'apprendre.

Après, pour que tout soit nickel, c'est une autre histoire, mais ça relève plus du détail ... Smiley cligne
Pour les classes et les id, j'ai remédié au problème.

Le soucis avec les gabarit d'Alsacreations, c'est qu'il n'y en a pas qui me conviennent. En fait, je cherche un gabarit avec le code de la partie centrale (en gros le corps de la page), qui soit tout en haut de la page de code (et non pas en bas). Je sais que ça parait bizarre, mais le fait d'avoir le texte en premier dans le code est mieux considéré par les moteurs de recherche et aide au référencement.
Sujet clos
Aller à