[Résolu]Balise span, quelques problèmes de compréhension...

Bonjour,

J'ai quelques doutes... Je pensais que la balise span était la même chose que div mais avec un display : inline; (arrêtez-moi déjà si je me trompe ^^).

Bref, j'ai souvent essayé et ça ne marche pas vraiment comme je le sentais (mais alors pas du tout...)

Voici mon code :

<div class="cartes">
   <span class="cartesimages"><img src="images/04.gif" alt="Carte Incube" /></span>
   <span class="description"><p>Nom : Un nom<br />
                                En encore du texte de présentation</p></span>
</div>

Et voici mon CSS :

.cartes {
   width : 400px;
}

.cartesimages {
   width : 150px;
}

.description {
   width : 250px;
}

C'est pour un test, je pensais que ce code simulait plus ou moins un tableau à deux cases avec à gauche une image et à droite du texte...


Hors ce qui apparait est tout différent, ça apparait comme si j'avais mis

<p><img src... /></p>
<p>Mon texte dans le span description</p>

Et la je comprend plus vraiment le positionnement...
Modifié par PMingard (09 Apr 2005 - 20:05)

D'ailleurs je ne comprend pas pourquoi la classe .description n'influe pas du tout sur le comportement du span.

j'ai beau mettre un background-color : #xxxxxx;, rien ne s'affiche de couleur sur l'écran...

Ton code n'est pas valide. On ne peut pas mettre un paragraphe dans un élément SPAN.

PMingard a écrit :
Je pensais que la balise span était la même chose que div mais avec un display : inline; (arrêtez-moi déjà si je me trompe ^^).

Oui, c'est ça... mais ce n'est pas seulement une question de display. Span est une balise 'en-ligne' se qui signifie que tu ne peut pas mettre de balise 'bloque' à l'intérieur (comme le souligne si aimablement bob ). Pour plus de détaille :
> EN : http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4
> FR : http://www.la-grange.net/w3c/html4.01/struct/global.html#h-7.5.4

PMingard a écrit :
C'est pour un test, je pensais que ce code simulait plus ou moins un tableau à deux cases avec à gauche une image et à droite du texte...

Les balise 'en-ligne' ne peuvent pas avoir de largeur (width)
> EN : http://www.w3.org/TR/CSS21/visudet.html#propdef-width
> FR : http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-width

> EN : http://www.w3.org/TR/CSS21/visuren.html#q7
> FR : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#q7


Modifié par Jep (07 Apr 2005 - 22:36)

Jep a écrit :

(comme le souligne si aimablement bob )

Mon message était bref et sans lien de référence, mais de là à dire qu'il n'était pas aimable...

Jep a écrit :

Les balise 'en-ligne' ne peuvent pas avoir de largeur (width)

Oui, sauf dans le cas des boîtes en-ligne dites "remplacées" (comme IMG ou INPUT par exemple).

Ok, y a certains concepts que j'ai du mal encore à assimiler, et les balises blocs / inlines sont encore un peu obscure pour moi (habitude de l'html classique ou tout va dans n'importe quoi dans n'importe quel ordre)...


Je vais aller refaire un tour sur les topics de positionnements et je reviens si j'ai un problème..

PMingard a écrit :
Ok, y a certains concepts que j'ai du mal encore à assimiler, et les balises blocs / inlines sont encore un peu obscure pour moi (habitude de l'html classique ou tout va dans n'importe quoi dans n'importe quel ordre)...


Je vais aller refaire un tour sur les topics de positionnements et je reviens si j'ai un problème..

Je pense que ce tuto est tout indiqué pour toi
http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Malgré vos tutoriels j'ai du mal à comprendre...

Voici mon nouveau code :

<div class="cartes">
   <img class="carteimage" src="images/01.gif" alt="Carte Bogomile" />
   <div class="cartedescription">Nom : Bogomile<br />
          Échangé : 1 contre 5 "Enclume"</div>
</div>

Et voici un premier CSS :

.carteimage {
}

.cartedescription {
   display : inline;
   font-family : Verdana, Arial, Helvetica;
   font-size : 11px;
}

.cartes {
   margin-top : 5px;
}

Le résultat n'est pas du tout celui auquel je m'attend... Selon le tutoriel, les balises inline se placent les unes à coté des autres (dans la mesure de la place libre...). Quand j'affiche ma page, voici le résultat :


http://www.final-fantasy.ch/newdesign/Ff8/images/test1.jpg

Pourquoi le texte n'est-il pas placé en haut à droite de l'image mais à droite en bas???


Bon, suite à ça je me suis dis qu'une image de type float : left; avec le div sous display : bloc était mieux...

Le problème, c'est que le résultat est ceci :

http://www.final-fantasy.ch/newdesign/Ff8/images/test2.jpg

C'est tout à fait normal et même si j'y avais pas pensé, je comprend pourquoi c'est comme ça, mon texte ne prenant pas toute la place, il en reste pour que l'image d'en dessous d'y place...

Bon, donc il faut un clear, je met donc ce CSS ci :

.carteimage {
   float : left;
}

.cartedescription {
   font-family : Verdana, Arial, Helvetica;
   font-size : 11px;
}

.cartes {
   margin-top : 5px;
   clear : left;
}

Et la le résultat est surprenant :

http://www.final-fantasy.ch/newdesign/Ff8/ff8carte1.php

Pourquoi y a-t-il un gros espace en haut du premier div??? Le positionnement ici est un peu spécial je dirais...

Edit : Et également, il n'y a pas de marges entre les div dans cette dernière version alors que je précise bien un margin-top : 5px;


Modifié par PMingard (08 Apr 2005 - 17:46)

Le code HTML que tu utilises n'est peut être pas des plus adapté. Je te conseil pour ce que tu souhaites faire d'utiliser les listes de définitions qui correspondent bien au contenu à utiliser.

Tu as sur cette page des exemples d'utilisation, tu devrais même trouver un exemple très proche de ce que tu souhaites faire
http://pompage.net/pompe/listesdefinitions/

Il ne te restera plus qu'à adapter légèrement pour obtenir exactmeent ce que tu veux

Olivier a écrit :


Il ne te restera plus qu'à adapter légèrement pour obtenir exactmeent ce que tu veux

1 ) J'ai essayé de le faire, le résultat n'est pas du tout convainquant...

http://www.final-fantasy.ch/newdesign/Ff8/ff8carte1.php
http://www.final-fantasy.ch/newdesign/Ff8/ff8style.css

J'ai repris exactement le même CSS que dans la version "table-display" du lien que tu m'as passé... le positionnement est tout à fait différent, ce que je veux afficher sors de tout positionnement raisonnable...


2 ) J'aurais quand même bien voulu comprendre le positionnement avec les div et span, j'ai déjà eut pas mal de problèmes avec ça et ce serait peut être une bonne idée que je puisse comprendre comment ça marche. J'ai l'impression d'avoir compris le tutoriel d'alsacréation à ce sujet, mais quand j'essaie rien ne marche comme prévu...

Si tu veux comprendre les principes de positionnement, je t'invite à lires ces articles pour bien comprendre de quoi on parle :

> http://openweb.eu.org/articles/initiation_flux/
> http://openweb.eu.org/articles/initiation_float/
> http://openweb.eu.org/articles/initiation_absolue/

Jep a écrit :
Si tu veux comprendre les principes de positionnement, je t'invite à lires ces articles pour bien comprendre de quoi on parle :

> http://openweb.eu.org/articles/initiation_flux/
> http://openweb.eu.org/articles/initiation_float/
> http://openweb.eu.org/articles/initiation_absolue/

Voilà, j'ai eut une explication de mon problème...

Je faisais un clear : both; pour éviter que les images que je mettais en place se chevauchent... J'ai oublié un élément : mes menus sont en float... Donc le clear se faisait également sur mes menus d'ou un espacement énorme.....


Merci pour ce dernier tutoriel vraiment sympa et complet...