HTML - chevauchement de 2 blocs [Résolu/Fermé]

Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
- - Dernière réponse : Jacksons
Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
- 11 janv. 2015 à 15:16
Bonjour,





J'ai un petit soucis de chevauchement avec 2 blocs quand je réduis la fenêtre.

- J'ai un bloc menu
- et mon bloc de conteneur de page

Quand je réduis la fenêtre, ces 2 blocs ce chevauchent. J'ai pris 2 captures d'écran pour montrer le problème:

Quand ma fenêtre de navigation est en taille normale, tout va bien :



Mais quand je la réduis, ça donne ça :




Au niveau du CSS j'ai pour mon menu :

#menu ul
{
list-style:none;
float:left;
width:200px;
height:200px;
margin-left: 350px;
margin-top:40px;
background-color:red;
}


Et pour mon bloc conteneur :

#conteneur-page
{
width:700px;
background-color:#102f5b;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}


Je sais qu'il y a un problème mais je ne l'ai pas identifié.

Merci pour votre aide.
Afficher la suite 

2 réponses

0
Merci
Bonjour,

Utilise des % plutôt que des valeurs en px dans ton Css

cdt
Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
1
0
Merci
Salut,

C'est étrange parce que je n'ai jamais rencontré de problème avant en utilisant les px.

J'ai déjà essayé les % mais ça ne réglait pas mon problème :(
Jacksons
Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
1 > Utilisateur anonyme -
J'ai eu beau essayé les astuces données, ça n'a rien résolu :(
Utilisateur anonyme > Jacksons
Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
-
Rhooooo ....
Jacksons
Messages postés
17
Date d'inscription
mardi 26 juillet 2011
Statut
Membre
Dernière intervention
18 août 2017
1 -
AH NON c'est bon j'ai réussi !

Je donne l'astuce pour les lecteurs éventuels :

J'ai enlevé le margin-left: auto pour mettre une marge avec une valeur chiffrée. Résultat la marge reste permanente entre le bloc conteneur et le menu, et ne fait plus de mauvaise adaptation quand il y a une réduction de la fenêtre.

Merci en tout cas :)