Petits problemes de mise en page avec CSS

Bonjour à tous,

Tout d'abord félicitation à Raphaël pour ce superbe site et également pour son livre "CSS2 pratique du web design" que j'ai acheté chez Eyrolles.

Je suis en train de réaliser un site de matériel médical (sous spip) et j'ai quelques problèmes avec les CSS.

Le premier est que j'ai un scroll horizontal sur l'ensemble de la page
Le deuxième est qu'il y'a un autre scroll horizontal non désiré au milieu de la page
Et le troisième est que sous firefox j'ai des marges non voulues entre les images qui composent mon interface tandis que ça a l'air de fonctionner sous IE.

Voici la page en question :

http://gambettaconfortmedical.com/Mobilite

et la feuille de style associée :
http://gambettaconfortmedical.com/squelettes/spip_style.css

Si vous pouviez m'aider cela serait super sympa merci.

Cedric.

Salut,

J'ai peu de temps pour te dire quoi corriger mais déja je te donne les pistes trouvée à l'aide de la fonction "outline block level element" de l'extension web developer de firefox :

Le scroll horizontal sous l'ensemble de page provient d'une trop grande largeur de ton pied de page.

Le scroll horizontal sous la partie centrale de la page provient de la trop grande largeur du menu en vignettes.

Une correction pour le menu:
- on part de ceci:

#navigation {
	float: left;
	width: 730px;
	text-align: center;
	margin: 0;
	padding: 0;
}

- et on fait plutôt cela:

#navigation {
	text-align: center;
}

Au final, on supprime donc quatre déclarations CSS inutiles (margin, padding) ou problématiques (float, width). Ça simplifie tout de même grandement les choses.

De même, on pourra supprimer la largeur (width: 100%;) de div#pied. Si on garde cette largeur et qu'on rajoute 2px de padding à gauche et 2px de padding à droite, on se retrouve avec un bloc de largeur totale 100%+4px, soit 4px qui dépassent. Or, le width: 100% est inutile car un élément de type bloc prend par défaut la largeur disponible dans son conteneur.

Vous êtes formidable, merci bcp pour les infos je vais regarder ca de tres pres, je reposte pour vous dire si j'ai finalement reussi ou pas.

A bientot et encore merci

chapi chapo les artistes, merci à Mikachu et Florent mes problemes de scroll sont réglés !!!

Il me reste le pb sous firefox n°3 sur l'image jointe : des marges non voulues entre les images qui composent mon interface tandis que ça a l'air de fonctionner sous IE.

commodo a écrit :
Il me reste le pb sous firefox n°3 sur l'image jointe : des marges non voulues entre les images qui composent mon interface tandis que ça a l'air de fonctionner sous IE.

Voir la FAQ du forum: Espaces indésirables sous les images.

Ceci dit, c'est plutôt la méthode d'intégration qui est bancale ici. Il n'était certainement pas nécessaire de découper le design en autant de petites images. Il aurait été plus utile de distinguer:
- les images de fond (CSS);
- les images portant réellement un contenu, qui devraient être marquées comme suit:

<img src="..." alt="Nouveautés" />

Ici, si je désactive les images, le site est tout bonnement inutilisable. Dommage. Il y aurait un effort à faire sur l'accessibilité.

Par ailleurs, c'est normal d'avoir du code qui ressemble à ça:

<a href="


	
	
		
			
			
			
			
				
				
					La-gamme-Solidea
				
			
		
	
">

?
Ça me laisse perplexe...

oui tu as raison je vais changer cela rapidement pour lecode généré c'est spip qui fait ça je vais egalement essayer de corriger

je viens de rajouter pour le bas gauche et la bas droite des images pour bien finir en arrondis mais sous firefox ca me decale tout mon contenu

je m'y suis pris de la maniere suivante :

 #contenu {
	float: right;
	width: 744px;
	background: #ffffff;
	background-image: url(/images/Tit-topContent.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#fincontenu
{
	clear: both;
	float: right;
	width: 744px;
	background-image: url(/images/fin-contenu.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 15px;
}
#gauche
{
	float: left;
	width: 189px;
	background-color: #b3e1ff;
	background-image: url(/images/marque04.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: center;
	left: 35px;
}

#fingauche
{
	clear: both;
	float: left;
	width: 189px;
	background-image: url(/images/fin-gauche.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 15px;
}

J'ai corrigé les alts manquant merci pour la remarque c'est effectivement tres important.
il me reste ce pb de decalage d'image malgres la lecture de la faq et decalage de blocs sous firefox.

En tout cas j'apprecie bcp votre aide !

Pour le problème de flottants qui ne vont pas où tu veux: tu as quatre flottants à la suite:
- div#gauche
- div#fingauche
- div#contenu
- div#fincontenu
Tu fais flotter les deux premiers à gauche, et les deux suivants à droite. Le comportement obtenu est alors normal.

Mieux vaudrait faire deux blocs: div#gauche et div#contenu, et placer div#fingauche à l'intérieur de div#gauche et div#fincontenu à l'intérieur de div#contenu.

À noter aussi que cette technique que tu utilises pour faire les coins inférieurs pourrait être utilisée pour les coins supérieurs également. C'était le sens de ma remarque quand je disais que tu coupait trop ton en-tête en tout petits morceaux.

Pour les espaces indésirables sous les images... ben la FAQ donne la réponse, pourtant.
http://forum.alsacreations.com/faq/faq-58-Espaces-indesirables-sous-les-images.html
Toutes les solutions indiquées dans «Autres solutions» semblent convenir ici. J'ai testé rapidement (sous Firefox uniquement) celle-ci, qui me semble très bien:

#conteneur img {vertical-align: middle;}

Florent tu es un chef !
Effectivement fini les pbs de decalage d'image merci bcp
j'ai tenu egalement compte de tes remarques pour l'organisation des div et un probleme subsiste : le fond de la div qui acceuille le contenu principal est blanc, le gif du bas avec les arrondis est fait grace à la transparence mais vu que le fond de la div est blanc je ne vois finalement pas mes arrondis

d'ou l'idee de faire un seconde div ... a moins qu'il n'y ai un parametre a preciser pour ma div pour ne pas h"riter de la div contenu ?

Et puis maintenant sous firefox mon bloc contenu vient se caler sous le bloc gauche et non à coté.

En tout cas c'est deja bcp mieux merci enormement

en fait tu m'as deja donne la reponse au lieu de faire 15 000 depoupages je vais utiliser un fond unique pour la gauche un autre pour le contenu principal, dans mon cas cela n'a pas trop d'importance puisque la hauteur est fixée !

Merci encore

commodo a écrit :
puisque la hauteur est fixée

Ce qui est dommage, d'ailleurs. En 800x600, c'est tout bonnement inutilisable.
Et même pour les autres résolutions, avoir deux barres de défilement vertical concurrentes n'est pas une très bonne idée.