Aide design cssRésolu/Fermé

Question

Bonjour, je voudrais savoir comment bloquer mon site sur le bord gauche en faible résolution (quand je fait ctrl scroll haut)
j'ai placer mon conteneur pour qu'il soit tjs centré voici mon code :

#container {
	position: absolute;
	left: 50%;
	margin-left: -445px;
	width: 890px;
	background: #FBFCFA;
	box-shadow: 3px 3px 12px #555;
}

mais lorsque je zoom (ctrl et scroll haut) mon margin-left négatif fait qu'on ne voit plus le bord de mon site

une solution par hasard? 



Configuration: #890 une erreur inconnue s'est produite pour plus d'informations sur cette erreur consulter l'aide de windows

jojo673 · Answer

Utilise margin: auto;
Comme ça la marge est calculé automatiquement pour que ce soit centré.

DarkAurora · Answer

le problème est que mon left:50% auquel je retranche -445px (soit la moitié de la largeur de ma page) me permet de centrer a chaque coup ma page.
si je retire le margin-left: -445px; j'adapte mon left a 22% (ce qui est centrer pour ma résolution) mais dès que je ctrl scroll(haut ou bas) ma page est fixer à 22% du bord gauche et donc ne reste plus centré

me comprends tu?

Chenowith · Answer

Bonjour,
Je dirais la même chose que joj673
margin:0 auto;
Mais  peux-tu nous coller ton css ou un lien, histoire que l'on comprenne bien?

DarkAurora · Answer

le voici mais la partie intéressante c'est sur le 1er post


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #CECECE;
	margin: 0;
	padding: 0;
	color: #000;
}


#container {
	position: absolute;
	left: 50%;
	margin-left: -445px;
	width: 890px;
	background: #FBFCFA;
	box-shadow: 3px 3px 12px #555;
}

#header {
	float: left;
	width: 100%;
	height: 100px;
	background: #fff;
}

#header img {
	vertical-align:-35%;
	padding: 0 35px;
}

#header i{
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 1.5em; /* hauteur du texte : 12 pixels */
}

#nav {
	float: left;
	top: 100px;
	width: 100%;
	height: 40px;
	background: #fff;
}

#content {
	float: left;
	top: 140px;
	width: 100%;
	background: #fff; /*#264564;*/
	border-top: 1px solid white;
	box-shadow: 3px 3px 12px #555;
}

#Diapo{
	margin: 10px 3px 0 10px;
	float: left;
	top: 0;
	left: 0;
	width: 100%;
	height: 280px;
}

#T1, #T2 {
	margin: 17px 0 0 10px;
	float: left;
	width: 48%;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
	box-shadow: 3px 3px 12px black;
}

#T3{
	margin: 10px 0 7px 10px;
	float: left;
	width: 48%;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
	box-shadow: 3px 3px 12px black;
}

#Analogique {
	float: left;
	margin: 110px 0 0 100px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Numerique {
	float: right;
	margin: 110px 100px 0 0;
	top: 250px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Accessoires {
	float: left;
	margin: 63px 0 121px 290px;
	top: 460px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Analogique img, #Numerique img, #Accessoires img {
	border-radius: 10px;
}

#produits {
	float: left;
	margin: 30px;
	width: 822px;
	border-top:1px solid black;
}

#pageproduit {
	position: absolute;
	right: 30px;
	top: 149px;
}

#imgP {
	float: left;
	width: 70px;
	height: 190px;
}

#imgB {
	float: left;
	width: 224px;
	height: 70px;
}

#imgR {
	float: left;
	width: 200px;
	height: 180px;
}

#produitP {
	float: left;	
	margin: 15px 0 0 35px;
	width: 224px;
	height: 190px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#produitB {
	float: left;	
	margin: 15px 0 0 35px;
	width: 224px;
	height: 220px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#produitR {
	float: left;	
	margin: 100px 150px 150px 230px;
	width: 400px;
	height: 300px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#descriptif {
	padding: 0 20px 0 20px;
	width: 500px;
	height: 180px;
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 16px; /* hauteur du texte : 12 pixels */
	text-align: left;
}

#Img1 {
	position: absolute;
	top: 200px;
	right: 20px;
	width: 350px;
	height: 180px;
	border: 1px solid black;
}

#Titre {
	position: absolute;
	top: 400px;
	right: 440px;
}

#Principe {
	position: absolute;
	top: 470px;
	right: 20px;
	width: 500px;
	height: 280px;
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 16px; /* hauteur du texte : 12 pixels */
	text-align: left;
}

#Img2 {
	float: left;
	margin: 90px 0 30px 20px;
	width: 330px;
	height: 230px;
	border: 1px solid black;
}


/* ~~ Pied de page ~~ */
#footer {
	float: left;
	width : 100%;
	height: 5%;
	padding: 10px 0;
	background: #264564;
	color:#fff;
	font-size: small; 
	text-align: center;
	box-shadow: 3px 3px 12px #555;
}

jojo673 · Answer

et en enlevant le   
left: 50%;  
margin-left: -445px;Pour juste mettre  
margin: auto; ?

arthezius · Answer

Comme ça a été dit plusieurs fois, utilise margin: 0px auto; dans ton CSS.
Autrement dit, remplace:
#container {
	position: absolute;
	left: 50%;
	margin-left: -445px;
	width: 890px;
	background: #FBFCFA;
	box-shadow: 3px 3px 12px #555;
}
Par:
#container {
	margin: 0px auto;
	width: 890px;
	background: #FBFCFA;
	box-shadow: 3px 3px 12px #555;
}

DarkAurora · Answer

merci beaucoup effectivement c'est moi qui n'est pas très doué en tout cas merci c'est résolu pour moi

Aide design css

7 réponses

Discussions similaires

Newsletters