[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > des espaces blancs en CSS > Lecture du sujet

des espaces blancs en CSS

Vous devez être inscrit pour pouvoir poster des messages

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

marc.cortes

# Posté le 12/07/2008 à 09:43:23

Groupe : Membres

bonjour ,
je viens de découvrir votre excellent site il y a 15 jours. Après avoir lu les tutos sur le CSS , je me suis lancé la semaine passée en essayant de modifier ma colonne gauche (menu) de mon site qui passera de html en CSS .
voici l'ancienne version en html colonne html
et ma maquette de celle en CSS colonne CSS
Je suis assez satisfait des titres de mon menu réalisés avec la balise <h2>
Ne souhaitant pas utiliser la balise <p> pour les liens afin de ne pas modifier également le contenu de mes pages ou se trouve le texte , j'ai utilisé la balise <h3> .
Mon problème est que 1) le lien est en gras , et je ne sais pas comment l'enlever et 2) il y a un saut de ligne (espace blanc que je voudrais supprimer ) à chaque fois que je passe de h2 à h3 et inversement.
Je pense que les balises h3 ne correspondent pas , mais je ne sais pas quoi mettre!!!
merci pour votre aide , soyez indulgents , je débute.
voici le code des 4 première ligne , ensuite ça se répète.
Citation : code du menu

<h2><font face="Arial, Helvetica, sans-serif">Accueil</font></h2>
<h3>
<a href="http://www.swingbourse.com/cnewsflash/listenews.php">Flash swingbourse</a><br />
<a href="http://www.swingbourse.com/indices.php">Indices</a><br />
</h3>
<h2><font face="Arial, Helvetica, sans-serif">Analyses graphiques</font></h2>

pour voir le menu intégré dans le site c'est ICI

par avance merci
marc

Tout homme qui dirige ou qui fait quelque chose , a , contre lui : Ceux qui font la même chose , ceux qui font précisément le contraire , et surtout , la grande armée de gens beaucoup plus sévères , qui ne font rien .
Swingbourse.com ; Annuaire bourse et finance ; annuaire généraliste gratuit

nicko77

# Posté le 12/07/2008 à 10:33:19

what's up ?

Groupe : Membres

Salut.

Voilà les éléments CSS :

Code : CSS

h3
{
font-weight: normal /*Enlève le gras*/
margin: 0; /*supprime le saut de ligne. A mettre sur h2.*/
}

marc.cortes

# Posté le 12/07/2008 à 16:27:44

Groupe : Membres

excellent Nicko77 , tu m'as super bien aidé.

j'ai encore 2 petits trucs que je souhaiterai faire:
1) je voudrais faire avancer mon texte de 5px pour le menu comme pour les liens . J'ai trouvé le formule avec " text-indent" mais le problème est qu'il ne s'applique qu'à la première ligne. Existe-il une autre balise?
2) Mon text est de 12px , mais je voudrais avoir un backgroud de 16 px afin que les liens ne soit pas collés les uns au autres. Je n'ai pas trouvé de balise correspondante , mais elle doit bien exister , ama.

Juste un dernier détail , je voudrai savoir si d'utiliser des balises h3 pour les liens de mon menu est du bidouillage ou du code CSS réalisé dans les règles de l'art? o_O

rappel de l'url de la colonne menu en CSS

merci à vous tous
marc

obud

# Posté le 12/07/2008 à 16:31:46

Groupe : Membres

pour le texte :
padding-left:5px;
pour les lien :
line-height;16px; font-size:12px; vertical-align:middle;

marc.cortes

# Posté le 12/07/2008 à 17:32:04

Groupe : Membres

très bien pour le padding-left:5px; obud , ca marche super !!!
par contre le line-height;20px; vertical-align:middle; ne fonctionne pas du tout pour centrer mon texte de 12px dans un espace de 20px ni pour modifier la largeur de mon espace qui semble rester figé à 12px comme le texte .

merci

Édité le 12/07/2008 à 17:33:01 par marc.cortes

Yano

# Posté le 12/07/2008 à 17:36:04

Groupe : Membres

Bonjour,

Les <hn> sont un moyen de structurer le document.
Il servent à indiquer une hiérarchie de titres.
Je dirais donc que ton utilisation systématique dans les menus est en est une utilisation abusive et inutile.
Tu pourrais simplement utiliser des <p>.
Ou passer à quelque chose de courant, une (des) liste(s).

obud ne t'indique pas à quoi appliquer ses propositions.

Donc, en restant dans ton utilisation inappropriée des <h3>, tout en sachant que ça va s'appliquer à tous les <h3> de la page concernée par la feuille de style, essaye

Code : CSS

h3 {
  padding-left : 5px;
  height : 16px;
  line-height : 16px;
etc.
  }

Tu pourrais utiliser des margin pour les espacer.

++
Évite le
Code : HTML

1	<font face="Arial, Helvetica, sans-serif">

Définis-le plutôt dans la feuille de style.

Édité le 12/07/2008 à 17:36:40 par Yano

marc.cortes

# Posté le 12/07/2008 à 18:09:01

Groupe : Membres

au risque de me répéter Yano , mais height : 20px; et line-height : 20px; ne fonctionnent pas dans mon h3 , et je ne sais pas pourquoi...
dans mon h2 titre du menu en marron , j'utilise height : 20px qui fonctionne très bien . La seule différence entre h2 et h3 c'est que en h2 mon background est une image et non une couleur....
pour tester le centrage de mon texte dans mon titre de menu or , j'ai même mis 40px afin de mieux visualiser , mais rien n'y fais.
Dans le lien que tu m'a fourni , j'ai vu qu'on pouvais utiliser les balises <menu> , je ferai un test demain pour voir.Si je compren bien <li> est une balise pour les liens.
si je n'utilise pas <p> c'est que je souhaite que mon menu reste à part du reste du site. Le contenu de mon site est en <p> et je ne voudrait pas qu'il prenne les attributs de mon menu.

OK pour ma feuille html , j'ai viré tous les <font face="Arial, Helvetica, sans-serif">
merci pour ton aide
bon WE

obud

# Posté le 12/07/2008 à 19:30:28

Groupe : Membres

Citation : marc.cortes

Si je compren bien <li> est une balise pour les liens.

faux c'est une balise de liste... n'importe quoi peut être organisé sous forme de liste...
Citation : marc.cortes

si je n'utilise pas <p> c'est que je souhaite que mon menu reste à part du reste du site. Le contenu de mon site est en <p> et je ne voudrait pas qu'il prenne les attributs de mon menu.

C'est pour cela que les class existent.. si tu met <p class="menu">ton texte</p> et que tu créées un CSS avec p.menu, les autres paragraphes ne prendront pas les attributs de tes paragraphes de menu... Si tu utilises la manière suivante de procéder, les line-height fonctionnent :
Code : HTML

<ul>
     <li><a href="lien" class="menu">nom du lien1</a></li>
     <li><a href="lien" class="menu">nom du lien2</a></li>
     <li><a href="lien" class="menu">nom du lien3</a></li>
</ul>

Code : CSS

a.menu
{
line-height:20px;
font-size:12px;
vertical-align:center;
text-align:center;
}

Bonne soirée

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

des espaces blancs en CSS