28172 sujets

CSS et mise en forme, CSS3

Centrer float...est-ce possible ?

BOnjour à tous !

Je suis nouveau sur le forum alors je souhaite tout d'abord remercier le travail de ceux qui donnent leur aide ! Smiley biggrin

Je viens vers vous pour trouver une solution face à un énième (me direz-vous) problème de centrage sous IE.

J'ai, avant de poster ce message, passé plusieurs nuit à essayer de régler mon problème. Le voici :

Sous Mozilla Firefox les page de mon site sont centrées impécablements, mais sous IE je me retrouve avec mon site centré sur la gauche. Voici le lien :

http://perso.numericable.fr/emlacroix/site/index_new1.html

J'ai essayé l'astuce du "texte-align:enter;" mais il n'y a que le Header qui se centre.
Le problème semble venir du ''float'' du bloc de gauche.
De plus mon cadre principal disparait complètement ! Je suis vraiment désespéré Smiley bawling


Voici ma page HTML:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles_new1.css">
<title>Positionnement CSS</title>
</head>
<body>

<div id="bandeau"></div>

<div id="menu2"></div>

<div class="menu">
<ul>
 <li><a href="http://perso.numericable.fr/emlacroix/site/index_new1.html">accueil</a></li>
 <li><a href="http://perso.numericable.fr/emlacroix/site/philosophie.html">philosophie</a></li>
 <li><a href="http://perso.numericable.fr/emlacroix/site/references.html">references</a></li>
 <li><a href="http://perso.numericable.fr/emlacroix/site/contact.html">contact</a></li>
</ul>
</div>

<div id="cadre"></div>


</body>
</html>
<html>

et ma feuille de style: 

body{
background-color:#CCCCCC;
font-family:arial;
font-size:8pt;
width:950px;
height:600px;
margin:0 auto;
text-align:center;
}


div#bandeau {
background-image:url(images/bandeau.jpg);
background-repeat:no-repeat;
margin-top:100px;
width:950px;
height:84px;
text-align:left;
}



div#menu2 {
        float:left;
	width:950px;
	height:518px;
	background-image:url(images/bandeau_gche.jpg);
}




.menu ul {
        padding:0;
        margin:0;
        margin-left:auto;
        margin-right:auto;
        list-style-type:none;
        text-align:center;
}


.menu li {
        float:left; /*pour IE*/
        border-left:1px solid black;
}
.menu ul li a {
        display:block;
        float:left;   
        width:192px;
        line-height:30px; /*hauteur de l'image de fond*/
        background:black url(images/btn.jpg) repeat-x;
        text-transform: uppercase;
        font-family: "arial;
        font-size: 70%;
        color: #FFFFFF;
        text-decoration: none;
        color:#DCDCDC;
        text-align:center;
}
.menu ul li a:hover {
 background:black url(images/btn_hover.jpg) repeat-x;
 color:white;
}  





div#cadre {
float:left;
background-image:url(images/background.jpg);
width:772px;
height:486px;
display:block;
font size: 20pt;
font-family:arial;
text-align:left;
margin-left:auto;
margin-right:auto;        
}


J'espère que vous pourrez m'aider Smiley sweatdrop
Modifié par tricostik (27 May 2010 - 06:49)
Merci pour ton conseil Raphael.

En effet j'ai pu voir à quel point ça pouvait être compliqué !!! Smiley decu

Malheureusement en mettant ''inline-block'' à la place de ''block'' je n'ai pas le résultat centré, de plus mon menu se déplace lorsque je réduis ou agrandis ma fenêtre.

ICi l'aperçu : http://perso.numericable.fr/emlacroix/site/index_new1.html

Que faire ?

J'ai mis

body{
background-color:#CCCCCC;
font-family:arial;
font-size:8pt;
width:950px;
height:600px;
margin:0 auto;
text-align:center;
}


div#bandeau {
background-image:url(images/bandeau.jpg);
background-repeat:no-repeat;
margin-top:100px;
width:950px;
height:84px;
text-align:left;
}



div#menu2 {
        float:left;
	width:950px;
	height:518px;
	background-image:url(images/bandeau_gche.jpg);
        background-repeat:no-repeat;
}




.menu ul {
        padding:0;
        margin:0;
        list-style-type:none;
        text-align:center;
}


.menu li {
        float:left;
        border-left:1px solid black;            
}

.menu ul li a {
        display:inline-block;
        float:left;  
        width:192px;
        line-height:30px; /*hauteur de l'image de fond*/
        background:black url(images/btn.jpg) repeat-x;
        text-transform: uppercase;
        font-family: "arial;
        font-size: 70%;
        color: #FFFFFF;
        text-decoration: none;
        color:#DCDCDC;
        text-align:center;
}
.menu ul li a:hover {
 background:black url(images/btn_hover.jpg) repeat-x;
 color:white;
}  





div#cadre {
float:left;
background-image:url(images/background.jpg);
width:772px;
height:486px;
display:block;
font size: 20pt;
font-family:arial;
text-align:left;
margin-left:auto;
margin-right:auto;        
}
Salut, si j'ai bien compris tu veux centrer ton site , c'est ça ?
Si c'est le cas, tu n'as qu'à mettre un div GlOBALE ( qui regroupe tous tes éléments ) et lui mettre un margin auto sur les coté , par exemple :

#main {margin:0 auto;width:800px}
MErci "integrateurweb2" !!!!!!!!!!!!!

Ca fonctionne en effet !

J'ai ajouté à cela le ''text-align:center;" dans mon body pour centrer dans IE et le ''text-align:left'' dans le dossier parent.

Juste un dernier petit point si je peux me permettre : les intitulés de mes boutons sont maintenant centrés sur le côté gauche des boutons, comment puis-je faire pour les recentrer ? Car un "text-align:left;" ne résous pas ce problème. De plus il n'y a plus mon div principal Smiley confus
Modifié par tricostik (27 May 2010 - 17:46)
Sujet clos
Aller à