[CSS debutant] Background

**diaboloche** · 01/06/2006, 08h46

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

**titoumimi** · 01/06/2006, 08h53

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 ?

**1tsiMat** · 01/06/2006, 09h02

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

**diaboloche** · 01/06/2006, 09h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**1tsiMat** · 01/06/2006, 09h12

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"

**titoumimi** · 01/06/2006, 09h15

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

**<romain/>** · 01/06/2006, 09h17

tu rajoute ca dans ton css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**diaboloche** · 01/06/2006, 09h25

Envoyé par <romain/>

tu rajoute ca dans ton css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**1tsiMat** · 01/06/2006, 09h36

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?

**diaboloche** · 01/06/2006, 09h42

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

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 :-)

**titoumimi** · 01/06/2006, 09h49

ahhhh, ok, on comprend mieux

rajoute display:inline; aux styles de ton H1

**diaboloche** · 01/06/2006, 09h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**titoumimi** · 01/06/2006, 09h58

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 ...

**diaboloche** · 01/06/2006, 10h00

Merci beaucoup ! :-)

[CSS debutant] Background

CSS

Discussions similaires

Partager

Partager