28172 sujets

CSS et mise en forme, CSS3

Hyperdébutant ! bloc texte apparait deux fois ???

Bonjour,

Je suis hyperdébutant en création de site et donc en CSS par voie de conséquence... Je bute sur un problème de positionnement de texte. En effet mon texte apparait deux fois. Une fois au bon endroit et la deuxième sous mon lien vers la page contact... je n'arrive pas à régler ce problème tout seul, votre aide sera donc la bienvenue... merci !


		body
		{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #F5F5F5 ;
		}
		
		div#conteneur
		{
			width: 800px ;
			margin: 0 auto ;
			text-align: justify ;
			border: 1px solid #FF7301 ;
		}
		
		h1#header
		{
			height: 141px ;
			margin: 0 ;
			background: url(bannierecplete.png) no-repeat left top ;
			list-style-type: none ;
			display: block;
		}
									
		h1#header li
		{
			width: 77px ;
			display: block ;
			position: relative ;
			left: 498px ;
			top: 81px ;
			float: left ;
			text-indent: -5000px ;
		}
		
		h1#header li a
		{
			width: 96px ;
			line-height: 34px ;
			display: block ;
		}
		
		h1#header li a:hover
		{
			background: url(losorange.png) repeat-x 0 0 ;
		}
		
		div#contenu
		{
			background: #fff; 			
		}
		
		div#contenu h2
		{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			color: #FF7301 ;
			border-bottom: 1px solid #FF7301 
		}
		
		div#contenu p
		{
			text-align: justify ;
			text-indent: 2em ;
			line-height: 1.7em ;
		}
		
</style>	

</head>
	
	<body>
	
		<div id="conteneur">		
	
		<h1 id="header">
			<li><a href="accueil.htm" title="accueil">A</a></li>
			<li><a href="portfolio.htm" title="portfolio">P</a></li>
			<li><a href="contact.htm" 	title="contact">C</a></li>
		</h1>
				
		<div id="contenu" style="">
			<h2>Titre</h2>
			<p>bla bla bla</p>
		</div>
	
	</body>
</html>

Modifié par Yumyumnoodle (15 Aug 2008 - 19:40)
Bonjour Yumyumnoodle et bienvenue sur ce forum,

Pour commencer, un petit rappel aux règles: il est demandé que les blocs de code cités sur le forum soient entourés par les balises [ code] et [ /code] (sans espace après le crochet ouvrant), pour une meilleure lisibilité du forum. Pourrais-tu modifier ton message ci-dessus (en utilisant le bouton «éditer» en haut à droite) pour respecter cette règle? Merci d'avance.

Pour ton problème, eh bien je n'ai pas constaté de duplication de contenu. Avec quel navigateur(s) as-tu constaté ce problème?

Ce qui est sûr, c'est que le code HTML que tu indiques dans ton message est loin d'être valide. Bien entendu, tu valides ton code HTML et CSS régulièrement, et lorsque tu constates un problème la première chose que tu fais c'est vérifier que les codes HTML et CSS sont valides, n'est-ce pas? Smiley cligne

Un petit rappel:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Merci pour ta réponse...

Le problème (j'aurais du le préciser Smiley confus ) apparait avec IE7.

Le code html ne doit pas être parfait en effet... il est plutôt bricolé !!!

Je ne l'ai pas validé du tout !!! je vais m'y mettre...

PS: j'ai éditer le précédent message avec [ code] et [ /code]
Après validation, il apparait que mon code n'est en effet pas conforme du tout... La plus grosse erreur semble être : "document type does not allow element "li" here"

Dans mon "header" j'ai une bannière dans laquelle j'ai 3 liens avec "rollover" (une image de couleur différente qui vient se placer au-dessus). Ça fonctionne (sauf dans IE) mais le code n'est pas conforme.

Que devrais-je faire pour corriger le code ?

l'URL : http://www.volume-z.fr/index2.html
Yumyumnoodle a écrit :
oui... je me doute mais comment faire ? Smiley rolleyes
Les éléments parents autorisés pour LI sont UL et OL.

Pour t'aider tu pourrais utiliser cet outil qui indique la hiérarchie des éléments. Par exemple LI.

A+
Allez plus sérieusement Smiley cligne

A lire attentivement
a écrit :
En règle générale, un élément de groupe %block peut contenir une (ou plusieurs) balise %block et/ou %inline, sauf exceptions.

Exception qui nous intéresse :
a écrit :
H1, H2,… H6
Ne peut être parent que d'éléments en-ligne.

Li étant de type rendu bloc, il ne peut pas avoir pour parent h1 (ou h1 ne peut pas contenir de list item)

Comment faire ?
1- Utiliser h1 à bon escient : c'est un titre de niveau 1, rien d'autre.
2- Utiliser un parent autorisé (ul, ol) pour tes éléments de liste
3- Utiliser (éventuellement) un conteneur neutre pour mettre tout cela :

<div id="header">
	<h1> Mon beau site</h1>
		<ul id="menu">
			<li><a href="accueil.htm" title="accueil">A</a></li>
			<li><a href="portfolio.htm" title="portfolio">P</a></li>
			<li><a href="contact.htm" title="contact">C</a></li>
		</ul>
</div>


4- Dans tous les cas: apprendre le html et le css, lire les FAQ, faire des recherches.
5- Au minimum avoir un peu d'humour, et d'autodérision Smiley cligne

Bonne soirée,
Cdt,
Sylvain
Pour ce qui est de la validité du code HTML, il y avait aussi deux DIV qui étaient ouvertes mais jamais fermées (absence de </div>).

Pour éviter ce genre d'impair, je recommande de «marquer» les balises fermantes à l'aide d'un commentaire, pour les principaux blocs conteneurs en tout cas:
<div id="global">
	<div id="content">
		...
	</div><!-- #content -->
</div><!-- #global -->
(Le contenu du commentaire emprunte à la syntaxe des sélecteurs CSS, mais on peut écrire «fin de l'élément ayant l'identifiant "global"» si on préfère...)
Sujet clos
Aller à