Div flottantes les unes en dessous des autres
Résolu/Fermé
A voir également:
- Div flottantes les unes en dessous des autres
- Div c++ - Télécharger - Langages
- #Div/0 excel moyenne - Guide
- Excel moyenne sans div/0 ✓ - Forum Excel
- Remplacer #div/0 par vide - Forum Bureautique
- Div cote a cote - Forum CSS
13 réponses
flav1313
Messages postés
751
Date d'inscription
mardi 24 août 2010
Statut
Membre
Dernière intervention
22 octobre 2012
100
14 mai 2012 à 12:07
14 mai 2012 à 12:07
Inline-block est ton ami =).
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
Merci pour cette piste, mais quand tu regardes leur exemple, tu as le même problème : la choucroute n'est pas juste en dessous "Lorem Elsass ipsum réchime amet".
http://www.alsacreations.com/xmedia/tuto/exemples/whitespace/inline-block0.html
http://www.alsacreations.com/xmedia/tuto/exemples/whitespace/inline-block0.html
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
14 mai 2012 à 13:29
14 mai 2012 à 13:29
Hello,
Qu'est-ce qui ne marche pas dans ta page de test ?
Qu'est-ce qui ne marche pas dans ta page de test ?
Ce qui ne marche pas c'est que toutes mes div sur la deuxième ligne sont alignées, or je voudrais que chaque div se place juste dessous celle qui est au dessus. Je voudrai en fait arriver à ça : http://test.morka.fr/ex.png (trafiqué avec un éditeur graphique).
J'ai modifié mon exemple avec "inline-block". Ça + "float:left" ça fait à peu près ce que je veux, mais uniquement sur la colonne de droite (espacement vertical fixe entre les div).
Je voudrais faire comme sur Pinterest, mais je commence à croire qu'il y a quelque chose de généré automatiquement avec du Javascript.
J'ai modifié mon exemple avec "inline-block". Ça + "float:left" ça fait à peu près ce que je veux, mais uniquement sur la colonne de droite (espacement vertical fixe entre les div).
Je voudrais faire comme sur Pinterest, mais je commence à croire qu'il y a quelque chose de généré automatiquement avec du Javascript.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
TechPoint
Messages postés
15
Date d'inscription
vendredi 11 mai 2012
Statut
Membre
Dernière intervention
14 mai 2012
2
14 mai 2012 à 14:28
14 mai 2012 à 14:28
Salut, :)
Je viens de regarder les CSSs de ton site et je ne vois nul part de dimension attribuée à la largeur maximale de la résolution, à ton body en fait.
Si tu lui donnes une largeur adéquate, tes images devraient s'aligner comme sur ta retouche photo.
Je viens de regarder les CSSs de ton site et je ne vois nul part de dimension attribuée à la largeur maximale de la résolution, à ton body en fait.
Si tu lui donnes une largeur adéquate, tes images devraient s'aligner comme sur ta retouche photo.
Je n'en ai pas donné justement parce que je voudrais que ça s'adapte facilement à toutes les résolutions en repassant à la ligne dès que tu arrives sur le bord droit et que ça reprenne juste dessous le premier élément.
Je cherche une solution en CSS qui permette de "boucher" tous les trous.
Je cherche une solution en CSS qui permette de "boucher" tous les trous.
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
14 mai 2012 à 14:55
14 mai 2012 à 14:55
Très honnêtement je ne suis pas sûr que ce possible mais si tu y arrives je suis preneur :)
Bah je pense que je vais devoir faire du Javascript au chargement de la page, récupérer la taille du navigateur et trouver une astuce pour placer mes éléments comme je le souhaite (en regroupant un certain nombre de div dans un autre container flottant).
La largeur de mes éléments est fixe, il n'y a que la hauteur qui change. Et le nombre de div à afficher peut changer aussi.
La largeur de mes éléments est fixe, il n'y a que la hauteur qui change. Et le nombre de div à afficher peut changer aussi.
jjsteing
Messages postés
1670
Date d'inscription
vendredi 11 mai 2007
Statut
Contributeur
Dernière intervention
21 mai 2012
181
14 mai 2012 à 15:26
14 mai 2012 à 15:26
Bonjour,
Effectivement, javascrip pour trouver la résolution est une bonne chose, mais ca t oblige a recharger la page si l utilisateur change la taille de la fenetre...
Alors qu avec un width =100%, qu importe la taille de la fenetre ;)
pour les div flotant.. regarde un ptit exemple sur mon site :
jjsteing.com -> webmastering -> FixedDiv.php
@++
Effectivement, javascrip pour trouver la résolution est une bonne chose, mais ca t oblige a recharger la page si l utilisateur change la taille de la fenetre...
Alors qu avec un width =100%, qu importe la taille de la fenetre ;)
pour les div flotant.. regarde un ptit exemple sur mon site :
jjsteing.com -> webmastering -> FixedDiv.php
@++
Merci. C'est bien sur le BODY que vous voulez que je fixe la taille? Ca ne m'aide pas beaucoup.
Pareil pour ta div en position:fixed jjsteing, ça ne me sert pas pour ici.
J'espère que mes visiteurs de changeront pas la taille de leur navigateur une fois sur le site ;)
Pareil pour ta div en position:fixed jjsteing, ça ne me sert pas pour ici.
J'espère que mes visiteurs de changeront pas la taille de leur navigateur une fois sur le site ;)
Voilà j'ai réussi et c'était finalement pas trop compliqué. En plus ça a l'air de fonctionner sur tous les navigateurs "fixes" (pas tester sur mobile) : http://test.morka.fr
Les divs sont affichées de gauche à droite et de haut en bas donc dans l'ordre que je veux. Sans Javascript, tout reste aligné sur la même ligne. Là je parcours toutes les divs et je place chacune d'elles juste en dessous celle du dessus. A noter que le "display:inline-block" est obligatoire ;)
Je copie le code ici parce que je ne pense pas laisser mon test en ligne indéfiniment :
Les divs sont affichées de gauche à droite et de haut en bas donc dans l'ordre que je veux. Sans Javascript, tout reste aligné sur la même ligne. Là je parcours toutes les divs et je place chacune d'elles juste en dessous celle du dessus. A noter que le "display:inline-block" est obligatoire ;)
Je copie le code ici parce que je ne pense pas laisser mon test en ligne indéfiniment :
<html>
<head>
<title>Tests div</title>
<style type="text/css">
DIV {
width: 420px;
display: inline-block;
border: solid 4px #999999;
margin: 10px;
}
</style>
<script type="text/javascript">
function init(nbDiv) {
if (navigator.appName == "Netscape" || navigator.appName == "Opera")
largeur_f = window.innerWidth;
else
largeur_f = document.documentElement.offsetWidth; // IE
// Nb colonnes : largeur page / (divWith + borders + margins)
nbCol = Math.floor(largeur_f / 448);
// Tableau contenant toutes les divs
tabDiv = new Array()
for (i=0 ; i<nbDiv ; i++) {
tabDiv[i] = document.getElementById("div" + i);
}
// On parcours les divs a partir de la deuxieme ligne
// On place chaque div a la position top de la div au dessus + sa hauteur
// Ne pas oublier de prendre la marge en compte (10px)
for (i=nbCol ; i<nbDiv ; i++) {
pos = tabDiv[i - nbCol].offsetTop+tabDiv[i - nbCol].offsetHeight+10;
tabDiv[i].style.position = "absolute";
tabDiv[i].style.top = pos + "px";
tabDiv[i].style.left = (tabDiv[i - nbCol].offsetLeft - 10) + "px";
}
}
</script>
</head>
<body>
<?php
for ($i=0 ; $i<15 ; $i++) {
echo "<div id=\"div$i\" style=\"height:".intval(mt_rand(40, 170))."px;\">blabla $i</div>\n";
}
?>
<script type="text/javascript">init(15)</script>
</body>
</html>
jjsteing
Messages postés
1670
Date d'inscription
vendredi 11 mai 2007
Statut
Contributeur
Dernière intervention
21 mai 2012
181
Modifié par jjsteing le 15/05/2012 à 10:19
Modifié par jjsteing le 15/05/2012 à 10:19
Re bonjour..
Sans vouloir insister, d'après le code source de la page, c'est bien 2 <div> qui sont utilisé pour faire le menu du haut...
J dis ca... mais j dis rien...
Et je vois pas en quoi c'est flottant, a moins que tu soit passé sur un autre test.
Mais bon, c'est résolu, et c'est le principal ;)
@++
N'hésitez pas à poser des questions, il vaut mieux être con 5 min que le rester toute sa vie ;)
N'oubliez pas de mettre votre Post en 'Résolu' quand c'est le cas :-D
Sans vouloir insister, d'après le code source de la page, c'est bien 2 <div> qui sont utilisé pour faire le menu du haut...
J dis ca... mais j dis rien...
Et je vois pas en quoi c'est flottant, a moins que tu soit passé sur un autre test.
Mais bon, c'est résolu, et c'est le principal ;)
@++
N'hésitez pas à poser des questions, il vaut mieux être con 5 min que le rester toute sa vie ;)
N'oubliez pas de mettre votre Post en 'Résolu' quand c'est le cas :-D
Comment ça "2 <div>" ? Sur mon exemple je n'ai pas de menu en haut, mais sur ce que je veux faire je vais effectivement mettre un menu en haut et au centre de la page. Normalement ça ne devrait pas changer grand chose au placement du contenu.
Le titre est "flottant" parce qu'au départ je pensais à une solution en css avec du flottant pour que tout se fasse tout seul et en fait ce n'est a priori pas possible aussi simplement.
Le titre est "flottant" parce qu'au départ je pensais à une solution en css avec du flottant pour que tout se fasse tout seul et en fait ce n'est a priori pas possible aussi simplement.
jjsteing
Messages postés
1670
Date d'inscription
vendredi 11 mai 2007
Statut
Contributeur
Dernière intervention
21 mai 2012
181
Modifié par jjsteing le 15/05/2012 à 10:43
Modifié par jjsteing le 15/05/2012 à 10:43
sur https://www.pinterest.com/
en etudiant le code source de la page, pour faire leur menu en haut, ils utilisent 2 div.
En fait 3 div.. 1) bar recherche/about/login, 2)menu déroulant 3) pub centrée...
mais la 1) disparait quand on descend..
via firefox , dans menu , outils, web devellopement, inspect tu vois tout ca ;)
en etudiant le code source de la page, pour faire leur menu en haut, ils utilisent 2 div.
En fait 3 div.. 1) bar recherche/about/login, 2)menu déroulant 3) pub centrée...
mais la 1) disparait quand on descend..
via firefox , dans menu , outils, web devellopement, inspect tu vois tout ca ;)
