Titre sous une feuille de style

Titre sous une feuille de style - HTML/CSS - Programmation

Marsh Posté le 14-12-2004 à 13:12:32    

salut à tous,
 
bon voilà, j'vous explique. La bannière qui affiche mon titre est inscrite dans une feuille de style (avec backgroung-image). Le truc que j'aimerais faire c'est de mettre un titre qui s'afficherai au cas ou la feuille de style ne se chargerai pas. Un peu comme la fonction <img=.... alt="...">
voilou, merci  :jap:

Reply

Marsh Posté le 14-12-2004 à 13:12:32   

Reply

Marsh Posté le 14-12-2004 à 13:16:15    

Tu peux faire un truc de ce genre : Si par exemple ta bannière est un h1, tu peux faire ça :
 

Code :
  1. <h1 id="baniere"><span>Titre de ma page</span></h1>


 
Et dans le css :

Code :
  1. #baniere span {
  2.   display: none;
  3. }


 
Comme ça, avec la feuille de style, ton image s'affiche. S'il n'y a pas de feuille de style, ben c'est le contenu de la span qui est affiché :)
 

Reply

Marsh Posté le 14-12-2004 à 23:24:36    

merci à toi (pourquoi est-il necessaire de mettre <span></span> ?)
sinon, j'ai un autre petit problème. Lorsque je créé une zone de texte d'une largeur 750px, cette largeur n'est pas fixe !
En effet, lorsque que mon texte dépasse les 750px, au lieu de repasser automatiquement à la ligne, la zone texte s'élargit.
Commet-faire pour que cette dernière soit fixe ??
code html:
 

Code :
  1. <div class="zonetext">
  2. blablablablablablablablablablablablablablabla
  3. blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
  4. blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
  5. blablablablablablablablablablablablablablabla
  6. </div>


 
code css:
 

Code :
  1. .zonetext {
  2. width: 750px;
  3. }

Reply

Marsh Posté le 15-12-2004 à 01:05:03    

_Benjy a écrit :

merci à toi (pourquoi est-il necessaire de mettre <span></span> ?)


Le H1 affiche l'image de fond, le SPAN le texte (enfin il ne l'affiche pas, sauf s'il n'y a pas de CSS)

_Benjy a écrit :


sinon, j'ai un autre petit problème. Lorsque je créé une zone de texte d'une largeur 750px, cette largeur n'est pas fixe !
En effet, lorsque que mon texte dépasse les 750px, au lieu de repasser automatiquement à la ligne, la zone texte s'élargit.
Commet-faire pour que cette dernière soit fixe ??


Mettre des espaces entre tes mots [:itm]
 
Non il n'y a pas de solution. Le HTML ne touche pas le contenu, donc ne touche pas au texte, ce n'est pas lui qui insérera de manière autoritaires les espaces nécessaires.
 
Par contre tu peux utiliser la propriété CSS "overflow" pour que le texte qui sortirait du cadre soit caché et que donc, le cadre ne s'étire pas.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 15-12-2004 à 08:10:45    

Voilà, comme le dit gm_superstar, met juste :
 

Code :
  1. .zonetext {
  2.   width: 750px;
  3.   overflow: auto;
  4. }


 
Et t'aura une barre de défilement qui viendra au cas où :)

Reply

Marsh Posté le 15-12-2004 à 08:54:55    

overflow:hidden serait plus approprié
 
Parce que MSIE a une étrange "fiture": il commence par afficher le texte, étirant la boite si besoin, puis il met le background et enfin il fait disparaitre le texte
 
C'est très drole, mais ca tile le background si on a pas pensé à le mettre en no-repeat :/
(et qui penserait d'instinct à le faire quand la boite fait la taille de l'image)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 13:46:18    

Ah bon ? Bizarre, j'ai jamais vu cette feature... Chez moi il affiche bien la div avec de belles barres de défilement si la div est trop petite. Le problème du overflow hidden, c'est qu'il n'y a rien pour voir le texte qui déborde...

Reply

Marsh Posté le 15-12-2004 à 13:51:26    

FlorentG a écrit :

Ah bon ? Bizarre, j'ai jamais vu cette feature... Chez moi il affiche bien la div avec de belles barres de défilement si la div est trop petite. Le problème du overflow hidden, c'est qu'il n'y a rien pour voir le texte qui déborde...


non mais là le principe c'est de faire disparaitre le texte et de mettre une image à la place, on veut pas voir le texte


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 14:08:41    

Euh.. Je crois qu'on parle pas de la même chose  :??:

Reply

Marsh Posté le 15-12-2004 à 14:11:24    

ah oui, son 2e post n'a aucun rapport avec le 1er, j'avais pris les deux comme étant liés. spa grave


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 14:11:24   

Reply

Marsh Posté le 15-12-2004 à 14:11:46    

Ok ;)

Reply

Marsh Posté le 16-12-2004 à 12:34:56    

gm_superstar a écrit :

Le H1 affiche l'image de fond, le SPAN le texte (enfin il ne l'affiche pas, sauf s'il n'y a pas de CSS)


 
je ne conprend pas. Sans la balise SPAN, l'effet marche quand même ! Donc à quoi sert-il concrètement ??
 
Pardonnez le newbie que je suis  :D

Reply

Marsh Posté le 16-12-2004 à 12:44:36    

<h1><span>blablabla</span></h1>


CSS v1:

h1 {
    display: none;
    width: 750px;
    height: 100px;
    background-image: url(leet_image.png);
}


==> affichage: keud, parce qu'on a caché le h1
Alors que  
CSS v2 (proposition de GM)

h1 span {
    display: none;
}
h1 {
    width: 750px;
    height: 100px;
    background-image: url(leet_image.png);
}


==> Affichage: leet_image apparaît, mais pas le texte, parce qu'on a caché (display: none) uniquement le texte et pas l'intégralité de la boite <h1>
 
en exemples d'utilisation je peux te filer cette mini démo
(le CSS est mauvais, à la base ca fait partie d'une page plus grande mais je l'avais extrait pour tester IE7, et le code est mal conçu, les taggings pourraient être mieux faits)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2004 à 20:08:53    

Masklinn a écrit :


CSS v2 (proposition de GM)


C'était pas ma proposition, mais j'approuve à 100% ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2004 à 20:18:56    

gm_superstar a écrit :

C'était pas ma proposition, mais j'approuve à 100% ;)


ah merde, j'ai vu ton nom sur le 4e post j'ai cru que celui de florent était aussi de toi [:totoz]  
(genre que t'expliquais ton post)
 
désolé florent :whistle:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2004 à 20:33:42    

Spagrave spagrave :D

Reply

Sujets relatifs:

Leave a Replay

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