CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Span, Div ? je ne m'en sors plus ! | |
| Addiction
{ Membre }
Messages : 125
| Bonjour... J'ai un gros problème. Vous savez faire la différence entre span et div ? Quand je mets SPAN, le code n'est censé s'appliquer qu'au texte. Quand je mets DIV, le code s'applique sur toute la largeur de la page. Et bien, j'ai mis SPAN, et tout de même, le code s'applique sur toute la largeur de la page.
Voici mon code concerné:
- Code:
-
.nom { background-color: #4D3023; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; text-align: center; color: #C0C659; padding-left: 5%; padding-right: 5%; font-size: 15px; font-family: Arial; letter-spacing: 4px; word-spacing: 6px; font-weight : bold; } Et voici ce que ça me donne:
Que faire ? Merci...
|
Dernière édition par Addiction le Ven 09 Juil 2010, 14:12, édité 1 fois | |
| | | Furase
{ Membre actif }
Messages : 312
| Bonjour ! Div ne sert pas à appliquer un format à toute une page, pas plus que span. La différence entre ces deux balises est leur type. Div est une balise block, c'est-à-dire qu'elle va créer un bloc qu'on peut schématiser par un rectangle donc on va pouvoir choisir les dimensions. Le bloc enfermant un texte, dès lors qu'on veut écrire en dehors du bloc, le texte s'écrira en dessous (sauf indication contraire, mais je ne détaille pas). Span est une balise inline, c'est-à-dire qu'elle va s'appliquer à un élément contenu dans un bloc. Par exemple à un morceau de texte. Le span ne créé pas de délimitation, donc on ne peut pas changer sa taille, qui correspond à celle de l'élément. Petit rappel : ces deux balises doivent être fermées. C'est-à-dire qu'on doit mettre /span et /div chaque fois qu'on a ouvert la balise. - Code:
-
<div> contenu du bloc </div>
<span> contenu "en ligne" </span> Si tu n'as pas refermé tes balises, essaie de commencer par là. Ton css me semble correct. Pour pouvoir t'aider davantage, j'ai besoin de connaitre ton code html et l'endroit où tu as appliqué ta classe, savoir ce que tu veux faire, et que tu expliques un peu mieux où est exactement le problème. Fu' | | |
| | | Addiction
{ Membre }
Messages : 125
| Ah, d'accord, j'y étais presque ! x) Donc, vous avez le code CSS, l'aperçu, je vous donne le HTML. Normalement, tout est bon, c'est la première fois que ça me fait ça... =\
- Code:
-
[center]<span class=titre>Interrupted Melody</span>[/center] Il s'agit peut-être de la largeur de l'image ?
| | |
| | | Furase
{ Membre actif }
Messages : 312
| Dans ton css ta classe s'appelle nom. Dans ton span, tu as mis une classe qui s'appelle titre. L'un et l'autre n'ayant aucun rapport, si tu n'as pas de classe appellée titre dans ton css (donc .titre), rien ne se produira. De plus je ne vois rien correspondant à une image dans le css que tu m'as donné... ^^"
Pense à mettre des guillemets autour du nom de ta classe ! On doit toujours en mettre autour des valeurs qu'on donne aux attributs.
Si ça ne résoud pas ton problème, je te suggère de me l'expliquer plus explicitement, car, comme il me lasse de le répéter, je ne suis pas devin, et je ne comprend pas ce que tu veux faire et ce qui ne va pas.
Fu' | | |
| | | Addiction
{ Membre }
Messages : 125
| Oui, c'est "nom" en fait. J'ai exactement le même code pour "Titre" et "Nom". ^^ Et même si je mets des guillemets, ça ne change rien. Enfin, s'il faut je me débrouillerais toute seule. Je ne vois pas ce que tu n'as pas compris dans tout ce que j'ai expliqué, je ne suis pas devin non plus, dis-moi ce que tu ne comprends pas, c'est tout. Mais merci de ton aide. Peut-être est-ce parce que l'image est trop grande ? Elle fait 600 px de largeur. | | |
| | | Furase
{ Membre actif }
Messages : 312
| Ce que je comprend pas, c'est ce que tu veux faire et quel est ton problème T_T
De quelle image tu parles en demandant si le problème vient de largeur ? Celle avec le cheval qui est en dessous de ton titre ? Il me semble qu'il y a une image derrière ton titre. Non ? Si c'est bien le cas, je ne vois pas où elle est définie dans ton css. Il doit y en avoir un morceau quelque part ailleurs... >< Dans tous les cas, l'un et l'autre n'ont pas de rapport. Si c'est ça que tu veux faire et changer la largeur de ton titre, peu importe l'image qui est dessous. Mais pour t'aider, j'ai besoin de savoir ce que tu veux faire. Difficile autrement de t'indiquer comment faire... ^^"
Fu' | | |
| | | Addiction
{ Membre }
Messages : 125
| Non non, rien à voir avec la photo du cheval ! ^^
Tu vois, dans mon CSS, j'ai mis une image de fond (background). Et cette image, lorsque je fais mes titres, prennent toute la largeur de la page, comme sur le screen. Hors, j'aimerais que le fond ne s'applique que sur la largeur du texte.
Voici mon problème:
- Spoiler:
Et voici ce que je voudrais :
- Spoiler:
| | |
| | | Furase
{ Membre actif }
Messages : 312
| Et bah avec un span ça fonctionne pas ? Est-ce que tu as défini ton fond correctement ? Parce qque si oui, ça ne pose aucun problème habituellement. Peu importe la taille de l'image de fond, elle va s'adapter toute seule à la bonne largeur. - Code:
-
background-image: url("adresse") ; Par contre, span étant une balise inline, on ne peut pas changer ni sa hauteur ni ses marges. Donc ton image s'arrêtera vraiment pile autour de ton texte. Si tu veux arranger ça, il faut prendre un div et régler sa taille. largeur : width hauteur: height Si tu as plusieurs titres à faire, ce que je te conseille est de définir la hauteur et tout le reste dans le css, et d'adapter la largeur individuellement via style= Fu' | | |
| | | Addiction
{ Membre }
Messages : 125
| Waaa, je comprends rien. x) Définir son fond correctement ? Tu parles avec le code que tu m'as donné ? Si c'est ça, non, mais je viens de le changer. j'avais mis background tout seul, pas background-image. Mais ça n'a rien changé en fait. ^^
Et avec l'histoire de la largeur et de la longueur, pour moi, ça ne me posera pas un grand problème, mais pour le reste des membres, ça va sûrement gêner, comme ils font des titres aussi. =\
Au pire, si on ne trouve pas, je laisse tomber le fond. x) | | |
| | | Furase
{ Membre actif }
Messages : 312
| Aie aie, y a pas 50 méthodes. Soit tu mets un span mais tu ne pourras pas choisir la largeur ni la hauteur, soit tu mets un div et tu choisis une largeur fixe, et des marges internes à la place de la hauteur (pour que ça s'adapte correctement aux titres qui seront écrits sur deux lignes). J'ai fais quelques tests, mais pas moyen d'adapter la largeur du div automatiquement. Donc au pire, met une largeur en pourcentage... et faudra faire avec. A moins que tu veuilles t'amuser à enfermer ton titre dans un tableau pour corriger ça... et dans ce cas jouer avec les marges internes pour laisser de l'espace autour du mot (et éventuellement mettre une largeur maximale avec max-width). Je te déconseille cette méthode... Trop lourde à mettre en place. Pour le fond, peu importe que tu mettes background ou background-image, même s'il y a une légère nuance entre les deux, les deux seront compris. Ce qui était important c'était le url(""), qui est souvent oublié. Texte - Code:
-
<span style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: white; border: solid 1px black;">Texte</span> Texte - Code:
-
<div style="width: 20%; padding: 4px; text-align: ccenter; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color: white; border: solid 1px black;">Texte</div> - Code:
-
<table><tr><td><div style="padding: 7px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color: white; border: solid 1px black;">Texte</div></td></tr></table> Fu' | | |
| | | Addiction
{ Membre }
Messages : 125
| Mouais, bon, je ferais avec alors ! Merci beaucoup de ton aide, ainsi, je suis fixée, et je sais comment le résoudre ! Merci, même si ça sera compliqué à mettre en place. x) | | |
| | | Contenu sponsorisé
| | | | | Span, Div ? je ne m'en sors plus ! | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|