@media screen.... problème de disopsition des blocs...
jjaco
Messages postés
534
Date d'inscription
Statut
Membre
Dernière intervention
-
jjaco Messages postés 534 Date d'inscription Statut Membre Dernière intervention -
jjaco Messages postés 534 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voilà j'ai un site dont voici comment sont disposés mes blocs sur écran normal:
.section1
{
width:95%;
margin:auto;
}
.section2
{
width:95%;
margin:auto;
height:375px;
}
#asideleft
{
float:left;
width:19%;
}
article{
margin:auto;
height:250px;
width:400px;
background:;
}
#asideright
{
width:19%;
margin-top:-250px;
margin-right:45px;
float:right;
}
.section3
{
width:95%;
margin:auto;
}
ma section 1 et 3 est composée de 15 image*s (en principe 3 lignes de 5)
ma section 2 est composée de 3 colonnes:
asideleft et asiderightavec 3 images* les unes sous les autres
et au centre article où je place une autre image format de 3 images* /3 images*
Je transforme ma CSS avec "@media screen and (max-width 1024 px)" parceque j'aimerais qu'au final toutes les images se placent les une sous les autres...
ca marche bien pour section 1 et 3, mais ma section 2, les "blocs" et images se superposent.
Merci de m'aider
voilà j'ai un site dont voici comment sont disposés mes blocs sur écran normal:
.section1
{
width:95%;
margin:auto;
}
.section2
{
width:95%;
margin:auto;
height:375px;
}
#asideleft
{
float:left;
width:19%;
}
article{
margin:auto;
height:250px;
width:400px;
background:;
}
#asideright
{
width:19%;
margin-top:-250px;
margin-right:45px;
float:right;
}
.section3
{
width:95%;
margin:auto;
}
ma section 1 et 3 est composée de 15 image*s (en principe 3 lignes de 5)
ma section 2 est composée de 3 colonnes:
asideleft et asiderightavec 3 images* les unes sous les autres
et au centre article où je place une autre image format de 3 images* /3 images*
Je transforme ma CSS avec "@media screen and (max-width 1024 px)" parceque j'aimerais qu'au final toutes les images se placent les une sous les autres...
ca marche bien pour section 1 et 3, mais ma section 2, les "blocs" et images se superposent.
Merci de m'aider
A voir également:
- @media screen.... problème de disopsition des blocs...
- Windows media player - Télécharger - Lecture
- Screen whatsapp - Accueil - Messagerie instantanée
- Blue screen windows 10 - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Apowersoft screen recorder - Télécharger - Capture d'écran
4 réponses
Bonjour
c'est normal que ca se superpose
1) il y a un margin-right dans asideright donc cela va pousser asideright dans article a partir du bord droit de la fenetre (45px)
2) le width de article est exprimé en pixel et non en %
donc des que la fenetre se réduit et est inférieure a
95% de 400px + 45px + (19% X 2)
les div vont se chevaucher
solution
exprimer tes div et margin en % avec un max-width pour limiter la taille
avec media screen supprimer les float pour faire passer les div en dessous les unes des autres quand la taille ecran devient trop petite pour afficher les images correctement (ce qui se fait en responsive généralement.
voici un exemple de code
</body>
c'est normal que ca se superpose
1) il y a un margin-right dans asideright donc cela va pousser asideright dans article a partir du bord droit de la fenetre (45px)
2) le width de article est exprimé en pixel et non en %
donc des que la fenetre se réduit et est inférieure a
95% de 400px + 45px + (19% X 2)
les div vont se chevaucher
solution
exprimer tes div et margin en % avec un max-width pour limiter la taille
avec media screen supprimer les float pour faire passer les div en dessous les unes des autres quand la taille ecran devient trop petite pour afficher les images correctement (ce qui se fait en responsive généralement.
voici un exemple de code
<head>
<style>
.section2
{
width:95%;
margin:auto;
height:375px;
}
#asideleft
{
float:left;
width:19%;
height:250px;
border:1px solid red;
}
article{
margin:auto;
height:250px;
width:55%;
max-width:400px;
border:1px solid black;
}
#asideright
{
width:19%;
float:right;
height:250px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="section2">
<div id="asideleft"></div>
<div id="asideright"></div>
<article></article>
</div>
</body>
ca t'arracherais la g.... de repondre et dire merci mais bon il semble que c'est ton habitude compte pas sur moi pour t'aider de nouveau
Bonsoir et bonne année....
Merci pour ta réponse, mais je n'ai pas encore regarder si ça fonctionne, je ne sais pas, mais dans nos us et coutumes le 1 janvier est un jour de fête et en général on ne travaille pas la veille, ni le lendemain, alors, attend lundi, SVP
De plus dis moi à quel question je n'ai pas remercié, je le ferai immédiatement!!!
Merci pour ta réponse, mais je n'ai pas encore regarder si ça fonctionne, je ne sais pas, mais dans nos us et coutumes le 1 janvier est un jour de fête et en général on ne travaille pas la veille, ni le lendemain, alors, attend lundi, SVP
De plus dis moi à quel question je n'ai pas remercié, je le ferai immédiatement!!!