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

Ajustement automatique contenant un menu sur plusieurs lignes

3 réponses
Avatar
olideb
J'ai un petit soucis d'ajustement de la hauteur d'un <div>
quand celui-ci contient une menu css (voir en haut de page ici :
http://www.dinant.be/ex1.htm)

Si le cadre identique contient du texte simple, le cadre est bien ajusté
au contenu. (voir en bas de la même page)

Je voudrais donc, lorsque les onglets occupent plusieurs lignes (quand
je redimensionne le navigateur), que la hauteur du div s'adapte en
conséquence.

La feuille de style se trouve ici :
http://www.dinant.be/style/standard/screen2.css

Une idée ?

Merci d'avance

3 réponses

Avatar
SAM
olideb a écrit :
J'ai un petit soucis d'ajustement de la hauteur d'un <div>
quand celui-ci contient une menu css (voir en haut de page ici :
http://www.dinant.be/ex1.htm)



La Georgia surtout en 9pt (pourquoi des points au lieu de pixels ?)
est complétement inadaptée à une lecture aisée à l'écran ... surtout
quand elle est en blanc sur un fond irrégulier.

Là je commence par faire [Control] + [+]
histoire d'y voir un peu
et hop! le texte des onglets commence à en dépasser en bas.

Si le cadre identique contient du texte simple, le cadre est bien ajusté
au contenu. (voir en bas de la même page)

Je voudrais donc, lorsque les onglets occupent plusieurs lignes (quand
je redimensionne le navigateur), que la hauteur du div s'adapte en
conséquence.



Je n'ai rien à redimensionner, en mode par défaut, c'est déjà l'bazar
avec les onglets qui flottent plus bas que la barre de menu.

Si tes onglets sont en float,
il faut mettre dans la barre des menus
un "stoppeur" de flottaison à la fin de ces onglets.
(régler et bidouiller les marges négatives/positives de ce stoppeur pour
fixer la position verticale des onglets / au bord bas de la barre).


La feuille de style se trouve ici :
http://www.dinant.be/style/standard/screen2.css

Une idée ?



Pour la question a, a:hover, a:active, a:ce-qu'on-veut
utiliser les "portes coulissantes" (*)
et, pendant qu'on y est, refaire l'image en lui donnant plus de hauteur
pour quand l'utilisateur zoome le texte

#menu a {
vertical-align: middle;

ne devrait servir à rien, ton A est de type block.
Le vertical-align est pour les élément inline
Pour centrer la police verticalement dans le bloc il lui faudrait
line-height = 38px; (hauteur du bloc)

font-family: georgia;
ça va ! on le sait, ça a été dit dans body ;-)

J'aurais quand même séparé le
#menu1 li
du
#menu1 a
dans la FdS

#menu1 li
{
display: block;
padding: 0;
float: left;
width: 102px;
height: 38px;
}

#menu1 a
{
display: block;
padding: 0;
margin: 0;
height: inherit;
text-align: center;
font-size: 10px;
line-height: 38px;
color: #555555;
text-decoration: none;
}


(*) google connait les portes coulissantes
sinon
http://stephane.moriaux.perso.orange.fr/internet/web_css/rollover/bouton_3_etats_css

--
sm
Avatar
olideb
Merci pour toutes ces infos, mais je n'arrive toujours pas à me dépatouiller
de ce problème.
C'est quoi un "stoppeur" de flotaison ?

Merci


On 2007-10-22 14:48:19 +0200, SAM
said:

olideb a écrit :
J'ai un petit soucis d'ajustement de la hauteur d'un <div>
quand celui-ci contient une menu css (voir en haut de page ici :
http://www.dinant.be/ex1.htm)



La Georgia surtout en 9pt (pourquoi des points au lieu de pixels ?)
est complétement inadaptée à une lecture aisée à l'écran ... surtout
quand elle est en blanc sur un fond irrégulier.

Là je commence par faire [Control] + [+]
histoire d'y voir un peu
et hop! le texte des onglets commence à en dépasser en bas.

Si le cadre identique contient du texte simple, le cadre est bien
ajusté au contenu. (voir en bas de la même page)

Je voudrais donc, lorsque les onglets occupent plusieurs lignes (quand
je redimensionne le navigateur), que la hauteur du div s'adapte en
conséquence.



Je n'ai rien à redimensionner, en mode par défaut, c'est déjà l'bazar
avec les onglets qui flottent plus bas que la barre de menu.

Si tes onglets sont en float,
il faut mettre dans la barre des menus
un "stoppeur" de flottaison à la fin de ces onglets.
(régler et bidouiller les marges négatives/positives de ce stoppeur
pour fixer la position verticale des onglets / au bord bas de la barre).


La feuille de style se trouve ici :
http://www.dinant.be/style/standard/screen2.css

Une idée ?



Pour la question a, a:hover, a:active, a:ce-qu'on-veut
utiliser les "portes coulissantes" (*)
et, pendant qu'on y est, refaire l'image en lui donnant plus de hauteur
pour quand l'utilisateur zoome le texte

#menu a {
vertical-align: middle;

ne devrait servir à rien, ton A est de type block.
Le vertical-align est pour les élément inline
Pour centrer la police verticalement dans le bloc il lui faudrait
line-height = 38px; (hauteur du bloc)

font-family: georgia;
ça va ! on le sait, ça a été dit dans body ;-)

J'aurais quand même séparé le
#menu1 li
du
#menu1 a
dans la FdS

#menu1 li
{
display: block;
padding: 0;
float: left;
width: 102px;
height: 38px;
}

#menu1 a
{
display: block;
padding: 0;
margin: 0;
height: inherit;
text-align: center;
font-size: 10px;
line-height: 38px;
color: #555555;
text-decoration: none;
}


(*) google connait les portes coulissantes
sinon
http://stephane.moriaux.perso.orange.fr/internet/web_css/rollover/bouton_3_etats_css



Avatar
Olivier Miakinen
Le 01/11/2007 23:19, olideb a écrit :

C'est quoi un "stoppeur" de flotaison ?



<cit. http://www.yoyodesign.org/doc/w3c/css2/visuren.html#flow-control>
Le contrôle du flux autour des flottants : la propriété 'clear'
</cit.>

[ Plusieurs DIZAINES de lignes citées ]



Merci d'aller lire ceci de toute urgence :
http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html