Sujet Précédent Sujet Suivant

@media screen.... problème de disopsition des blocs...

Fermé
jjaco Messages postés 529 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 15 mars 2024 - 29 déc. 2014 à 13:17
jjaco Messages postés 529 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 15 mars 2024 - 8 janv. 2015 à 12:42
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



A voir également:

4 réponses

Réponse 1 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
29 déc. 2014 à 15:01
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 

<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>
1
Réponse 2 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
2 janv. 2015 à 12:48
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
1
Réponse 3 / 4
jjaco Messages postés 529 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 15 mars 2024 45
2 janv. 2015 à 21:03
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!!!
0
Réponse 4 / 4
jjaco Messages postés 529 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 15 mars 2024 45
8 janv. 2015 à 12:42
merci animostab, je viens seulement de corriger ma CSS et ça marche...
0

Discussions similaires

PXE-E61 : media test failure, check cable
laurent -
Amal -

116 réponses
affichage checking media
titi__5106 -
jfmimi -

5 réponses