Sujets similaires

Coucou, c'est encore moi (Oui je galère un peu...).

Bon, je suis sur que la faute est débile cette fois encore, mais je la trouve pas... Quand je change les côtes de mon margin-top / margin-left, il n'y a pas que les images concernés qui bougent, mais tout le contenu ! Si un jour vous avez besoin de quelqu'un pour passer pour un Noob, appelez moi, je vais passer pro dans cet art Smile

HTML:

CSS:

Merci d'avance pour votre aide Wink

Hello!
Une petite image pournous montrer de quoi tu parles ou un lien nous aiderait à comprendre ce que tu veux exactement! ^^

Quand tout est à 0 :

Social Icons qui déplacent tout le contenu du site 110

Quand margin-top:-11% et margin-left:80% :

Social Icons qui déplacent tout le contenu du site 210

Est-ce que tous lesw composants de ta page sont en position: relative? Si oui, le problème vient de là:

Le position: relative détermine la position de l'objet en fonction de la position de l'objet précédent. Cette position dépen d'un navigateur à l'autre (oui, car relative prend soit le bord inférieur droit, soit le bord supérieur gauche, dépendant des navigateur qui interprètent la phrase "par rapport à l'objet" différemment).
Dans tous les cas, en ajoutant un margin, tu changes la position de ton div: son bord supérieur ou inférieur change immédiatement de place!

Bien sûr, n'ayant pas le reste de ton code, je ne peux faire que des suppositions! ^^"

Dis donc, ils sont matinales sur CSS Actif Smile

En fait, j'ai mis des margin(top/left/right) à toutes mes class. Du coup, je viens de comprendre ce que ça fait... C'est vrai que je débute en codage (il y a 2 semaines, j'aurais pleuré devant une page CSS, je connaissais vraiment RIEN ! Donc du coup, je fais comment pour placer correctement mes différentes parties ?

Voici tout mon code CSS :

Spoiler:

Code:: body {
background: #1e5799;
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #828282 0%, #2d2d2d 100%, #207cca 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(0%,#828282), color-stop(100%,#2d2d2d), color-stop(100%,#207cca));
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#207cca',GradientType=1 );
background-attachment:fixed;
margin:0px;
}

.logo {
margin-left:0%;
margin-top:0%;
}

.social{
position:relative;
margin-top:-11%;
margin-left:80%;
width:300px;
}

.social ul {
padding: 0 32px;
}

.social ul li{
float:right;
list-style: none;
margin-left:7px;
}
.social ul li a{
position:relative;
z-index:0;
opacity:0.5;
-moz-transition:0.3s ease;
-webkit-transition:0.3s ease;
transition:0.3s ease;
}

.social ul li a:hover{
top:-8px;
opacity:1;
}

.menu {
float:right;
margin-right:2%;
margin-top:-2.5%;
word-spacing:1.5em;
letter-spacing:0.2em;
}

.menu a {
color:#83a4b0;
text-decoration:none;
}

.menu a:hover{
color:#000000;
text-decoration:none;
text-transform:uppercase;
}

.hr {
margin-top:-2.5%;
}

.textea {
text-align:center;
margin-left:35%;
margin-right:35%;
size:11px;
}

h2 {
color: #ffffff;
text-decoration: none;
-webkit-transition-property: color;
-webkit-transition-duration: 2s;
-moz-transition-property: color;
-moz-transition-duration: 2s;
transition-property: color;
transition-duration: 1s;

}

h2:hover {
color:#000000;
}

.savoirplus a{
float:right;
color:#83a4b0;
text-decoration:none;
}

.savoirplus:hover a{
float:right;
color:#ffffff;
text-decoration:none;
}

#slider {
margin-top:-22%;
margin-left:5%;
}

#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}

#slider, #slider li {
width:228px;
height:331px;
overflow:hidden;
}

#slider2 {
margin-top:-27%;
margin-left:80%;
}

#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider2, #slider2 li {
width:228px;
height:331px;
overflow:hidden;
}

.copy {
text-align:center;
margin-top:9%;
color:#ffffff;
font-size:13px;
}

.copy a {
text-decoration:none;
color:#989898;
}

.copy:hover a {
color:#000000;
}

En fait, je vais à la fac et je révise mes cours, alors que mes cours commencent à 14h. Vu que j'habite à 2h de la fac, autant venir tôt pour réviser un max x) Et donc, en arrivant, avant de commencer, pour me réveiller, je passe ici. Et pour faire une pause dans mes révisions sur la GUI java, je résous vos problèmes! <3

Bref, donc pour ton CSS, au lieu d'utiliser des margin à tout va (c'est pas bien de faire ça! Très très mauvais! >< Surtout si tu utilises une position! si tu utilises une position, pas de margin, si tu n'utilises pas de position: margin. Et ceci en règle générale, pas forcément dans tous les cas, hein!), retire tes position relative, et fais des position absolute. En plus de cela, utilise les paramètres de position: top, bottom, left et right. Voici un exemple:

Code:

.maClasse {
position: absolute;
top: 3px;
left: 3px;
}

Le position absolute prend sa position 0: soit en haut à gauche de la fenêtre du navigateur, soit à l'intérieur du div qui contient ce que tu veux bouger (en gros, si tu as un corps de page qui entoure tous tes éléments, tes éléments auront une position en rapport à se div.)

Il est souvent long de calibrer les position: absolute, mais c'est la meilleure manière
Vérifie aussi que tes position:absolute donnent la même chose sur plusieurs résolutions d'écran différentes!

Tout nikel, y a plus qu'à faire pareil dans le javascript Very Happy

Merci beaucoup Nyo Wink

De rien! ^^

Si le problème est résolu, n'oublie pas de le dire et de mettre Résolu dans le titre du sujet, pour que les modérateurs puissent le classer!
Et si tu as d'autres questions, n'hésite pas! ^^

Nyo The Neko

Social Icons qui déplacent tout le contenu du site 926145

Social Icons qui déplacent tout le contenu du site

Social Icons qui déplacent tout le contenu du site

Sujets similaires

Sujets similaires

Partenaires Or