Boite entière - barre de texte html
Résolu/Fermé
Lecodeurhtmlcss
Messages postés
77
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
24 août 2022
-
Modifié le 23 avril 2020 à 19:26
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 - 2 mai 2020 à 18:24
declique69 Messages postés 14 Date d'inscription mardi 17 mai 2016 Statut Membre Dernière intervention 4 mai 2020 - 2 mai 2020 à 18:24
A voir également:
- Boite entière - barre de texte html
- Se connecter à ma boite hotmail - Guide
- Texte barré whatsapp - Guide
- Capture d'écran page entière - Guide
- Boite gmail saturée - Guide
- Editeur html - Télécharger - HTML
3 réponses
"Reformulons la question : j'aimerai que les titres de ma barre de navigation occupent la hauteur de ma barre de navigation. "
Formulez la plutôt ;)
Dans ce cas il suffit de changer la taille du texte. en CSS vous avez la propriété font-size dont je vous incite à rechercher le fonctionnement (et valeurs/unités possibles)pour éviter les erreurs que vous avez faites lors de vos précédents CSS.
Ou à l'inverse vous pouvez indiquer une taille pour le container du texte qui correspond à la hauteur de la police existante.
Le quadratin d'imprimerie me semble adapté à ce que vous voulez faire(symbole "em") puisque qu'il se base justement sur cette hauteur du texte,
exemple concret pour le 2nd cas:
Pour le premier cas:
Bien sûr l'espace de 2em est une valeur indicative et non la valeur finale: testez et changer les dimensions éventuellement du container pour que les dimensions correspondent. Valeur indicative aussi car si vous avez changé la taille du texte précédemment 200% correspondra çà une autre taille de police que celle de la valeur de base(soit le double de la nouvelle valeur)
Formulez la plutôt ;)
Dans ce cas il suffit de changer la taille du texte. en CSS vous avez la propriété font-size dont je vous incite à rechercher le fonctionnement (et valeurs/unités possibles)pour éviter les erreurs que vous avez faites lors de vos précédents CSS.
Ou à l'inverse vous pouvez indiquer une taille pour le container du texte qui correspond à la hauteur de la police existante.
Le quadratin d'imprimerie me semble adapté à ce que vous voulez faire(symbole "em") puisque qu'il se base justement sur cette hauteur du texte,
exemple concret pour le 2nd cas:
<nav class=hauteurtexte> <!--<ul><li>... contenu du texte des menus--> <!-- ne pas oublier de changer leur comportement par la propriété display avec une valeur adéquate ou avec une mise en page de type float pour que la liste perde ses valeurs par défaut qui est une mise en page en colonne--> </nav>
.hauteurtexte{
height:1em;/* 1em = 100% de la taille du texte courant, 1.25em = 125% et 0.5em = 50% de cette hauteur ce qui a l'avantage d'être simple et rapide à écrire et d'être scalaire dont d'adapter les dimensions du container à la taille du texte*/
/* éventuellement testez et ajouter des marges au container pour éviter un dépassement car la taille serait trop juste (les bords des éléments ul et li pouvant être de quelques pixels et varient selon les navigateurs*/
}
Pour le premier cas:
.texte-double-taille{
font-size:2em;/* 2em = 200% de sa valeur de base, à appliquer à vos élemnts d textes des liens qui il me semble sont des éléments de liste à puce ordonnée dont il faut évidemment changer le comportement pour ne pas avoir les propriétés des listes à puce ordonnée, ovoir commentaire dans l'autre code*/
margin:0;
padding:0;/* les 2 dernières lignes suppriment les marges donc tout espace qui sera vide */
}
Bien sûr l'espace de 2em est une valeur indicative et non la valeur finale: testez et changer les dimensions éventuellement du container pour que les dimensions correspondent. Valeur indicative aussi car si vous avez changé la taille du texte précédemment 200% correspondra çà une autre taille de police que celle de la valeur de base(soit le double de la nouvelle valeur)
declique69
Messages postés
14
Date d'inscription
mardi 17 mai 2016
Statut
Membre
Dernière intervention
4 mai 2020
2
2 mai 2020 à 18:24
2 mai 2020 à 18:24
Il faut appliquer le hover sur la balise li et non pas sur la balise A
Par ailleurs je n'aurais pas utilisé un tableau mais plutôt un flex-box. C'est beaucoup plus souple pour gérer l'alignement, la taille des éléments, etc.
Un tuto sur les felx-box ici :http://stylescss.free.fr/v2-tutoriels/flex-box.php
li.active {
display: table-cell;
background-color: #4CAF50;
color: white;
}
li:hover:not(.active) {
display: table-cell;
background-color: #555;
color: white;
padding: 8px 25px 17px 25px;
}
Par ailleurs je n'aurais pas utilisé un tableau mais plutôt un flex-box. C'est beaucoup plus souple pour gérer l'alignement, la taille des éléments, etc.
Un tuto sur les felx-box ici :http://stylescss.free.fr/v2-tutoriels/flex-box.php
Salut,
"Je suis en train de coder un site en html / css et j'ai créé une barre de navigation."
Plutôt que de parler de coder qui ne veut rien dire en français écrivez le texte du/des langages.
il serait utile d'indiquer votre question si vous en avez une ou simplement c que vous voulez sinon dur de répondre à quelque chose qui n'est pas formulé.
" Or, il y a que les blocs de la barre de navigation ne remplisse pas celle-ci."
Vous parlez des éléments du menus? Si c'est pour les répartir vous pouvez simplement utiliser des valeurs en pourcentage pour chacunes d'elles(avec un display:inline; ce qui est pratique car c'est le comportement par défaut de la plupart des éléments textes).
6 éléments de menus = 1/6 pour chacun.
Avec la règle de 3 on obtient:
(1*100)/6 = 16.66% pour chaque élément. Je vous conseille d'arrondir à 16 ou 16.5 pour tenir compte des marges(selon la taille des marges l'un ou l'autre).
Bien sûr cela implique que votre container(les 100%) tiennent compte de la place.
Au passage la propriété display n'a pas de valeur table-cell. En écrivant une valeur fausse celà ne a pas aider.
Je ne vois pas non plus l'intérêt de mélanger 2 façons d'inclure du CSS et mêmes chose pour la propriété vertical-align elle n'a pas de valeur "middle" en plus vous omettez le point-virgule pour indiquer la fin de l'instruction ça ne risque pas de faire quoique ce soit...
Tout le reste étant plus ou moins à l'avenant et comme vous n'avez aucune demande précise commencez par écrire un CSS correct et posez une question réelle...
"Comme vous le voyez, les boutons ne remplissent pas la barre. Quand on survole la barre, c'est juste un cadre autour du texte qui est surligné. "
Et alors? C'est ce que vous indiquez dans un CSS approximatif et bourré de fautes donc c'est le résultat que vous obtenez.... pas vraiment de mystère. Si vous voulez autre chose changez votre CSS pour ça, vous pouvez commencer par corriger vos erreurs de valeurs qui n'existent pas ou mauvaise syntaxe.
En ouvrant la console (du navigateur) vous pouvez voir la plupart de vos erreurs en choissant l'onglet CSS.
Autre remarque:
C'est bien compliqué comme sélecteur, est-ce vraiment utile? ça correspondrait à quoi comme règle en français, d'où l'importance entre parler de "coder" qui est plutôt un abus de langage et un anglicisme mais "d'écrire" du code informatique éventuellement mais surtout un langage donc savoir le sens que vous voulez mettre et utiliser le bon vocabulaire/grammaire(A.K.A. syntaxe et autres règles d'écriture nécessaire et indispensable en informatique).
"Je suis en train de coder un site en html / css et j'ai créé une barre de navigation."
Plutôt que de parler de coder qui ne veut rien dire en français écrivez le texte du/des langages.
il serait utile d'indiquer votre question si vous en avez une ou simplement c que vous voulez sinon dur de répondre à quelque chose qui n'est pas formulé.
" Or, il y a que les blocs de la barre de navigation ne remplisse pas celle-ci."
Vous parlez des éléments du menus? Si c'est pour les répartir vous pouvez simplement utiliser des valeurs en pourcentage pour chacunes d'elles(avec un display:inline; ce qui est pratique car c'est le comportement par défaut de la plupart des éléments textes).
6 éléments de menus = 1/6 pour chacun.
Avec la règle de 3 on obtient:
(1*100)/6 = 16.66% pour chaque élément. Je vous conseille d'arrondir à 16 ou 16.5 pour tenir compte des marges(selon la taille des marges l'un ou l'autre).
Bien sûr cela implique que votre container(les 100%) tiennent compte de la place.
Au passage la propriété display n'a pas de valeur table-cell. En écrivant une valeur fausse celà ne a pas aider.
Je ne vois pas non plus l'intérêt de mélanger 2 façons d'inclure du CSS et mêmes chose pour la propriété vertical-align elle n'a pas de valeur "middle" en plus vous omettez le point-virgule pour indiquer la fin de l'instruction ça ne risque pas de faire quoique ce soit...
vertical-align:middle /* inexistant et donc faux, toutes les propriétés CSS doivent se terminer par un ";"*/
Tout le reste étant plus ou moins à l'avenant et comme vous n'avez aucune demande précise commencez par écrire un CSS correct et posez une question réelle...
"Comme vous le voyez, les boutons ne remplissent pas la barre. Quand on survole la barre, c'est juste un cadre autour du texte qui est surligné. "
Et alors? C'est ce que vous indiquez dans un CSS approximatif et bourré de fautes donc c'est le résultat que vous obtenez.... pas vraiment de mystère. Si vous voulez autre chose changez votre CSS pour ça, vous pouvez commencer par corriger vos erreurs de valeurs qui n'existent pas ou mauvaise syntaxe.
En ouvrant la console (du navigateur) vous pouvez voir la plupart de vos erreurs en choissant l'onglet CSS.
Autre remarque:
li a:hover:not(.active)
C'est bien compliqué comme sélecteur, est-ce vraiment utile? ça correspondrait à quoi comme règle en français, d'où l'importance entre parler de "coder" qui est plutôt un abus de langage et un anglicisme mais "d'écrire" du code informatique éventuellement mais surtout un langage donc savoir le sens que vous voulez mettre et utiliser le bon vocabulaire/grammaire(A.K.A. syntaxe et autres règles d'écriture nécessaire et indispensable en informatique).
Lecodeurhtmlcss
Messages postés
77
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
24 août 2022
1
Modifié le 24 avril 2020 à 18:27
Modifié le 24 avril 2020 à 18:27
Je suis désolé de ne pas avoir écris de question, je ne demandais pas à me faire allumer sur une erreur de mon code (je suis débutant). D'ailleurs
est très utile.
"Code" est le mot reconnu pour parler de l'écriture d'un programme informatique. Même CCM l'utilise ! (quand on fait "<code>" Demandez à Mr Larousse, ou à l'Académie française !
Reformulons la question : j'aimerai que les titres de ma barre de navigation occupent la hauteur de ma barre de navigation.
Est-ce possible ? Merci beaucoup
li a:hover:not(.active)
est très utile.
"Code" est le mot reconnu pour parler de l'écriture d'un programme informatique. Même CCM l'utilise ! (quand on fait "<code>" Demandez à Mr Larousse, ou à l'Académie française !
Reformulons la question : j'aimerai que les titres de ma barre de navigation occupent la hauteur de ma barre de navigation.
Est-ce possible ? Merci beaucoup
Artofnoise
>
Lecodeurhtmlcss
Messages postés
77
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
24 août 2022
Modifié le 25 avril 2020 à 16:36
Modifié le 25 avril 2020 à 16:36
Salut,
en quoi vous ait je allumé?
Si vous lisez mon message et mes réponses vous comprendrez pourquoi je parle d'écriture et non de code.
Je vous incite à penser à ce que vous voulez pour le traduire en terme de code.
Sans aller chercher un dictionnaire ou l'académie française j'ai donné une définition du mot qui est effectivement un abus de langage plus qu'autre chose.
Mais là n'est pas la question. Je suis désolé que vous ayez pensé que je vous allumez alors qu'il s'agit d'une critique de vos erreurs vous incitant à vous concentrer sur les bases dont certaines semblent vous manquer.
Avez vous une question ou demande en particulier?
Est ce que les réponses que je vous ait apportées ne peuvent pas y répondre?
Quel est le but de votre message? Si vous cherchez un conseil, avis ou aide il faudrait commencer par l'écouter plutôt que vous sentir offusqué si vous ne comprenez pas la réponse.
Je traduit cela par un sélecteur CSS s'appliquant à tout les li ayant des éléments enfants a lors du survol et qui ne sont pas de la classe .active ce qui pourrait s'écrire beaucoup plus simplement en utilisant une autre classe il me semble.
La complexité étant rarement conciliable avec une bonne écriture du code surtout quand elle n'est pas nécessaire je ne voit pas pourquoi vous ne simplifierez pas tout ça en revoyant la façon dont vous l'avez faite pour écrire de façon plus simple et donc plus facile à comprendre/modifier ainsi que plus rapide pour les navigateurs à interpréter.
C'est tout à fait la même chose que je veut dire en remettant en question vos fondamentaux et lacunes dans mon précédent message.
Après si vous cherchez des louanges pour un code plutôt mal écrit et comportant des fautes et n'avez aucune demande je ne vois pas l'intérêt de votre sujet...
Votre raisonnement vous empêchera d'apprendre si vous pensez savoir sans comprendre et n'êtes pas capable de vous remettre en question.
Cdt. une personne tentant de vous aider, formuler votre question(si question ou problème il y a) étant la première nécessité pour le résoudre je vous incite(encore) à commencer par faire cela.
en quoi vous ait je allumé?
Si vous lisez mon message et mes réponses vous comprendrez pourquoi je parle d'écriture et non de code.
Je vous incite à penser à ce que vous voulez pour le traduire en terme de code.
Sans aller chercher un dictionnaire ou l'académie française j'ai donné une définition du mot qui est effectivement un abus de langage plus qu'autre chose.
Mais là n'est pas la question. Je suis désolé que vous ayez pensé que je vous allumez alors qu'il s'agit d'une critique de vos erreurs vous incitant à vous concentrer sur les bases dont certaines semblent vous manquer.
Avez vous une question ou demande en particulier?
Est ce que les réponses que je vous ait apportées ne peuvent pas y répondre?
Quel est le but de votre message? Si vous cherchez un conseil, avis ou aide il faudrait commencer par l'écouter plutôt que vous sentir offusqué si vous ne comprenez pas la réponse.
li a:hover:not(.active)
Je traduit cela par un sélecteur CSS s'appliquant à tout les li ayant des éléments enfants a lors du survol et qui ne sont pas de la classe .active ce qui pourrait s'écrire beaucoup plus simplement en utilisant une autre classe il me semble.
La complexité étant rarement conciliable avec une bonne écriture du code surtout quand elle n'est pas nécessaire je ne voit pas pourquoi vous ne simplifierez pas tout ça en revoyant la façon dont vous l'avez faite pour écrire de façon plus simple et donc plus facile à comprendre/modifier ainsi que plus rapide pour les navigateurs à interpréter.
C'est tout à fait la même chose que je veut dire en remettant en question vos fondamentaux et lacunes dans mon précédent message.
Après si vous cherchez des louanges pour un code plutôt mal écrit et comportant des fautes et n'avez aucune demande je ne vois pas l'intérêt de votre sujet...
Votre raisonnement vous empêchera d'apprendre si vous pensez savoir sans comprendre et n'êtes pas capable de vous remettre en question.
Cdt. une personne tentant de vous aider, formuler votre question(si question ou problème il y a) étant la première nécessité pour le résoudre je vous incite(encore) à commencer par faire cela.
