[CSS debutant] Background

Version imprimable

01/06/2006, 08h46
diaboloche

[CSS debutant] Background

Bonjour !

J'ai un petit soucis (un tout petit..) :

Je veux mettre un background blanc sur un texte, pas sur une ligne horizontale complète... Si je le place directement sur mon page php cela fonctionne bien

<span style="background-color: #CCFFFF ; "> ... </span>

Maintenant si je veux mettre cela dans une feuille de style... comment dois-je m'y prendre ? Je fais ceci mais cela ne fonctionne pas comme souhaité :

h1 {
font-size : 15px;
font-family : Arial, Helvetica, Geneva, sans-serif;
color : red;
/*text-align: center;*/
text-transform: uppercase ;
word-spacing : 2mm ;
letter-spacing : 2px ;
background-color: white;
}

Quelqu'un peut m'expliquer ce que je fais de travers...Merci !

PS : Où sont les balises code maintenant sur cette nouvelle bête :?
01/06/2006, 08h53
titoumimi

pour la balise code, c'est le # dans l'éditeur ;)

tu peux nous mettre le bout de HTML ou tu affiche ton texte ? voir un exemple si possible ? ;)
01/06/2006, 09h02
1tsiMat

Généralement, la balise h1 sert pour un titre et non pour un texte, le fond se fera sur ton titre h1 donc si tu veux l'utiliser sur un un texte mets le background-color="#FFFFFF" dans une balise p, ou h3, ou utilises un <font> si tu utilises ton background occasionellement

Code:

1
2
 
print("<h1><center>News du ".$resultat[1]." : ".$resultat[2]."</center></h1>");//---Affichage Date : Titre---//

Voici le code d'affichage... :-) Merci

01/06/2006, 09h12
1tsiMat

Si tu souhaites seulement mettre "News du "$resultat[1]"."$resultat[2]"" en background blanc il n'y a pas de soucis mais ou si c'est parce que cela ne t'affiche pas le back en blanc remplace dans ton css "background-color : blanc par background-color : #FFFFFF"
01/06/2006, 09h15
titoumimi

j'ai essayé ton style chez moi, en définissant la couleur de font du body en noir, et ça marche .... tu n'aurai pas redéfini ton style dans un coin, ou oublié de l'inclure ??

PS : plutot que <center>, utilise plutot text-align:center; en CSS, ça fera plus propre ;)
01/06/2006, 09h17
<romain/>
tu rajoute ca dans ton css :
Code:

1 2 3 width : 250 px; /*la taille de ton texte en largeur*/ display : block;
ca devrait fonctionner.

Romain

edit : ce que tu veux c'est bien que le fond ne prennet que la taille du h1? Parceque sinon effectivement ca fonctionne...

Citation:

Envoyé par <romain/>

tu rajoute ca dans ton css :

Code:

1
2
3
 
width : 250 px; /*la taille de ton texte en largeur*/
display : block;

ca devrait fonctionner.

Romain

edit : ce que tu veux c'est bien que le fond ne prennet que la taille du h1? Parceque sinon effectivement ca fonctionne...

J'ai essayé.. malheureusement cela ne fonctionne pas mieux :(

Je ne vois pas trop où je me suis planté mais je suis novice en CSS...
Ce n'est pas fort long je vais coller la page php... A savoir que la partie critique est

//---------------------------------------//
//---On récupere les infos de la db-----//
//-------------------------------------//

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="monstyle.css" rel="stylesheet" type="text/css">
<title>Les Yankees d'Herstal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body background="fond.jpg">
<br>
 
<table align="center" cellpadding="0" cellspacing="0">
<tr><td width="728"><div align="center"><img src="banniere_top2.gif"></div></td></tr>
<tr><td><img src="barrebas.gif"></td></tr>
<tr><td></td></tr>
<tr>
    <td height="45"> <a href="index2.php"><img src="menu/news3.gif" border="0" onmouseover="this.src='menu/news.gif';" onMouseOut="this.src='menu/news3.gif'" title="Toutes les news des Yankees"></a><a href="abonnements.php"><img src="menu/abonnements1.gif" border="0" onmouseover="this.src='menu/abonnements.gif';" onMouseOut="this.src='menu/abonnements1.gif'" title="Prendre son abonnement via les Yankees !"></a><a href="staff.php"><img src="menu/staff1.gif" border="0" onMouseOver="this.src='menu/staff.gif';" onMouseOut="this.src='menu/staff1.gif'" title="Présentation des responsables du club"></a><a href="membres.php"><img src="menu/membres1.gif" border="0" onMouseOver="this.src='menu/membres.gif';" onMouseOut="this.src='menu/membres1.gif'" title="Quels avantages à être membre ?"></a><a href="photo.php"><img src="menu/photo1.gif" width="90" height="45" border="0" onmouseover="this.src='menu/photo.gif';" onMouseOut="this.src='menu/photo1.gif'" title="Photos diverses"></a><a href="liens.php"><img src="menu/liens1.gif" width="90" height="45" border="0" onMouseOver="this.src='menu/liens.gif';" onMouseOut="this.src='menu/liens1.gif'" title="Liens utiles"></a><a href="contact.php"><img src="menu/contact1.gif" width="110" height="45" border="0" onMouseOver="this.src='menu/contact.gif';" onMouseOut="this.src='menu/contact1.gif'" title="Contacter notre Webmaster"></a></td>
 
  </tr><tr><td><img src="barrebas.gif"></td></tr> 
  <tr>
    <td background="banniere_center2.gif" > 
      <?
 
include('staff/secure/configuration.php');
//---------------------------------------//
//---On récupere les infos de la db-----//
//-------------------------------------//
$req = mysql_query("SELECT * from news ORDER BY id DESC") or die ("Erreur à l'étape 3 - Select table ".mysql_error()); 
 
while ( $resultat = mysql_fetch_array($req)) //--- Retourne une ligne de résultat sous la forme d'un tableau associatif---//
{
 $news=str_replace(".",".<br>",$resultat[3]); //---On remplace tous les . par des <br>---//
 
 print("<h1><center>News du ".$resultat[1]." : ".$resultat[2]."</center></h1>");//---Affichage Date : Titre---//
 print("<h2>".$news."</h2>");
 print("&nbsp;&nbsp;&nbsp;<em><font color=\"#CCCCCC\" size=\"-1\">News écrite par ".$resultat[4]." à ".$resultat[5]."</font></em></body></h2><br>");
}
 
mysql_close();//---Refermer la connexion---//
 
?>
     </td>
  </tr>
<tr><td><img src="barrebas.gif"></td></tr>
</table>
 
 
<div align="center"> 
  <p><br>
    <font color="#CCCCCC" size="-1" face="Courier New, Courier, mono"><strong>Designed 
    by <font color="#FFFFFF">diaboloche</font> - © 2005 | Tous droits réservés.</strong></font> 
    <font color="#FFFFFF" size="-1" face="Courier New, Courier, mono"><strong><a href="staff/index.php">Staff</a></strong> 
    </font> </p>
  </div>
<script type="text/javascript" src="feuillejava.js"></script>
</body>
</html>

01/06/2006, 09h36
1tsiMat

Perso j'ai pas compris ...
Le background ne s'affiche pas en blanc? Tu voudrais que toute la ligne s'affiche en background blanc? Que le reste du teste ait le background blanc?
01/06/2006, 09h42
diaboloche

Citation:

Envoyé par 1tsiMat

Perso j'ai pas compris ...
Le background ne s'affiche pas en blanc? Tu voudrais que toute la ligne s'affiche en background blanc? Que le reste du teste ait le background blanc?

Voici ce que cela me donne

http://users.skynet.be/fa308674/Image1.gif

Moi je ne veux pas que le "blanc" dépasse du texte.. je veux que cela soit appliquer sur le texte tapé par sur toute une ligne...

Voilà désolé de ne pas avoir été très clair :-)
01/06/2006, 09h49
titoumimi

ahhhh, ok, on comprend mieux ;)

rajoute display:inline; aux styles de ton H1 ;)

Citation:

Envoyé par titoumimi

ahhhh, ok, on comprend mieux ;)

rajoute display:inline; aux styles de ton H1 ;)

Merci ! On y est presque ! Ca marche mais il ne me centre plus maintenant... j'ai bien fais ce que tu m'as conseiller, a savoir centrer à partir de mon css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 h1 { font-size : 15px; font-family : Arial, Helvetica, Geneva, sans-serif; color : red; text-align: center; text-transform: uppercase ; word-spacing : 2mm ; letter-spacing : 2px ; background-color: white; width : 250 px; display: inline; }
:roll:

01/06/2006, 09h58
titoumimi

dans ce cas là, ça ne marche plus, puisqu'un élément de type en-ligne se limite à son contenu ...

il faut donc soit remettre les balises center, soit appliquer le style text-align:center; à la cellule du tableau qui contient ton H1 ...

un petit lien si tu veux te perfectionner en CSS ... ;)
01/06/2006, 10h00
diaboloche

Merci beaucoup ! :-)