[CSS] espace vertical

espace vertical [CSS] - HTML/CSS - Programmation

Marsh Posté le 13-05-2004 à 12:03:32    

Salut,
je suis sur la construction des menus de mon site et j'ai une question assez basique.
Dans ma colonne à gauche, je veux un espace vertical entre mon logo et mon menu.
Il vaut mieux que je mette un <br>, que je creer dans mon css un truc comme .espace-menu-gauche ou que je mette un pixel transparent?
merci

Reply

Marsh Posté le 13-05-2004 à 12:03:32   

Reply

Marsh Posté le 13-05-2004 à 12:06:26    

un div logo, un div menu et une propriété margin


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 13-05-2004 à 12:16:39    

T509 a écrit :

un div logo, un div menu et une propriété margin


 
+1 tout simplement. [:spamafote]

Reply

Marsh Posté le 13-05-2004 à 12:51:56    

Voire simplement un logo (sans div autour ;), un menu (sans div autour ;)) et des marges


Message édité par sibelius le 13-05-2004 à 12:52:34

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 13-05-2004 à 12:54:32    

Rajoute
margin-bottom : 10px;  
 
aux propriétés CSS de ton logo.

Reply

Marsh Posté le 13-05-2004 à 13:00:00    

Si on veut vraiment être perfectionniste, on laisse le logo avec le margin-bottom (puisque c'est un élément unique) et on fait un div menu en dessous (étant donné que le menu comporte plusieurs éléments). :D

Reply

Marsh Posté le 13-05-2004 à 13:02:08    

Oui :)
 
Car un div logo juste pour mettre une image.. c'est pas vraiment sémantiquement top, quoi :D
 
Et puis ça dépend, si le menu est de type texte, alors on peut éviter de faire un div et utiliser les puces [:banzai]

Reply

Marsh Posté le 13-05-2004 à 13:06:37    

skylight a écrit :


Et puis ça dépend, si le menu est de type texte, alors on peut éviter de faire un div et utiliser les puces [:banzai]


 
 :jap:  :D

Reply

Marsh Posté le 13-05-2004 à 13:59:57    

merci ben.
dans mon css j'ai ça:
.logo {
 margin-bottom: 10px;
}
et mon html:
<img src="images/home/logo.gif" class="logo">
 
ça vous semble ok?
oui mon menu c'est du texte

Reply

Marsh Posté le 13-05-2004 à 14:02:43    

essaie et regarde si cela fonctionne. A priori l'idée est là


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 13-05-2004 à 14:02:43   

Reply

Marsh Posté le 13-05-2004 à 14:02:54    

Oui, c'est bon
 
si ton menu est du texte, alors utilise les puces, et personnalise-les avec les CSS.
 
Tu augmentera la sémantique, la lisibilité, et l'accessibilité aux handicapés.

Reply

Marsh Posté le 13-05-2004 à 14:17:08    

pour mon menu j'ai utilisé <ul> <li> et compagnie...c'est ça les puces

Reply

Marsh Posté le 13-05-2004 à 14:31:19    

:jap:

Reply

Marsh Posté le 13-05-2004 à 14:46:18    

Ouai c'est ça LOL, c'est skylight, qui ne sait pas parler  :pt1cable:  
 
 :ange: :)
 
Il voulait parler de liste tout simplement, tu mets pas de div du coup, tu mets juste class="menu" dans ton <ul>
 
Vala

Reply

Marsh Posté le 13-05-2004 à 15:36:10    

yep merci

Reply

Marsh Posté le 13-05-2004 à 17:42:37    

Hermes le Messager a écrit :

Si on veut vraiment être perfectionniste, on laisse le logo avec le margin-bottom (puisque c'est un élément unique) et on fait un div menu en dessous (étant donné que le menu comporte plusieurs éléments). :D


Le <ul> est un conteneur suffisant non? Pourquoi y rajouter un div ?  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 13-05-2004 à 18:01:23    

J'aimerais faire un menu de ce genre:
http://www.courchevel.com/temp/menu-2005.jpg
 
Les bloques insides outside otherside, jles gere comment?
Jme prends la tete a les découper (fleche+titre) et a reconstruire tout ça ou j'exporte les 3 images et basta?
qu'en pensez vous?

Reply

Marsh Posté le 13-05-2004 à 18:06:08    

kameha a écrit :

J'aimerais faire un menu de ce genre:
http://www.courchevel.com/temp/menu-2005.jpg
 
Les bloques insides outside otherside, jles gere comment?
Jme prends la tete a les découper (fleche+titre) et a reconstruire tout ça ou j'exporte les 3 images et basta?
qu'en pensez vous?


Pour ce genre de menu (avec titre + description), je pense que la structure la plus propre est une liste de définition.
Voir ce lien : http://www.pompage.net/pompe/listesdefinitions/


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-05-2004 à 08:02:12    

SIBELIUS a écrit :

Le <ul> est un conteneur suffisant non? Pourquoi y rajouter un div ?  :??:


 
Oui, bien que cela dépende des cas.

Reply

Marsh Posté le 14-05-2004 à 11:32:13    

SIBELIUS a écrit :

Pour ce genre de menu (avec titre + description), je pense que la structure la plus propre est une liste de définition.
Voir ce lien : http://www.pompage.net/pompe/listesdefinitions/


 
tu crois que j'utilise quand meme les <ul> et les <li> avec ces balise <dl>?

Reply

Marsh Posté le 14-05-2004 à 11:41:46    

kameha a écrit :

tu crois que j'utilise quand meme les <ul> et les <li> avec ces balise <dl>?


Non, c'est l'un ou l'autre dans ton cas :
Avec les ul/li, tu n'auras pas de notion de titre, et tu les as (dt) avec les DL


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-05-2004 à 12:01:16    

ok merci
 
css - j'ai donc ça :

Code :
  1. }
  2. .menugauche {
  3. list-style-type: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. .menugauche a {
  8. margin: 0 2px;
  9. width: 139px;
  10. height: 15px;
  11. display: block;
  12. text-align: left;
  13. text-decoration: none;
  14. color: #000;
  15. background: #fff;
  16. margin-bottom: 1px;
  17. }
  18. .background-image dt {
  19. margin: 0 0 1em 0;
  20. padding: 0 0 0 0px;
  21. background-image: url(../images/home/tt-gauche-fond.gif);
  22. background-repeat: no-repeat;
  23. height: 18px;
  24. width: 100%;
  25. }
  26. .background-image dd
  27. {
  28. margin: 0 0 0 0;
  29. padding: 0 0 0 0;
  30. }


 
html:

Code :
  1. <dl class="background-image">
  2. <dt>Inside</dt>
  3. <dd class="menugauche">
  4. <a href="">Hébergement</a>
  5. <a href="">Restaurants / Bars</a>
  6. <a href="">Shopping / Services</a>
  7. <a href="">Séminaires</a>
  8. </dd>
  9. </dl>


 
ça donne :
http://www.courchevel.com/temp/tes [...] -tablo.php

Reply

Marsh Posté le 14-05-2004 à 12:04:08    

Personnellement, j'aurais mis chaque élément de menu (a) dans un dd à part.
 
PS : en tout cas, ton gabarit commence à prendre forme ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-05-2004 à 12:24:37    

et comme ça :
 

Code :
  1. .menu
  2. {
  3. background-color:  #FFFFFF;
  4. color: #000000;
  5. margin-top: 5px;
  6. margin-left: 5px;
  7. border-bottom: 1px solid #008040;
  8. op: 115px;*/
  9. width: 150px;
  10. }
  12. .titres-categories
  13. {
  14. text-align: center;
  15. color: #FFFFFF;
  16. font-size: 12px;
  17. font-weight: bold;
  18. margin-top: 0px;
  19. width: 148px;
  20. border: 1px solid #008040;
  21. background-color: #008040;
  22. }
  24. a.menul
  25. {
  26. display: block;
  27. text-align: left; 
  28. padding: 5px 2px 0px 12px;
  29. border-left: 1px solid #008040;
  30. border-right: 1px solid #008040;
  31. background-color:  #fffff0;
  32. text-decoration: none;
  33. color: #OOOOOO;
  34. }
  35. html>body #a.menul
  36. {
  37. width: auto;
  38. }
  40. a.menul:hover
  41. {
  42. padding: 5px 2px 0px 12px; 
  43. background-color:#7CFC00;
  44. text-decoration: none;
  45. color: #000000;
  46. }
  47. html>body #a.menul:hover
  48. {
  49. width: auto;
  50. }


 

Code :
  1. <div class="menu">
  2. <div class="titres-categories">NAVIGATION</div>
  3. <a href="index.asp" class="menul">Accueil</a>
  4. <a href="News.asp" class="menul">News</a>
  5. <a href="Editorial.asp" class="menul">Editorial</a>
  6. <a href="astuces.asp" class="menul">Astuces</a>
  7. <a href="Rencontres.asp" class="menul">Rencontres</a>
  8. <a href="Coins_peche.asp" class="menul">Coins de pêche</a>
  9. <a href="trombi_choix.asp" class="menul">Trombinoscope</a>
  10. <a href="proposition.asp" class="menul">Proposer un article</a>
  11. <a href="#" class="menul"></a>
  12. <div class="titres-categories">FORUM</div>
  13. <a href="Forum/default.asp" class="menul">Forum</a>
  14. <a href="#" class="menul"></a>
  15. </div>


 
ce qui donne : http://www.assoc-sempe.com/test.asp


Message édité par Flyman30 le 14-05-2004 à 12:25:10
Reply

Marsh Posté le 14-05-2004 à 12:27:28    

@Flyman30 > Le résultat revient au même sauf que les divs dans ton cas n'ont aucune valeur sémantique.
Le DL de la liste de définition indique bien une liste (d'élément de menu). Le DT indique bien un titre et les DD indiquent bien les différents éléments qui se rapportent au titre.
C'est beaucoup plus clair que de mettre des div à tout va.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-05-2004 à 12:35:48    

SIBELIUS a écrit :

@Flyman30 > Le résultat revient au même sauf que les divs dans ton cas n'ont aucune valeur sémantique.
Le DL de la liste de définition indique bien une liste (d'élément de menu). Le DT indique bien un titre et les DD indiquent bien les différents éléments qui se rapportent au titre.
C'est beaucoup plus clair que de mettre des div à tout va.


 
Ok merci, je vais voir ça  ;)

Reply

Marsh Posté le 14-05-2004 à 12:50:22    

et puis je connais pas cette propriété .. : html>body #a.menul ;)

Reply

Marsh Posté le 14-05-2004 à 13:02:28    

skylight a écrit :

et puis je connais pas cette propriété .. : html>body #a.menul ;)


 
c'est le hack pour padding (IE)

Reply

Marsh Posté le 14-05-2004 à 13:43:03    

SIBELIUS a écrit :

Personnellement, j'aurais mis chaque élément de menu (a) dans un dd à part.
 
PS : en tout cas, ton gabarit commence à prendre forme ;)


 
ça veut dire ça?
 

Code :
  1. <dl class="background-image">
  2.   <dt>Inside</dt>
  3.   <dd class="menugauche">
  4.   <a href="">Hébergement</a>
  5.   </dd>
  6.   <dd class="menugauche">
  7.   <a href="">Restaurants / Bars</a> 
  8.   </dd>
  9.   <dd class="menugauche">
  10.   <a href="">Shopping / Services</a> 
  11.   </dd>
  12.   <dd class="menugauche">
  13.   <a href="">Séminaires</a>
  14.   </dd>
  15.   </dl>


 

Reply

Marsh Posté le 14-05-2004 à 13:54:20    

Plus simple :  
 

Code :
  1. <dl class="background-image"> 
  2.     <dt>Inside</dt> 
  3.     <dd><a href="">Hébergement</a></dd> 
  4.     <dd><a href="">Restaurants / Bars</a></dd> 
  5.     <dd><a href="">Shopping / Services</a></dd> 
  6.     <dd><a href="">Séminaires</a></dd> 
  7.     </dl>


 
Et tu appliques ta css ".menugauche" sur "dd" ou ".background-image dd"


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 14-05-2004 à 14:04:29    

euh....
j'ai fais ça:

Code :
  1. }
  2. .background-image dt {
  3. margin: 0 0 1em 0;
  4. padding: 0 0 0 0px;
  5. background-image: url(../images/home/tt-gauche-fond.gif);
  6. background-repeat: no-repeat;
  7. height: 18px;
  8. width: 100%;
  9. }
  10. .background-image dd
  11. {
  12. padding: 0 0 0 0;
  13. margin: 0 2px;
  14. width: 139px;
  15. height: 15px;
  16. display: block;
  17. text-align: left;
  18. text-decoration: none;
  19. color: #000;
  20. background: #fff;
  21. margin-bottom: 1px;
  22. }


+l'html que tu m'as montré
 
mais les propirétés de text ne sont pas pris en compte. Les liens sont bleu basique.


Message édité par kameha le 14-05-2004 à 14:05:20
Reply

Marsh Posté le 14-05-2004 à 14:08:55    

rajoute ",a" :)
 
 
  .background-image dd,a
  {  
     padding: 0 0 0 0;  
     margin: 0 2px;  
     width: 139px;  
     height: 15px;  
     display: block;  
     text-align: left;  
     text-decoration: none;  
     color: #000;  
     background: #fff;  
     margin-bottom: 1px;  
  }

Reply

Marsh Posté le 14-05-2004 à 14:24:28    

:) merci.
 
si je veux que "inside" soit une image (d'autre arrive dessous avec le meme fond bleu+fleche).
Je fais un .image-inside dans mon .css?

Reply

Marsh Posté le 14-05-2004 à 15:20:19    

j'ai fais ça:

Code :
  1. <dt class="tt-gauche"><img src="images/home/tt-inside.gif" /></dt>


 
l'image s'affiche : http://www.courchevel.com/temp/tes [...] -tablo.php mais je n'arrive pas à la centrer verticalement parlant.
 
css tt-gauche:

Code :
  1. .tt-gauche {
  2. margin-top: 3px;
  3. }


 
C'est pas un margin-top qui faut mettre pour le centrer?
merci

Reply

Marsh Posté le 14-05-2004 à 15:26:46    

ou un vertical align ptetre?

Reply

Marsh Posté le 14-05-2004 à 16:09:01    

padding-top : 5px;

Reply

Marsh Posté le 14-05-2004 à 16:18:34    

Reply

Marsh Posté le 14-05-2004 à 16:31:08    

c'est bon, j'ai du mettre ça  
}
.tt-gauche {
 padding-top: 4px;
}
 
mais aussi et surtout (sinon, il se passe rien),ça:
}
.background-image dt {
 margin: 0 0 4px;
 padding: 0 0 4 0px;
 background-image: url(../images/home/tt-gauche-fond.gif);
 background-repeat: no-repeat;
 height: 18px;
 width: 145;
}


Message édité par kameha le 14-05-2004 à 16:31:36
Reply

Marsh Posté le 14-05-2004 à 16:33:48    

ce que t'as marqué, c'est pareil que padding-top : 4px; pourtant.

Reply

Marsh Posté le 14-05-2004 à 16:38:03    

jpeux pas enlever le tt-gauche?


Message édité par kameha le 14-05-2004 à 16:52:01
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed