Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

div: hauteur auto ?

10 réponses
Avatar
alainL
Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci pour le coup de main !

#contenu {
height: 100%;
margin-left: 20%;
overflow: auto;
color: #000000;
}
#annee{
position:relative;
width:90%;
height:auto;
border: 2px solid black;
padding : 5px;
}
#gauche {
position:relative;
float:left;
width:30%;
}
#milieu {
position:relative;
float:left;
width:30%;
}

--
AlainL

http://autourdalos.fr

10 réponses

Avatar
SAM
Le 24/02/15 23:33, alainL a écrit :
Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci pour le coup de main !



la colonne de droite va se mettre à droite mais aussi glisser sous les 2
autres

#contenu {
height: 100%;
margin-left: 20%;
overflow: auto;
color: #000000;
}
#annee{
position:relative;
width:90%;
height:auto;
border: 2px solid black;
padding : 5px;
}
#gauche {
position:relative;



pas besoin de la position

float:left;
width:30%;
}
#milieu {
position:relative;



pas besoin de la position

float:left;
width:30%;
}




.final { clear: left;
height:1px;margin:0;padding:0;border:none }


<div id="contenu>
<div id="annee">
<div id="gauche">
<ul><li>à gauche,<li>gauche!<li>mauvaise<li>troupe</ul>
</div>
<div id="milieu">
la perle dans l'écrin
</div>
<div>colonne droite<br>ou<br>le contenu sans colonne</div>
<div class="final"></div>
</div>
<p> du blabla pour voir</p>
</div>




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 25/02/2015 00:10, SAM a écrit :
Le 24/02/15 23:33, alainL a écrit :
Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci pour le coup de main !



la colonne de droite va se mettre à droite mais aussi glisser sous les 2
autres

#contenu {
height: 100%;
margin-left: 20%;
overflow: auto;
color: #000000;
}
#annee{
position:relative;
width:90%;
height:auto;
border: 2px solid black;
padding : 5px;
}
#gauche {
position:relative;



pas besoin de la position

float:left;
width:30%;
}
#milieu {
position:relative;



pas besoin de la position

float:left;
width:30%;
}




.final { clear: left;
height:1px;margin:0;padding:0;border:none }


<div id="contenu>
<div id="annee">
<div id="gauche">
<ul><li>à gauche,<li>gauche!<li>mauvaise<li>troupe</ul>
</div>
<div id="milieu">
la perle dans l'écrin
</div>
<div>colonne droite<br>ou<br>le contenu sans colonne</div>
<div class="final"></div>
</div>
<p> du blabla pour voir</p>
</div>




Cordialement,



Merci Sam. J'ai réutilisé tout ça sur une page du site et testé sur IE8,
sur Ffx et Chrome. Impeccable... enfin, pour la partie que tu as
corrigée. (J'aurai encore de l'occupation si je veux virer tous les
<table> inutiles !)

http://alos-sibas-abense.com/bulletins1.php

J'ai un petit souci avec "<li>", souci qui n'apparaît pas avec IE (pour
une fois !) mais visible avec Chrome et Ffx:
dans le dernier div de la page (année2014), le contenu de la colonne de
droite est décalé vers le haut. J'ai voulu mettre un <br> mais il décale
trop. Une <li> vide en bas pour voir n'est pas beau et ne corrige rien.

Bonne journée

alain







--
AlainL

http://autourdalos.fr
Avatar
SAM
Le 25/02/15 11:33, alainL a écrit :
Le 25/02/2015 00:10, SAM a écrit :
Le 24/02/15 23:33, alainL a écrit :
Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !







(snip des correctifs)

Merci Sam. J'ai réutilisé tout ça sur une page du site et testé

http://alos-sibas-abense.com/bulletins1.php

J'ai un petit souci avec "<li>", souci qui n'apparaît pas avec IE (pour
une fois !) mais visible avec Chrome et Ffx:
dans le dernier div de la page (année2014), le contenu de la colonne de
droite est décalé vers le haut. J'ai voulu mettre un <br> mais il décale
trop. Une <li> vide en bas pour voir n'est pas beau et ne corrige rien.




#milieu ul,
#gauche ul { margin: 0; }

par exepmple



Attention !
quand on étroitise ça cafouille avec le div de droite !


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 25/02/2015 14:21, SAM a écrit :
Le 25/02/15 11:33, alainL a écrit :
Le 25/02/2015 00:10, SAM a écrit :
Le 24/02/15 23:33, alainL a écrit :
Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur
toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !






>>>
(snip des correctifs)

Merci Sam. J'ai réutilisé tout ça sur une page du site et testé

http://alos-sibas-abense.com/bulletins1.php

J'ai un petit souci avec "<li>", souci qui n'apparaît pas avec IE (pour
une fois !) mais visible avec Chrome et Ffx:
dans le dernier div de la page (année2014), le contenu de la colonne de
droite est décalé vers le haut. J'ai voulu mettre un <br> mais il décale
trop. Une <li> vide en bas pour voir n'est pas beau et ne corrige rien.




#milieu ul,
#gauche ul { margin: 0; }

par exepmple



Attention !
quand on étroitise ça cafouille avec le div de droite !


Cordialement,



Le margin 0 ne change rien. Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale mais ça
semble marcher sur Ffx et Chrome ...MAIS PLUS SOUS IE8 !!!
J'ai réduit la largeur de"annee" et centré... faudra pas étroitisé plus !
Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))


--
AlainL

http://autourdalos.fr
Avatar
SAM
Le 25/02/15 15:28, alainL a écrit :

Le margin 0 ne change rien.



il faut placer le correctif *à la place* de l'ancien ou *après* !

???
Je re-regarde

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale



Non, c'est très TRÈS bancal !!
si on bricole pour que ça marche c'est qu'on est sur la mauvaise voie
Revoir plus haut ou autrement.

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))




Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 25/02/2015 17:57, SAM a écrit :
Le 25/02/15 15:28, alainL a écrit :

Le margin 0 ne change rien.



il faut placer le correctif *à la place* de l'ancien ou *après* !

???
Je re-regarde

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale



Non, c'est très TRÈS bancal !!
si on bricole pour que ça marche c'est qu'on est sur la mauvaise voie
Revoir plus haut ou autrement.

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))




Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!




Bon, j'ai ajouté #gauche ul,#milieu ul {margin : 0} C'était OK pour
l'alignement mais IE me bouffait les puces dans ces deux colonnes. En
corrigeant avec margin-top tout va bien...........

Je me demande si je ne vais pas vexer le monsieur en question et garder
mes div. Quel est le risque ???
Sinon, que me conseillerais-tu ?

Cordialement


--
AlainL

http://autourdalos.fr
Avatar
Pierre Maurette
alainL :
Le 25/02/2015 17:57, SAM a écrit :
Le 25/02/15 15:28, alainL a écrit :

Le margin 0 ne change rien.



il faut placer le correctif *à la place* de l'ancien ou *après* !

???
Je re-regarde

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale



Non, c'est très TRÈS bancal !!
si on bricole pour que ça marche c'est qu'on est sur la mauvaise voie
Revoir plus haut ou autrement.

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))




Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!




Bon, j'ai ajouté #gauche ul,#milieu ul {margin : 0} C'était OK pour
l'alignement mais IE me bouffait les puces dans ces deux colonnes. En
corrigeant avec margin-top tout va bien...........

Je me demande si je ne vais pas vexer le monsieur en question et garder mes
div. Quel est le risque ???
Sinon, que me conseillerais-tu ?

Cordialement



Changez l'id en class. C'est fait pour ça.

--
Pierre Maurette
Avatar
docanski
SAM a écrit le 25/02/2015 17:57 :

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!



même en "class" ?

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
SAM
Le 25/02/15 20:08, docanski a écrit :
SAM a écrit le 25/02/2015 17:57 :

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!



même en "class" ?



Heu !!!!!

Je voulais dire de même "ID" !!!!

Il ne peut il y avoir qu'UN *et un seul* div de même ID dans un fichier


V'là que je m'icromouds tout seul !!!!!


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
alainL
Le 25/02/2015 20:29, SAM a écrit :
Le 25/02/15 20:08, docanski a écrit :
SAM a écrit le 25/02/2015 17:57 :

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!



même en "class" ?



Heu !!!!!

Je voulais dire de même "ID" !!!!

Il ne peut il y avoir qu'UN *et un seul* div de même ID dans un fichier


V'là que je m'icromouds tout seul !!!!!


Cordialement,



Ça marche ! Et Monsieur Validator qui met les notes a trouvé le code
correct :-))
Merci à tous.
Sam, repose-toi, je ne t'embêterai plus ... ce soir !
Cordialement

--
AlainL

http://basaburua.fr