div: hauteur auto ?

Le
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 etreste).
Ç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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #26340850
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
alainL
Le #26340901
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
SAM
Le #26340945
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
alainL
Le #26340957
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
SAM
Le #26340979
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
alainL
Le #26340988
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
Pierre Maurette
Le #26340993
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
docanski
Le #26340995
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/
SAM
Le #26341000
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
alainL
Le #26341018
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
Publicité
Poster une réponse
Anonyme