Problème avec DIV et H1
-Shadow-
Messages postés
2152
Date d'inscription
Statut
Membre
Dernière intervention
-
-Shadow- Messages postés 2152 Date d'inscription Statut Membre Dernière intervention -
-Shadow- Messages postés 2152 Date d'inscription Statut Membre Dernière intervention -
Bonjour, j'ai ouvert un site il y a peu et j'y programme un petit service Youtube-like en HTML 4.01 + CSS + PHP. Hélas je rencontre un problème au niveau du design.
En effet, lorsque je liste toutes les vidéos sur la page principale (côte-à-côte! Pas en liste ordonnée comme sur Youtube), j'utilise un float:left pour chaque vidéo affichée et ça marche très bien. Les DIVs sont côte-à-côte.
Hélas, quand la liste des vidéos dépasse la largeur de la page, ils sont renvoyés à la ligne. Ok, aucun problème c'est justement ce que je veux. Mais hélas, ces DIVs se superposent aux éléments en-dessous d'eux! Et ce que j'aimerais c'est qu'ils occupent leur espace nécessaire. De les "pousser" pour faire l'espace nécessaire. J'ai cherché pendant 4 jours, sur Google, et je m'en retrouve très contrarié. J'ai essayé un display: inline;, mais le h1 se retrouve poussé vers la droite même si les DIVs ne se superposent plus au h1.
Voici le code de la classe de DIV qui contient les vidéos :
Et le H1 qui se retrouve superposé:
Merci beaucoup d'avance et A+
Shadow
En effet, lorsque je liste toutes les vidéos sur la page principale (côte-à-côte! Pas en liste ordonnée comme sur Youtube), j'utilise un float:left pour chaque vidéo affichée et ça marche très bien. Les DIVs sont côte-à-côte.
Hélas, quand la liste des vidéos dépasse la largeur de la page, ils sont renvoyés à la ligne. Ok, aucun problème c'est justement ce que je veux. Mais hélas, ces DIVs se superposent aux éléments en-dessous d'eux! Et ce que j'aimerais c'est qu'ils occupent leur espace nécessaire. De les "pousser" pour faire l'espace nécessaire. J'ai cherché pendant 4 jours, sur Google, et je m'en retrouve très contrarié. J'ai essayé un display: inline;, mais le h1 se retrouve poussé vers la droite même si les DIVs ne se superposent plus au h1.
Voici le code de la classe de DIV qui contient les vidéos :
.case {
position: relative;
overflow: hidden;
float: left;
font-size: 12px;
width: 160px;
height: 268px;
border: 1px solid #505050;
border-radius: 8px;
padding: 4px 4px 4px 4px;
margin: 12px 6px 12px 12px;
}
Et le H1 qui se retrouve superposé:
h1 {
display: inline;
margin-left: 8px;
margin-top: 8px;
margin-bottom: -8px;
border-bottom: 3px solid #0fbbcc;
width: 610px;
font-size: 24px;
}
Merci beaucoup d'avance et A+
Shadow
A voir également:
- Problème avec DIV et H1
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide - Forum Bureautique
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Div pascal - Télécharger - Édition & Programmation
- Div x - Télécharger - Conversion & Codecs
3 réponses
Salut,
si vous positionnez des éléments en flottants(float) vous les sorte du flux qui est le positionnement correspondant à l'ordre d'apparence des balises.
Pour supprimer le décalage d'élément étant hors du flux il vous faut lorsque vous avez finit vos float indiquer un élément(souvent saut à la ligne ou balise hr, mais n'importe quel élément peut faire l'affaire) que le flux reviens à la normale avec la propriété css
clear: both;
http://www.w3schools.com/cssref/pr_class_clear.asp
Des exemples ici:
http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml
Et un cours sur le principe du positionnement(nottament la notion de flux lorsque l'on utilise float):
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
enjoy :)
si vous positionnez des éléments en flottants(float) vous les sorte du flux qui est le positionnement correspondant à l'ordre d'apparence des balises.
Pour supprimer le décalage d'élément étant hors du flux il vous faut lorsque vous avez finit vos float indiquer un élément(souvent saut à la ligne ou balise hr, mais n'importe quel élément peut faire l'affaire) que le flux reviens à la normale avec la propriété css
clear: both;
http://www.w3schools.com/cssref/pr_class_clear.asp
Des exemples ici:
http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml
Et un cours sur le principe du positionnement(nottament la notion de flux lorsque l'on utilise float):
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
enjoy :)
en mettant un clear:both; dans la div suivante celle qui contient toutes tes vidéos
https://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
https://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
