CtrlAltSuppr.com / problème de block/inline

mika · 01/09/05 15:56:14

salut,

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:

.horiz_g
{
    background-image:url(images/gauche.gif);
    background-repeat:no-repeat;
    background-position:left;
    height:32px;
    padding-top:8px;
}

.horiz_c
{
    background-image:url(images/centre.png);
    background-repeat:repeat-x;
    background-position:center;
    height:32px;
    padding-top:8px;
}

.horiz_d
{
    background-image:url(images/droite.png);
    background-repeat:no-repeat;
    background-position:right;
    height:32px;
}

qui sont censées afficher ces 3 images pour composer chaque "bouton".

lorsque je mets le code html suivant :

Code:

<div class="horiz_g">&nbsp;ddd</div>
<div class="horiz_c">hello, message de coucou</div>
<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 ? J'ai demandé à malcolm qui a fait des essais pdt un bon moment aussi, et il n'a pas trouvé non plus ...

Je vous remercie de votre aide
mika

Malcolm · 01/09/05 16:07:13

hello

j'aoute qq précisions : j'ai testé avec des balises <span> ça fait pareil, des fichiers .gif, idem.
J'ai testé en mettant ces 3 classes sur une autre CSS et en n'appelant qu'elle dans une page de test, rien n'y fait... C'est qd même étonnant que l'on ne puisse pas insérer une image par un div ... (ou span) ...
je suis sûr que j'ai oublié qqch ou pas fait attention à un détail, et si vs avez une piste pour la solution, ça m'intéresse ! (alors que j'ai déjà affiché des boutons par ce moyen, jamais eu ce pb ^^)

merci

mika · 05/09/05 11:13:13

Personne ? err

mika · 06/09/05 20:41:32

Résolu, j'ai exposé mon pb sur hardware.fr et il fallait rajouter

Code:

float:left;

Mais il fallait rajouter dans l'index 2/3 truc du coup ca donne ça

Code:

<td colspan="2" style="padding-left:37%;">

               <span class="horiz_g">&nbsp;</span>
               <span class="horiz_c">
                       <a href="http://laurence.ba.free.fr" class="menuh">Accueil</a>
                    <a href="http://www.tuning-pc.info/forum/index.php" class="menuh">Forum</a>
                    <a href="livre.php" class="menuh">Livre d or</a>

                    <a href="news.htm" class="menuh">News du site</a>
                </span>
               <span class="horiz_d">&nbsp;</span>

Merci quand même et merci malcolm smile

Malcolm · 06/09/05 20:43:00

oui, les span et div jouent le même rôle dans ce cas ... Mais jai surtout rajouté dans la CSS les largeur des images. (sans ça les float laissaient une superposition)

Boudha · 06/09/05 21:49:07

Essayes d'optenir (au maximum) un code clair et propre

Code:

.horiz_g, .horiz_c { height: 32px; padding-top: 8px }

.horiz_g { background: url(images/gauche.gif) no-repeat left }

.horiz_c { background-image:url(images/centre.png) repeat-x center }

.horiz_d { background-image:url(images/droite.png) no-repeat right; height: 32px }

Ju · 06/09/05 21:59:55

@boudha:
Encore mieux, préciser le type de balise concerné au lieu de rattacher au body en ne précisant pas.
span.horiz_g, span.horiz_c { ... etc

Malcolm · 06/09/05 23:09:16

vous avez tout à fait raison, seulement pour débuter en CSS comme Mika, je suis 100% partant pour dire "prendre les bonnes habitudes au début", mais il a parfois du mal encore à déclarer et appeler correctment une classe, donc je pense qu'il ne faut pas brûler les étapes. (et je ne dis pas ça contre toi, mika)

mika · 06/09/05 23:52:40

Malcolm a écrit:
vous avez tout à fait raison, seulement pour débuter en CSS comme Mika, je suis 100% partant pour dire "prendre les bonnes habitudes au début", mais il a parfois du mal encore à déclarer et appeler correctment une classe, donc je pense qu'il ne faut pas brûler les étapes. (et je ne dis pas ça contre toi, mika)

Bien sur wink

Annonces

#1 01/09/05 15:56:14

problème de block/inline

Code:

Code:

#2 01/09/05 16:07:13

Re: problème de block/inline

#3 05/09/05 11:13:13

Re: problème de block/inline

#4 06/09/05 20:41:32

Re: problème de block/inline

Code:

Code:

#5 06/09/05 20:43:00

Re: problème de block/inline

#6 06/09/05 21:49:07

Re: problème de block/inline

Code:

#7 06/09/05 21:59:55

Re: problème de block/inline

#8 06/09/05 23:09:16

Re: problème de block/inline

#9 06/09/05 23:52:40

Re: problème de block/inline

Malcolm a écrit:

Pied de page du Forum