28173 sujets

CSS et mise en forme, CSS3

[résolu] trait de chaque coté d'un élément sans balise <hr>

Bonsoir,
je souhaite obtenir un résultat de ce genre :
-------------------- bla bla bla bla --------------------

Voici mon code html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Exemple css</title>
	<link rel="stylesheet" media="screen" href="exemple.css" type="text/css" />
</head>

<html>
	<body>
			<div id="foot">
		[b]    
                        <hr />
			<p>ton compteur</p>
			<hr />
                [/b]
			<p>ici ton image statistique</p>
			<p>Webmaster:  Eric</p>
			<p>ici l'image du logo Moz</p>
			<p>ici l'image de la licence CC</p>
			<p>This Work is licensed under a  Creative Commons Attribution-NonCommercial-NoDerivs 2.0 France License</p>
			<p>Minimum requis: ton image 1, ton image 2 etc...</p>
		</div>
	</body>
</html>


Voici mon css :
 #foot p {
width:33%;
float : left;
text-align:center;
}

#foot hr {
display : block;
width : 33%;
float : left;

}


Smiley edit
J'oubliais, le résultat est presque parfait sous firefox (un petit bug d'affichage tout de même) et sous ie6, n'en parlons même pas.

Le mieux, c'est de copier coller le code et vous verrez par vous même.
Smiley edit

merci pour votre aide
Modifié par manu_css (18 Apr 2007 - 18:03)
Bonjour,

Rapidement ...

Ne pas utiliser les éléments <hr /> pour ce type de présentation (utiliser la propriété css background-image combinée à background-repeat avec repeat-x comme valeur).

Centrer le texte ; lui appliquer un background-color pour qu'il se "fonde".

Bonne continuation.
Romain
Merci yodaswii,

J'ai fait ce que tu m'as conseillé, c'est ok sur IE mais pas sous firefox.

Voici le résultat sur ie : (ne pas faire attention à l'ombre portée, c'est seulement l'impression écran qui fait ça)
upload/10067-SousIE.png
Voici le résultat sur FF : (ne pas faire attention à l'ombre portée, c'est seulement l'impression écran qui fait ça)
upload/10067-SousFF.png

Constat sous FF :
- il n'y a pas de trait noir
- un élément est mal placé, celui qui contient "ici ton image statistique", il devrait être à gauche de l'écran et à la gauche de l'élément qui contient "Webmaster", en fait il faut le même rendu que sous IE

Voici mon code HTML :
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Exemple css</title>
	<link rel="stylesheet" media="screen" href="exemple.css" type="text/css" />
</head>

<html>
	<body>
			<div id="foot">
			<p class="trait">
			<p class="milieu">ton compteur</p>
			<p class="trait">
			<p>ici ton image statistique</p>
			<p>Webmaster:  Eric</p>
			<p>ici l'image du logo Moz</p>
			<p>ici l'image de la licence CC</p>
			<p>This Work is licensed under a  Creative Commons Attribution-NonCommercial-NoDerivs 2.0 France License</p>
			<p>Minimum requis: ton image 1, ton image 2 etc...</p>
		</div>
		
	</body>
</html>


Voici mon code CSS :

#foot p {
width:33%;
float : left;
text-align:center;
}

p.trait {
width : 40%;
float : left; 
background-image : url(trait.gif); 
}

p.milieu{
text-align : center;
float : left;
width : 20%;
}


Merci
Modifié par manu_css (18 Apr 2007 - 14:55)
Simplifions :

Côté HTML (je ne prend que l'objet de ta question) :
<p class="trait"><span>ton compteur</span></p>


Côté CSS (je ne prend que l'objet de ta question) :

.trait
{
	background-image: url('trait.gif');
	background-position: center;
	background-repeat: repeat-x;
	text-align: center;
}

.trait span
{
	background-color: #ffffff;
}


Je pense que cela devrait résoudre ton problème. Smiley cligne
je crois que nous sommes tout prêt du résultat mais il y a encore un hic.

Voici maintenant mon code css :


#foot p {
width:33%;
float : left;
text-align:center;
}
.trait
{
	width:100%;
	background-image: url('trait.gif');
	background-position: center;
	background-repeat: repeat-x;
	text-align: center;
}
.trait span

{
	background-color: #ffffff;
}


Le problème est que j'applique un width de 33% aux autres paragraphes avec cela :

#foot p {
width:33%;
float : left;
text-align:center;
}


Et ensuite j'attribue une longueur différente pour un autre paragraphe contenu dans le div précédent ce qui donne :

.trait
{
	width:100%;
	background-image: url('trait.gif');
	background-position: center;
	background-repeat: repeat-x;
	text-align: center;
}


Et pourtant le paragraphe qui reçoit la classe "trait" ne fait pas 100% de longueur mais 33%. Cela doit être un problème d'héritage mais je croyais que la class était supérieure au code affecté à #foot p

Pour rappel voici mon code html :

<div id="foot">
			<p class="trait"><span>ton compteur</span></p>
			<p>ici ton image statistique</p>
			<p>Webmaster:  Eric</p>
			<p>ici l'image du logo Moz</p>
			<p>ici l'image de la licence CC</p>
			<p>This Work is licensed under a  Creative Commons Attribution-NonCommercial-NoDerivs 2.0 France License</p>
			<p>Minimum requis: ton image 1, ton image 2 etc...</p>
		</div>


merci
Modifié par manu_css (18 Apr 2007 - 17:02)
En changeant la class "trait" par un identificateur "trait" ; je pense que cela doit pouvoir faire l'affaire Smiley cligne .
manu_css a écrit :
Cela doit être un problème d'héritage mais je croyais que la class était supérieure au code affecté à #foot p

.trait a une priorité de 0010.
#foot p a une priorité de 0101.
Donc #foot p a une priorité supérieure à celle de .trait.

Tu peux changer ton sélecteur pour #foot .trait (priorité 0110) ou #foot p.trait (priorité 0111).

Pour les arcanes du calcul de la priorité des sélecteurs, voir l'article qui va bien sur openweb :
http://openweb.eu.org/articles/cascade_css/
Merci, j'ai ce que je voulais Smiley biggrin (je vais de ce pas marquer résolu, pas d'inquiétude Smiley ravi

Je précise juste qu'en remplaçant la class "trait" par un identificateur (et après avoir adapté le fichier css en conséquence bien sûr), cela ne fonctionne pas.

Par contre, en faisant #foot .trait, cela fonctionne.

Merci encore pour le lien sur le calcul de la priorité des sélecteurs, je ne savais même pas que cela existait.

Merci à yodasswii et à Florent. V
Voici le code pour ceux que cela intéresse :

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Exemple css</title>
	<link rel="stylesheet" media="screen" href="exemple.css" type="text/css" />
</head>

<html>
	<body>
			<div id="foot">
			<p class="trait"><span>ton compteur</span></p>
			<p>ici ton image statistique</p>
			<p>Webmaster:  Eric</p>
			<p>ici l'image du logo Moz</p>
			<p>ici l'image de la licence CC</p>
			<p>This Work is licensed under a  Creative Commons Attribution-NonCommercial-NoDerivs 2.0 France License</p>
			<p>Minimum requis: ton image 1, ton image 2 etc...</p>
		</div>
		
	</body>
</html>


Voici le code CSS :


#foot p {
width:33%;
float : left;
text-align:center;
}
#foot p.trait
{
	width:100%;
	background-image: url('trait.gif');
	background-position: center;
	background-repeat: repeat-x;
	text-align: center;
}
#foot p.trait span

{
	background-color: #ffffff;
}


Et voici le résultat : (ne pas s'occuper de l'ombre portée, c'est l'impression écran qui l'a générée.)
upload/10067-resultat.png
manu_css a écrit :
Je précise juste qu'en remplaçant la class "trait" par un identificateur (et après avoir adapté le fichier css en conséquence bien sûr), cela ne fonctionne pas.

Ça fonctionne avec p#trait (priorité 0101), s'il est placé après #foot p (priorité 0101 également) dans la feuille de style CSS.

Lire l'article d'openweb dont je donne le lien ci-dessus ne peut pas faire de mal. Smiley cligne
Sujet clos
Aller à