18073 sujets

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

Centrage des éléments sous IE

Bonjour,
Tout d'abord : BRAVO pour se site d'une qualité expetionnel Smiley smile
Ensuite : excusez moi de ne pas arriver à appliquer vos conseils avisés Smiley decu

Voici mon problème :

J'ai un site qui est composé de 3 partie


<ul id="menu">
</ul>

<div id="conteneur">
<div id="menu_gauche"></div>
<div id="rubrique"></div>
</div>

<div id="fin"></div>


Les styles appliqués sont :


*
	{
	border: 0;
	margin: 0;
	padding: 0;
	}

#menu
	{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -30px;
	width: 963px;
	height: 60px;
	padding-top: 30px;
	text-align: center;
	}
* html #menu
	{
	margin-bottom: 0px;
	}

#conteneur
	{
	clear: both;
	margin-left: auto;
	margin-right: auto;
	width: 963px;
	}

#fin
	{
	clear: both;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 963px;
	height: 70px;
	}


sous IE (sous mozilla tout est ok) :
Je n'ai pas reussi à appliquer votre hack pour que mes trois éléments soit alignés au centre, le premier (menu) est toujours aligné à droite en décalage avec les deux autres (conteneur et fin) sont solidaires mais sont alignés à gauche ! j'ai essayé de mettre le tout dans un éléments global suivant votre tuto mais rien n'y fait. j'ai pourtant évité un maximum les problemes liés au padding et border de IE.

Quelqu'un aurrait un conseil !? le probleme pourait-il etre du aux éléments contenus (je ne leur ai spécifié aucune position, certains sont en float: left;)

Merci et bonne journée
ju.
Bonjour !

Je ne comprends pas bien ce que tu essaies de faire ... Est-ce que c'est bien un menu à gauche, du contenu à droite, le tout dans une page centrée ?

Je note, en passant, que tu utilises une largeur de 943px ... ce qui veut dire qu'en 800*600 (une part non négligeable des internautes), il y aura une barre de défilement horizontal Smiley ohwell
oui en fait j'ai un cadre de 963px de large qui peut s'etendre en hauteur (au niveau du <div> central (id="conteneur").

Il y a trois éléments à un premier niveau (<ul> <div id="conteneur"> et <div id="fin">).
Dans le <div id="conteneur"> il y a le menu de gauche qui "float:left" et la rubrique qui affiche le texte.

J'aurrais voulu les aligner au centre de manière simple (du genre avec les margin: auto) sans ajouter trop de div de tous les cotés, mais je n'y arrive pas sous IE.
J'espere que je suis assez clair ! Smiley smile
A l'aide !!! Smiley smile
Merci.
Ju.

<body>
<ul>...</ul>
<div id="menu">Menu</div>
<div id="rubrique">Rubrique</div>
<div id="pied">...</div>
</body>


html {
margin: 0 ;
padding: 0 ;
}

body {
width: 760px ;
margin: 0 auto ;
padding: 0 ;
}

#menu {
float: left ;
width: 180px /* tu mets la largeur que tu veux pour le menu */ ;
}

#rubrique {
margin-left: 180px ;
}

#pied {
clear: both ;
}


Je n'ai pas testé, mais ça devrait fonctionner, si j'ai pas fait d'erreur ...
Modifié par Sopo (06 Sep 2005 - 18:13)
Merci beaucoup ! Smiley smile
Je ne l'ai pas testé non plus, parceque j'ai opté pour une solution un peu disgracieuse mais fonctionnelle... (sur le principe du tuto)

J'ai englobé tout mes block dans un div que j'ai appelé id="f***in_ie_correcteur" !

Ce div à des "margin left et right: auto; text-align: left; width: 750px;" qui le centre sous mozilla. Ensuite, pour le centrer sous ie j'ai mis au body un "text-align: center" et j'ai enlevé la definition des "margin: auto" des différents block qui empéchaient l'execution du hack sous se fichu ie.

C'EST MOCHE mais ça marche. Je deteste cette partie de dénormalisation,
elle m'oblige :
1 - à quitter mon petit editeur de texte favori "kwrite" (sous linux)
2 - à travailler sous windows.
alors si en 3 vous avez un éditeur windows (css php mysql html) efficasse et joli à me conseiller je suis preneur !!! Smiley smile là je test pspad qui à l'air de bien repondre mais qui surcharge un peu l'ecran de choses inutiles ! Smiley smile

En tout cas ton idée de definir un taille au body est vraiment pas mal, je la garde sous la main pour une future utilisation ou pour une amélioration ! Smiley smile
encore une fois merci.
Ju.

ps. ya un petit div qui traine ! Smiley smile bonne nuit Smiley ravi
Sujet clos
Aller à