28172 sujets

CSS et mise en forme, CSS3

Problème de centrage

Bonjour,
j'ai apparemment un pb de centrage (c'est ok sur mon pc mais pas sur l'ipad d'un correspondant) sur le site http://www.equilibrenaturopathie.fr

voici la css de mes cadres


#cadre {
	position: relative;
	width: 989px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	background-color: #F2F1F5;
	background-image: url(img/fond_container.png);
	background-repeat: no-repeat;
}
#cadre_fond_bord {
	position: relative;
	width: 989px;
	min-height: 1490px;
	top: 0px;	
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	background-image: url(img/bord_ombre.gif);
	background-repeat: repeat-y;
}

#cadrecentral {
	width: 500px;
	margin-left: 250px;
	margin-top: 0px;
	margin-right: 170px;
	padding-left: 7px;
	padding-right: 7px;
	font-family: 'Arial', 'Lucida Grande', Helvetica, Verdana, sans-serif;
	text-align: justify;
	font-size: 12px;
}

#cadrebas {
	width: 1069px;
	margin-left: 60px;
	margin-top: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	font-family: 'Arial', 'Lucida Grande', Helvetica, Verdana, sans-serif;
	text-align: justify;
	font-size: 12px;
}

#cadregauche {
	float: left;
	text-align: right;
	width: 211px;
	padding: 0px 2px 0px 0px;
	margin-top: 0px;
	margin-left: 33px;
}

#cadredroite {
	float: right;
	text-align: left;
	width: 59px;
	padding: 0px 0px 0px 2px;
	margin-top: 0px;
	margin-right: 152px;
}
.module_droite {
	float: inherit;
	text-align: right;
	width: 140px;
	padding: 0px 2px 0px 2px;
	background-color: #F2F1F5;
	border: 1px solid #000000; /* cadre menu */
	color: black;
	margin-right: 2px;
	margin-bottom: 8px;
	font-family: 'Bitsream Vera Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
	font-size: 88%;
}

.module_gauche {
	float: inherit;
	text-align: left;
	width: 140px;
	padding: 0px 2px 0px 2px;
	border: 1px solid #000000; /* cadre menu */
	color: black;
	margin-right: 2px;
	margin-bottom: 8px;
	font-family: 'Bitsream Vera Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
	font-size: 88%;
}


sur les principaux qui déterminent le centrage, j'ai bien
margin-left: auto;
margin-right: auto;


pour le html, c'est 

<div id="cadre"> 
<div id="cadre_fond_bord">
<div id="bandeau">
 <img src="img/bandeau.gif" width="983" height="266" />
</div>

<!-- menu --> 
<div id="cadregauche">
le menu
</div>

<div id="cadredroite">
les modules de droite
</div>

<div id="bas">
<img src="img/bas-de-page.png" width="986" height="110" />
</div>

<div id="cadrecentral">
mon texte
 </div>
</div>
</div>
</div>
<div id="cadrebas">
mon footer
</div>


comment mieux centrer cette page ? je bloque
Salut,

je pense que cela vient de ta div#cadrebas qui faisait scroller sur l'ipad en horizontal

voici les modifs que tu peux faire (tu peux adapter)

#cadrebas {
    font-family: 'Arial','Lucida Grande',Helvetica,Verdana,sans-serif;
    font-size: 12px;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    width: 900px;
}
Modérateur
Pris de vitesse par une Super Merguez ^^

Mais j'aurais plus dis :

#cadrebas {
    font-family: 'Arial','Lucida Grande',Helvetica,Verdana,sans-serif;
    font-size: 12px;
    margin: 0 auto;/*ici*/
    padding-left: 0;
    padding-right: 0;
    text-align: center;/*ici*/
    /*et ici supprimer width: 1069px; */
}


Et en résolution 1024x768 on a un tout petit scroll horizontal qui sera facile a enlevé a quelques pixels près Smiley smile
Modifié par _laurent (16 Aug 2012 - 10:11)
Pour #cadrebas: supprimer le width (inutile), supprimer la marge à gauche (la proposition de _laurent à base de text-align:center est bonne), et ne pas rajouter des marges automatiques (inutiles et de toute façon sans effet sur un bloc en width:auto).

Pour l'adaptation sur iPad: la mise en page, qui a une largeur totale de 1005px (989px plus 8px de marge par défaut sur l'élément BODY), passera en mode portrait (1024px). Pour être un peu plus large on peut éventuellement supprimer les marges par défaut de BODY. Par contre, ça ne passera pas en mode portrait (768px de large). Là, ça demanderait une adaptation avec des Media Queries par exemple.

Pas de recette miracle car ça dépend de chaque site et de ce qu'on veut faire, mais en gros il faut se renseigner sur les Media Queries et sur la META viewport (a minima, peut-être utiliser <meta name="viewport" content="width=device-width,initial-scale=1">).
Sujet clos
Aller à