Float =s

Bonjour,

j'ai actuellement des soucis assez conséquents sur mon site :

-j'ai une sorte de marge entre le header et la partie centrale et entre la partie central et le footer.
-sur certaine page mon fond n'apparait pas completement comme ici
-il y a une enorme difference entre IE et FF comment je peux régler ceci?
-et pour finir j'aimerai que mon div content commence legerement decaler du div page.

Pour mieu m'expliquer jai pris soin de faire 2 images :

1
2

Enfin voici mon CSS :

/*//////////////////////////////////////// PAGE /////////////////////////////////////////*/
/*//////////////////////////////////////// /////// ///////////////////////////////////////*/

#page
{
   width: 1000px;
   background-image: url("../images/design/contenu.png");
   background-repeat: no-repeat;
   min-height: 100%;
}

#menu
{
	width: 266px;
	height: 760px;
	background-image: url("../images/design/menu.png");
	background-repeat: no-repeat;
	float: left;
}

#navigation
{
	width: 200px;
	position: relative;
	left: 49px;
	top: 23px;
}

#multimedia
{
	width: 200px;
	position: relative;
	left: 49px;
	top: 82px;
}

#chat
{
	width: 210px;
	position: relative;
	left: 43px;
	top: 133px;
}

#content
{
   overflow: visible;
   background-image: url("../images/design/ex.png");
   background-repeat: repeat;
   padding-left: 275px; 
}

Merci d'avance.

Bonjour,

Le code (X)HTML ne serait pas non plus de refus (si cela n'est pas secret défense) . Ou mieux une page en ligne .

ben j'ai mis le lien du site en ligne pour voir ( ainsi que voir la difference IE/FF)

site

pour le code Xhtml :

<div id="page">
	
		<div id="menu">
			<div id="navigation">
			</div>
		
			<div id="multimedia">
			</div>
		
			<div id="chat">
			</div>
		</div>

		
		<div id="content">
		</div>
		
	</div>

Modifié par Sidji (03 Mar 2008 - 12:16)

Bonjour,

Je vois pas mal de problèmes de codage, et le validateur HTML m'indique 185 erreurs pour la page d'accueil. Peut-être commencer par là?

Ensuite, côté CSS tu as des éléments figés en hauteur (par exemple le header) alors que leur contenu est plus haut que la hauteur prévue. Il faut supprimer la hauteur fixe, et prévoir une extensibilité en hauteur (avec une image de fond suffisamment haute pour ça). Pareil pour le menu de gauche.

En parlant du menu de gauche, il est trop large. Il n'y a aucune raison de venir le coller au pixel près au contenu à droite, ça fait juste courir des risques de mauvaise gestion des flottants par certains navigateurs (en particulier Internet Explorer 6). Pourquoi ne pas réduire la largeur de ce menu flottant, afin de garder une zone «tampon» entre le menu flottant et le contenu à droite?
De plus, j'aurais tendance à utiliser un margin-left plutôt qu'un padding-left pour le bloc de contenu en question. Pas sûr que ça joue ici, mais il me semble que ça peut être une solution plus robuste.

Voilà pour un début.

Pour la suite, il faudra sans doute travailler la question du dépassement des flottants si elle n'est pas maitrisée, et celle de la fusion des marges:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

a écrit :
ben j'ai mis le lien du site en ligne pour voir

Oops. Désolé Sidji, je n'avais pas vu le lien que tu as laissé.

<edit>Hum hum ... la présentation "pixel" du forum ne met pas trop en valeur les liens hypertextes (couleur très proche d'un "simple texte") ; d'où cette méprise ! </edit>
Modifié par yodaswii (03 Mar 2008 - 12:55)

je vais lire tout ça merci.