Les marges

26 juin 2006 à 7:47:40

Bonjour,

Quelqu'un pourrait-il me renseigner?

Les marges sont-elles différentes sous Opéra, parce que mon menu ne s'aligne pas de la même façon, déja j'ai du mettre une catégorie !important pour la différence entre Firefox et IE, mais là je ne sais pas quoi faire pour Opera...

Et en plus il disparait sous Opera..

#menu
{
float: left;
width: 170px;
margin-left:120px!important;
margin-left:60px;
margin-top:10px!important;
margin-top:290px;
padding:0;
}

http://www.histozart.be/index.html

Merci
Françoise

Kaesar

26 juin 2006 à 8:15:38

nan c'est tout aussi bien ...

pour moi
pareil que firefox ..
bonne continuation

Francoise

26 juin 2006 à 8:28:55

Ah oui! pourtant pour moi le menu n'est pas à la même place sous Opera o_O

http://img211.imageshack.us/img211/5166/opera3vi.jpg

Il devrait être en dessous de la barre noire comme dans les autres navigateurs

http://img149.imageshack.us/img149/6448/firefox3il.jpg

Françoise

Kaesar

26 juin 2006 à 8:41:06

ben moi je viens de vérifier encore tout est bien ..
C'eest quoi la résolution de ton écran ??c'est surement un problème d'écran ...

en tout cas moi j'avais ce genre de problème .. mon site était agréable sur mon ordi .. mais sur unautre tout changeait ..
enfin maintenant ca va mieux

LaoSeb

26 juin 2006 à 9:09:53

Salut françoise,

Je te conseille de mettre tes marges à 0. Comme cela tu ne t'embètes pas après.
Quand tu utilises une liste tu peux commencer par faire:

ul, li{
margin: 0;
padding: 0;
}

Le mieux est quand même d'initialiser toutes les marges à 0 avec le sélecteur universel (*):

*{
margin: 0;
padding: 0;
}

Bye,

Francoise

26 juin 2006 à 14:48:53

Bonjour LaoSeb,

Je vais essayer ce que tu me proposes, je te dirai quoi..

Kaesar ma résolution est à 1024

Bon j'ai essayé ton sélecteur universel mais cela ne change rien, d'ailleurs j'avais déjà mis les marge à 0 dans body alors àa fait le même effet...

Quelqu'un d'autre à une idée, parce que je suis allée voir sur un autre ordi et cela donne toujours une différence sous Opera...

Françoise

strucky

26 juin 2006 à 16:39:09

Perso, j'ai le même rendu sous FF et Opera, par contre pourquoi :

margin-left:120px!important;
margin-left:60px;
margin-top:10px!important;
margin-top:290px;

Un !important pour 60px et 280px de différence, il y a un problème quelque part à mon avis.

Riko

26 juin 2006 à 16:59:40

Salut,
Tu peux essayer de remplacer ton css par celui ci :

#menu
{
width: 170px;
padding:0;
position: absolute;
top: 280px;
left: 120px;
}

Francoise

26 juin 2006 à 17:54:26

Riko , j'ai essayé de remplacer par ton code et mon menu se positionne sur toute la hauteur de ma page mais pas là ou il doit être...

Strucky, oui je pense aussi qu'il y a une différence énorme entre IE et Firefox mais je ne sais pas ou je fais l'erreur attends je mets le code

/* Feuille de style pour les site d'accessibilité
Crée par : Françoise
Date : 25 juin 2006
*/

body{
background-image:url(images/fond.jpg);
background-repeat: no-repeat;
color:black;
font-family:Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
font-size:1em;
height:100%;
margin:0;
padding:0;
width:100%;
}
#menu
{
float: left;
width: 170px;
margin-left:120px!important;
margin-left:60px;
margin-top:10px!important;
margin-top:290px;
padding:0;
}

.element_menu
{
background-color: #fff;
background-repeat: repeat-x;
margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h4 /* Tous les titres de menus */
{
color: #000;
font-family: Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
text-align: left;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

/*Les liens du menu*/
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #000;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #8a889e;
color: #ffeef8;
}

/* Le corps de la page */

#corps
{
border-left: 8px solid black;
margin-left: 355px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
margin-top:280px;
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #000;
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}

#arbre{
font-size:0.7em;
}
#corps h1
{
color: #000;
text-align: center;
font-family: Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
}

#corps h2
{
height: 30px;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
.element_corps ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

/*Les liens du menu*/
.element_corps a /* Tous les liens se trouvant dans un menu */
{
color: #000;
}

.element_corps a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #8a889e;
color: #ffeef8;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;
margin-top:260px;
width:100%;
text-align: center;
color: #B3B3B3;
background-color: #fff;
background-repeat: repeat-x;
border: 8px solid black;
}

Merci
Françoise

strucky

26 juin 2006 à 18:24:06

Ca vient de la marge de ton pied de page qui fait tout planter.

body{
background: #fff url(images/fond.jpg);
background-repeat: no-repeat;
color:black;
font-family:Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
font-size:1em;
margin:0;
padding:0;
}
#menu
{
float: left;
width: 170px;
margin-left: 60px;
padding: 0;
}
.element_menu
{
background-color: #fff;
background-repeat: repeat-x;
margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h4 /* Tous les titres de menus */
{
color: #000;
font-family: Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
text-align: left;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
/*Les liens du menu*/
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #000;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #8a889e;
color: #ffeef8;
}
/* Le corps de la page */
#corps
{
border-left: 8px solid black;
margin-left: 355px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
margin-top: 280px;
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #000;
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}

#arbre{
font-size:0.7em;
}
#corps h1
{
color: #000;
text-align: center;
font-family: Georgia, Arial, "Trebuchet MS", Impact, sans-serif;
}
#corps h2
{
height: 30px;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
.element_corps ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
/*Les liens du menu*/
.element_corps a /* Tous les liens se trouvant dans un menu */
{
color: #000;
}
.element_corps a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #8a889e;
color: #ffeef8;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #fff;
background-repeat: repeat-x;
border: 8px solid black;
}

Quelques remarques,

A quoi sert element_menu ?
Au lieu de faire margin: 0 et ensuite margin-left: 10px, fait plutôt margin: 0 0 0 10px;

Un width 100% sur un bloc ne sert à rien, c'est sa largeur par défaut.

Riko

26 juin 2006 à 19:03:26

Citation : Francoise

mon menu se positionne sur toute la hauteur de ma page

Chez moi ça fonctionne :
http://tudebutes.free.fr/pages_pour_sdz/francoise/index.html

Francoise

26 juin 2006 à 19:06:12

Je suis désolée mais maintenant j'ai mon menu qui est différent sous les trois navigateurs et plus aucun n'est à la bonne place....

J'arrête pour ce soir ...merci

Françoise

Les marges

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Les marges

Les marges

Supprimer

Modérer

Signaler le message aux modérateurs