Problème de block/inline [résolu]

Problème de block/inline [résolu] - HTML/CSS - Programmation

Marsh Posté le 06-09-2005 à 10:50:51    

Hello,  
 
j'aimerais essayer de faire des "boutons" pour mon menu horizontal comme ceux du menu vertical ...
 
j'ai donc préparé 3 images, que j'ai appelées respectivement gauche, centre et droite toutes au format png.
 
en CSS j'essaie ces 3 classes :
 

Code :
  1. .horiz_g
  2. {
  3.     background-image:url(images/gauche.gif);
  4.     background-repeat:no-repeat;
  5.     background-position:left;
  6.     height:32px;
  7.     padding-top:8px;
  8. }
  10. .horiz_c
  11. {
  12.     background-image:url(images/centre.png);
  13.     background-repeat:repeat-x;
  14.     background-position:center;
  15.     height:32px;
  16.     padding-top:8px;
  17. }
  19. .horiz_d
  20. {
  21.     background-image:url(images/droite.png);
  22.     background-repeat:no-repeat;
  23.     background-position:right;
  24.     height:32px;
  25. }


 
qui sont censées afficher ces 3 images pour composer chaque "bouton".
 
lorsque je mets le code html suivant :
 

Code :
  1. <div class="horiz_g">&nbsp;ddd</div>
  2. <div class="horiz_c">hello, message de coucou</div>
  3. <div class="horiz_d">&nbsp;ddd</div>


 
j'ai bien mes 3 éléments qui s'affichent, chacun sur une ligne.
 
Seulement si je mets un display:inline; dans une des classes CSS, je n'ai plus d'apparition de l'image, et je ne comprends pas pourquoi ... Pouvez-vous m'éclairer svp ?
 
Je vous remercie de votre aide
mika123
 
PS : si vous voulez voir en gros, regardez ma signature :)


Message édité par mika123 le 11-09-2005 à 13:40:26
Reply

Marsh Posté le 06-09-2005 à 10:50:51   

Reply

Marsh Posté le 06-09-2005 à 10:54:49    

essaye "float:left;"

Reply

Marsh Posté le 06-09-2005 à 10:57:27    

Dans la background position ?
En tout casmerci, j'essaie et je te dis ce soir  :)


Message édité par mika123 le 06-09-2005 à 11:11:33
Reply

Marsh Posté le 06-09-2005 à 13:57:38    

"float" est une propriété au même titre que "height" ou "background-position". ;)
Ca permet de définir sur quel côté de la boite précédente celle ci va se coller. T'auras donc les images les une à côté des autres tant qu'il reste assez de place libre.

Reply

Marsh Posté le 06-09-2005 à 20:30:36    

Effectivement ca marche, mais j'ai du rajouter quelques truc notamment les largeurs des images

Code :
  1. <td colspan="2" style="padding-left:37%;">
  3.      <span class="horiz_g">&nbsp;</span>
  4.                <span class="horiz_c">
  5.        <a href="http://laurence.ba.free.fr" class="menuh">Accueil</a>
  6.     <a href="http://www.tuning-pc.info/forum/index.php" class="menuh">Forum</a>
  7.     <a href="livre.php" class="menuh">Livre d or</a>
  9.     <a href="news.htm" class="menuh">News du site</a>
  10.    </span>
  11.                <span class="horiz_d">&nbsp;</span>


 
 
Merci à toi  :jap:   ===>regarde c nikel http://www.tuning-pc.info


Message édité par mika123 le 06-09-2005 à 20:31:38
Reply

Marsh Posté le 06-09-2005 à 23:17:20    

tu me vire ton tableau à 2 balles ou je te butes

Reply

Marsh Posté le 06-09-2005 à 23:41:53    

gatsusat a écrit :

tu me vire ton tableau à 2 balles ou je te butes


 
 :o Quand on débute hein :  :o

Reply

Marsh Posté le 07-09-2005 à 07:56:16    

j'ai débuté avec des tables, quand on a montré les css ni une ni deux j'ai abandonné les tables.
 
Les css c'est plus facile que les tables pour un débutant, pas besoin de se faire chier avec des rowspan/colspan, bidouilles d'images transparentes etc ...
 
Le css tu dis (en anglais) où chaque élément doit etre placé et comment il doit être stylé. C'est vachement plus simple que des tables :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 07-09-2005 à 08:24:42    

je vais y penser...;)

Reply

Marsh Posté le 07-09-2005 à 13:23:31    

mika123 a écrit :

:o Quand on débute hein :  :o


 
Quand on débute, il vaut mieux partir sur de bonnes bases et faire les choses comme il faut.
 
Beaucoup de débutant sont rebutés par Css car ils pensent que c'est plus dur d'apprendre html + css que d'apprendre le HTML_tout_pouris_ou_en_plus_tu_dois_apprendre_comment_faire_la_présentation_via_les_attributs...
 
Le choix se résume entre apprendre 2 techiques relativement simples et complémentaire OU apprendre 1 seule technique qui mélange et qui complique tout ;)
 
[EDIT] PS : cette remarque ne vaut pas vraiment pour toi vu que (à part l'utilisation des tables, tu est bien parti) ;)


Message édité par Bidem le 07-09-2005 à 13:25:54
Reply

Marsh Posté le 07-09-2005 à 13:23:31   

Reply

Marsh Posté le 11-09-2005 à 13:38:07    

màj, j'ai viré les tableaux ! c'est du full CSS :)  
www.tuning-pc.info !  
 
N'hesitez pas a signer mon livre d'or !  
Si l'url dérange je vire toute facon ya mon forum en signature ;)

Reply

Marsh Posté le 11-09-2005 à 13:49:41    

Citation :

Introduction
Pour les mots suivis d'une étoile voir le lien "Définition" à l'accueil
Le tuning-pc c'est avant tout un art que l'on fait soi-même ! C'est en fait une transformation de son boîtier pour le rendre plus joli, éclairé, rangé ...etc.
Je ne vais pas m'étendre là  dessus, je vais plutôt passer directement au 2 types de tuning (oui il Y en a 2 :)


 
 
 
Chipotage mais bon  :D


Message édité par gocho le 11-09-2005 à 13:51:07
Reply

Sujets relatifs:

Leave a Replay

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