28172 sujets

CSS et mise en forme, CSS3

Décalement vers la droite

Bonjour,

A une époque ou je ne savais pas codé proprement, au normes standard, j'avais crée un site internet . Ce site n'est pas du tout conforme, cependant je suis en train de le refaire dans les régle de l'art !

Mon problème c'est que quand on à une résolution de 1024 sur 768, le site et bien centrer niquel, mais quand on passe dans une résolution inférieur ou supérieur le site se décale à droite c'est trés embêtant j'ai essayé plein de combine mais rien y fait, je fait appel à vous pour de l'aide Smiley cligne


Site en question : http://www.uptransfert.fr


Merci
J'attend tout vos critiques pour améliorer Smiley smile
Faut que tu places tes éléments centrés (tel que le header) en relative plutôt qu'absolu pour qu'ils se centrent quelle que soit la taille de l'écran.
Ensuite tu enlèves le left et ça devrait rouler.
Bonjour,

Le splendide reset CSS (margin et padding à zéro pour tous les éléments) placés dans une CSS appelée après celle définissant les marges auto est très certainement responsable du problème.

Les techniques de reset CSS (surtout celle que tu utilises) sont dangereuses quand on ne sait pas ce que l'on fait, il est donc préférable de les éviter.
Tout et centré mes tout mes elements sont mis n'importe comment
j'ai supp le left et mis tout en relative.
C'est à dire que tout mes élements sont les un en dessous des autres mais centré

body{
        background: url(images/fond.png) repeat-x ;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#FFF;
	background-attachment: fixed;
	font-size:11px;
	font-weight:bold;
	margin-top: 20px;
        margin-bottom: 20px;
}
.ok{

  background-color: #9F6;
  border: 1px solid #6C0;
} 

#facebook
{
	position: relative;
	width: 59px;
	height: 59px;
	margin-left: auto;
	margin-right: auto;
	top: 692px;
	
}
#twiteer
{
	position: relative;
	width: 59px;
	height: 59px;
	margin-left: auto;
	margin-right: auto;
	top: 692px;
	
}


#scroll
{
	position:relative;
	width:05;
	height:50;
	margin-left: auto;
	margin-right: auto;
	top: 15px;
	background-color:#06C;
	border: solid #FFF 2px;
	color:#FFF;
}
#tab
{
	position: relative;
	width: 639px;
	height: 32px;
	margin-left: auto;
	margin-right: auto;
	top: -3px;
}
#scroll:hover
{
	background-color:#FFF;
	border: solid #09C 2px;
	color:#09C;
}
#condition
{
	position:relative;
	width:100;
	height:100;
	margin-left: auto;
	margin-right: auto;
	top: 270px;
}
#aligne_form
{
	position: relative;
	width: 155px;
	margin-left: auto;
	margin-right: auto;
	top: 70px;
}
#inscription
{
	background: url(images/inscription.png) no-repeat;
	position: relative;
	width: 700px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	top: 37px;

}


#header
{
    background: url(images/header.jpg) no-repeat;
    position: relative;
    top: 0px;
    width: 1024px;
    height: 146px;
	margin-left: auto;
    margin-right: auto;

}

#menu
{
    background: url(images/menu.jpg) no-repeat;
	position: relative;
	top: 145px;
	width: 1024px;
	height: 37px;
	margin-left: auto;
    margin-right: auto;
	padding: 12px 15px;

}
#conteneur
{
	position: relative;
	top: -6px;
	margin-left: auto;
	margin-right: auto;
}

#menu ul {
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
}

#menu li.droite {
	float: right;
	margin-right: 105px;
	margin-left: -30px;
	padding: 3px 0;
}
#menu a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
	color: transparent;
}
#bouton_co
{
	background: url(images/bouton_co.jpg) no-repeat;
	position: relative;
	top: 182px;
	width: 274px;
	height: 95px;
	margin-left: auto;
	margin-right: auto;
}


#gauche_co
{
    background: url(images/gauche_co.jpg) no-repeat;
	position: relative;
	top: 273px;
	width: 15px;
	height: 167px;
	margin-left: auto;
    margin-right: auto;
}

#contenu_co
{
	background: url(images/contenu_compte.jpg) no-repeat;
	position: relative;
	top: 271px;
	width: 180px;
	height: 191px;
	margin-left: auto;
	margin-right: auto;
}

#droite_co
{
    background: url(images/droite_co.jpg) no-repeat;
	position: relative;
	top: 273px;
	width: 82px;
	height: 167px;
	margin-left: auto;
    margin-right: auto;
}

#bouton_co2
{
	background: url(images/bouton_co2.jpg) no-repeat;
	position: relative;
	top: 386px;
	width: 177px;
	height: 56px;
	margin-left: auto;
	margin-right: auto;
}

input#connexion
{
background-color:transparent;
width: 140px;
height: 30px;
border: none;
}

input#input
{
background-color:white;
border-color: #3C9FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


#bouton_info
{
	background: url(images/bouton_info.jpg) no-repeat;
	position: relative;
	top: 440px;
	width: 274px;
	height: 73px;
	margin-left: auto;
	margin-right: auto;
}

#gauche_info
{
    background: url(images/gauche_info.jpg) no-repeat;
	position: relative;
	top: 513px;
	width: 22px;
	height: 200px;
	margin-left: auto;
    margin-right: auto;
}

#contenu_info
{
    background: url(images/contenu_info.jpg) no-repeat;
	position: relative;
	top: 513px;
	width: 169px;
	height: 200px;
	margin-left: auto;
    margin-right: auto;
}

#droite_info
{
    background: url(images/droite_info.jpg) no-repeat;
	position: relative;
	top: 513px;
	width: 83px;
	height: 200px;
	margin-left: auto;
    margin-right: auto;
}

#bouton_info2
{
    background: url(images/bouton_info2.jpg) no-repeat;
	position: relative;
	top: 182px;
	width: 274px;
	height: 73px;
	margin-left: auto;
    margin-right: auto;
}

#haut_info
{
    background: url(images/haut_info.jpg) no-repeat;
	position: relative;
	top: 182px;
	width: 569px;
	height: 22px;
	margin-left: auto;
    margin-right: auto;
}

#contenu_info2
{
    background: url(images/contenu_info2.jpg) no-repeat;
	position: relative;
	line-height:24px;
	top: 204px;
	width: 569px;
	height: 24px;
	margin-left: auto;
    margin-right: auto;
}

#bas_info
{
    background: url(images/bas_info.jpg) no-repeat;
	position: relative;
	top: 228px;
	width: 569px;
	height: 15px;
	margin-left: auto;
    margin-right: auto;
}

#contenu_m
{
	background: url(images/contenu_m.jpg) no-repeat;
	position: relative;
	top: 243px;
	width: 691px;
	height: 470px;
	margin-left: auto;
	margin-right: auto;
}

#droite
{
    background: url(images/droite.jpg) no-repeat;
	position: relative;
	top: 182px;
	width: 59px;
	height: 531px;
	margin-left: auto;
    margin-right: auto;
}

#bas
{
    background: url(images/bas.jpg) no-repeat;
	position: relative;
	top: 713px;
	width: 1024px;
	height: 55px;
	margin-left: auto;
    margin-right: auto;
}
/*FORMULAIRE */
label {
display:block;
width:100px;
float:left;
margin-left: 150px;
}
#contenu_info blanc {
	color: #FFF;
}
#blanco {
	color: #FFF;
}
.red {
	color: #F00;
}
.redasteristique {
	color: #B11612;
}
#gain
{
	background: url(images/siteuptransfert1_r1_c2.jpg) no-repeat;
	position: relative;
	width: 113px;
	height: 24px;
	margin-left: auto;
	margin-right: auto;
	top: 0px;
	
}
#bas p {
	color: #000;
}

Modifié par atikilacreation (05 Jul 2010 - 11:28)
atikilacreation a écrit :
Tout et centré mes tout mes elements sont mis n'importe comment
j'ai supp le left et mis tout en relative.
C'est à dire que tout mes élements sont les un en dessous des autres mais centré
Ceci est incompréhensible...

As-tu, comme je le suggérais, enlevé ton reset CSS ?
Clairement pour centrer tout ton site tu englobe tout le contenu dans une <div id="contenu"> et tu lui applique un margin: 0 auto; et une largeur et voila !
Sujet clos
Aller à