28173 sujets

CSS et mise en forme, CSS3

Bonjour

voilà je voudrai centrer un titre h3" les nouveautés" dans la partie corps mais je comprends pas pourquoi il se centre pas alors qu'il devrait puisque j'ai mis les attributs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

	<head>
		<title>Bienvenue sur Liberty vidéo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<META NAME="keywords" CONTENT="vidéo, liberty, vidéoliberty, vidéo liberty, vidéo St andré de cubzac, vidéo Saint andré de cubzac, location dvd st andré de cubzac, location vidéo st andré de cubzac, location dvd saint andré de cubzac" />
		<META NAME="description" CONTENT="Location de DVD sur St andré de cubzac" />
		<link rel="stylesheet" media="screen" type="text/css" title="designe_comedie.css" href="css/designe_comedie.css" />
		<style type="text/css">
			body 
			{
			width: 760px;
			margin: auto; /* pour centrer nos pages */
			color: white;
			margin-top: 5px;
			margin-bottom: 5px;
			background-image: url("magasin/travail_fond_ecran.jpg");
			background-attachment: fixed;
			font-family: "Times New Roman", Georgia, Times, serif;
			background-position: center;
			
			
			}
			#en_tete
			{
				margin: auto;
				width: 758px;
				height: 126px;
				border-style: outset;
				background-image: url("magasin/magasin_758par126.jpg");
				background-repeat: no-repeat;
			}
			#navigation 
			{
				margin: auto;
				height: 20px;
				font-size: 14px;
				color: white;
				line-height: 16px; 
				background-color: #79790b;
				border-style: outset;
				margin-top: 10px;
				margin-bottom: 10px;
				letter-spacing: 1px; 
				text-align: center;
			}
			#categorie 
			{
				margin: auto;
				border: 2px outset #79790b;
				float: left;
				width: 140px;	
				background-color: black;
			}
			.boutonun a:hover
			{
				text-decoration:  underline; 
				background-color: #b6b80d;
				color: white;
			}	
			.boutondeux
			{
				background-color: #79790b;
				border-style: outset;
			}
			.categories_dvd
			{
				background-color: #b6b80d;
				margin-bottom: 5px;
				border: 2px outset #45aae0;
				text-align: left;
				padding: 5px;	
				line-height: 150%;
			}
			.categories_dvd h3,h4
			{
				text-align: center;
			}
			
			a
			{
				color: black;
				text-decoration: none;
			}	
			
			.categories_dvd a:hover 
			{
				
				background-color: #79790b;
				color: white;
			}
			
			#corps
			{
				margin: auto;
				width: 425px;
				margin-left: 10px;
				float: left;
				padding: 5px;
				color: white;
				background-color: #b6b80d;				
							
				line-height: 90%;
				letter-spacing: 90%;
				position: relative;
				
				
				
			
			}
			
			
			#information
			{
				margin: auto;
				border: 2px outset #79790b;
				margin-left: 10px;
				float: left;
				width: 154px;
				background-color: black;
				font-size: 14px;
			}
			.cadre_horaire
			{
				background-color: #b6b80d;
				margin-bottom: 5px;
				border: 2px outset #45aae0;
				text-align: center;
				padding: 5px;	
				line-height: 150%;
			}
			
			
			
			#pied_de_page
			{
				position: relative;
				margin: auto;
				margin-top: 5px;
				margin-top: 5px;
				float: left;
				width: 758px;
				padding: 2px;
				color: white;
				border-style: outset;
				background-color: #79790b;
				text-align: center;	
			}
		</style>
	</head>
	<body>	
		<div id="en_tete">		<!-- Ici on mettra la bannière -->
		</div>

		<div id="navigation">
			<span class="boutonun">
			|
			<a href="/magasin/plan.bmp">plan d'accés</a> | 
			<a href="mailto:liberty.video@wanadoo.fr">nous contacter</a> |
			<a href="formulaire.html">votre avis</a> | </span>
		</div>	
		
		<div id="categorie">	<!-- Ici on mettra le menu -->
			
			<div class="categories_dvd"> <!--cadre réservé au sous-menu-->
				<h3 class="boutondeux">Catégories</h3>
				<p>
					<a href="comedie.html">Comédie</a><br />
					<a href="comedie_dramatique.html">Comédie dramatique</a><br />					
					<a href="drame.html">Drame</a><br />
					<a href="fantastique.html">Fantastique</a><br />
					<a href="frisson.html">Frisson</a><br />
					<a href="science_fiction.html">Science fiction</a><br />
					<a href="thriller.html">Thriller</a><br />
					<a href="theatre_et_spectacle.html">Théatre et Spectacle</a><br />
					<a href="aventure.html">Aventure</a><br />
					<a href="famille_et_enfants.html">Famille et Enfants</a><br />
					<a href="action.html">Action</a><br />
					<a href="animation.html">Animation</a><br />
					<a href="guerre.html">Guerre</a><br />
					<a href="historique.html">Historique</a><br />
					<a href="policier.html">Policier</a><br />
					<a href="romance.html">Romance</a><br />
				</p>
			</div>
				
			<div class="categories_dvd"> <!-- cadre réservé au sous-menu-->
				<h3>Vos prochaines sorties DVD</h3>
			</div>
				
				
			<div class="categories_dvd">
				<h3>Vos dvd préférés</h3>				
			</div>
				
			<div class="categories_dvd">
				<h3><a href="mois_dernier.html">Les sorties du mois derniers</a></h3>
			</div>			
		</div>
		
		<div id="corps"><p>recherche</p>
			<h3><strong>NOUVEAUTES</strong></h3>
			<map name="zone_reactive_barbie_mermaidia">
			<area shape="rect" coords="3,4,62,88" href="animation.html#ancre_barbie_mermaidia">
			</map>
			<map name="zone_reactive_gigolo_malgre_lui">
			<area shape="rect" coords="3,4,62,88" href="comedie.html#ancre_gigolo_malgre_lui">
			</map>
			<map name="zone_reactive_cache">
			<area shape="rect" coords="3,4,62,88" href="thriller.html#ancre_cache">
			</map>
			<map name="zone_reactive_porco_rosso">
			<area shape="rect" coords="3,4,62,88" href="animation.html#ancre_porco_rosso">
			</map>
			<map name="zone_reactive_ptu">
			<area shape="rect" coords="3,4,62,88" href="policier.html#ancre_ptu">
			</map>
			<map name="zone_reactive_il_ne_faut_jurer_de_rien">
			<area shape="rect" coords="3,4,62,88" href="comedie.html#ancre_il_ne_faut_jurer_de_rien">
			</map>
			<map name="zone_reactive_les_ames_grises">
			<area shape="rect" coords="3,4,62,88" href="policier.html#ancre_les_ames_grises">
			</map>
			<map name="zone_reactive_quatre_freres">
			<area shape="rect" coords="3,4,62,88" href="thriller.html#ancre_quatre_freres">
			</map>
			<map name="zone_reactive_les_freres_grimm">
			<area shape="rect" coords="3,4,62,88" href="fantastique.html#ancre_les_freres_grimm">
			</map>
			<map name="zone_reactive_riding_the_bullet">
			<area shape="rect" coords="3,4,62,88" href="fantastique.html#ancre_riding_the_bullet">
			</map>
			<map name="zone_reactive_vive_la_vie">
			<area shape="rect" coords="3,4,62,88" href="comedie.html#ancre_vive_la_vie">
			</map>
			<map name="zone_reactive_the_jacket">
			<area shape="rect" coords="3,4,62,88" href="thriller.html#ancre_the_jacket">
			</map>
			<map name="zone_reactive_canteloup_au_palais_des_glaces">
			<area shape="rect" coords="3,4,62,88" href="theatre_et_spectacle.html#ancre_canteloup_au_palais_des_glaces">
			</map>
			<map name="zone_reactive_basic_instinct">
			<area shape="rect" coords="3,4,62,88" href="thriller.html#ancre_basic_instinct">
			</map>
			<map name="zone_reactive_wallace_et_gromit">
			<area shape="rect" coords="3,4,62,88" href="animation.html#ancre_wallace_et_gromit">
			</map>
			<map name="zone_reactive_oliver_twist">
			<area shape="rect" coords="3,4,62,88" href="aventure.html#ancre_oliver_twist">
			</map>			
			<map name="zone_reactive_terrain_d_entente">
			<area shape="rect" coords="3,4,62,88" href="romance.html#ancre_terrain_d_entente">
			</map>
			<map name="zone_reactive_il_etait_une_fois_dans_l_oued">
			<area shape="rect" coords="3,4,62,88" href="comedie.html#ancre_il_etait_une_fois_dans_l_oued">
			</map>
			<map name="zone_reactive_shirley_et_dino_font_leur_cabaret">
			<area shape="rect" coords="3,4,62,88" href="theatre_et_spectacle.html#ancre_shirley_et_dino_font_leur_cabaret">
			</map>
			<map name="zone_reactive_the_descent">
			<area shape="rect" coords="3,4,62,88" href="fantastique.html#ancre_the_descent">
			</map>
			<map name="zone_reactive_piege_en_eaux_profondes">
			<area shape="rect" coords="3,4,62,88" href="action.html#ancre_piege_en_eaux_profondes">
			</map>				
			<map name="zone_reactive_les_parrains">
			<area shape="rect" coords="3,4,62,88" href="comedie.html#ancre_les_parrains">
			</map>				
			<map name="zone_reactive_red_eye">
			<area shape="rect" coords="3,4,62,88" href="thriller.html#ancre_red_eye">
			</map>						
			<map name="zone_reactive_serenity_l_ultime_rebellion">
			<area shape="rect" coords="3,4,62,88" href="fantastique.html#ancre_serenity_l_ultime_rebellion">
			</map>
			<map name="zone_reactive_goal">
			<area shape="rect" coords="3,4,62,88" href="aventure.html#ancre_goal">
			</map>
			<map name="zone_reactive_la_legende_de_zorro">
			<area shape="rect" coords="3,4,62,88" href="aventure.html#ancre_la_legende_de_zorro">
			</map>

			<p> 
			<img src="web/petite_vignette/animation/barbie_mermaidia.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_barbie_mermaidia">
			<img src="web/petite_vignette/comedie/gigolo_malgre_lui.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_gigolo_malgre_lui">
			<img src="web/petite_vignette/thriller/cache.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_cache">
			<img src="web/petite_vignette/animation/porco_rosso.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_porco_rosso">
			<img src="web/petite_vignette/policier/ptu.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_ptu">
			<img src="web/petite_vignette/comedie/il_ne_faut_jurer_de_rien.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_il_ne_faut_jurer_de_rien">
			<img src="web/petite_vignette/policier/les_ames_grises.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_les_ames_grises">
			<img src="web/petite_vignette/thriller/quatre_freres.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_quatre_freres">			
			<img src="web/petite_vignette/fantastique/les_freres_grimm.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_les_freres_grimm">
			<img src="web/petite_vignette/fantastique/riding_the_bullet.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_riding_the_bullet">
			<img src="web/petite_vignette/comedie/vive_la_vie.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_vive_la_vie">
			<img src="web/petite_vignette/thriller/the_jacket.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_the_jacket">
			<img src="web/petite_vignette/theatre_et_spectacle/canteloup_au_palais_des_glaces.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_canteloup_au_palais_des_glaces">
			<img src="web/petite_vignette/thriller/basic_instinct.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_basic_instinct">
			<img src="web/petite_vignette/animation/wallace_et_gromit.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_wallace_et_gromit">
			<img src="web/petite_vignette/aventure/oliver_twist.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_oliver_twist">			
			<img src="web/petite_vignette/romance/terrain_d_entente.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_terrain_d_entente">
			<img src="web/petite_vignette/comedie/il_etait_une_fois_dans_l_oued.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_il_etait_une_fois_dans_l_oued">
			<img src="web/petite_vignette/theatre_et_spectacle/shirley_et_dino_font_leur_cabaret.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_shirley_et_dino_font_leur_cabaret">
			<img src="web/petite_vignette/fantastique/the_descent.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_the_descent">
			<img src="web/petite_vignette/action/piege_en_eaux_profondes.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_piege_en_eaux_profondes">															
			<img src="web/petite_vignette/comedie/les_parrains.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_les_parrains">				
			<img src="web/petite_vignette/thriller/red_eye.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_red_eye">				
			<img src="web/petite_vignette/fantastique/serenity_l_ultime_rebellion.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_serenity_l_ultime_rebellion">				
			<img src="web/petite_vignette/aventure/goal.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_goal">				
			<img src="web/petite_vignette/aventure/la_legende_de_zorro.jpg" width="65" height="90" hspace="5" vspace="5" border="3" usemap="#zone_reactive_la_legende_de_zorro">				

		
		</p>


		</div>
		
		<div id="information">
		
		<div class="cadre_horaire">
			<h4 class="boutondeux">Horaires d'ouvertures</h4>
			<p>Du lundi au vendredi :<br />
			10h00-12h30 et 15h00-20h30<br />
			Samedi :<br>10h00-12h30 et 14h30-21h00<br />
			dimanche :<br />
			10h00-12h00</p>
		</div>
		<div class="cadre_horaire">
			<h4 class="boutondeux">forfait locations</h4>
			<p>5 locations > 15,00 &#8364<br />
			valable 1 mois <br />
			10 locations > 33,50 &#8364<br />
			valable 6 mois<br />
			25 locations > 76 &#8364<br /> valable 6 mois </p>
			<span style="color: black"><strong><em>Toutes les locations s'étendent sur 24 heures retour avant 20 heures.<br>
			Location du samedi retour le lundi avant 20 heures.</em></strong></span></p>
		</div>
			
		</div>
		
		<div id="pied_de_page">		<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
			<p>Location de DVD &copy; Liberty Vidéo Saint André de Cubzac</p>
		</div>
			
	</body>
</html>

si quelqu'un comprends d'ou vient l'erreur, cela m'est arrivé déjà et je ne vois pas d'ou cela peut venir, Merci d'avance
Modifié par jobrousse (08 Mar 2006 - 12:31)
Essaye de mettre un attribut width à .categories_dvd h3{} genre width:100%; j'ai pas testé ton code mais si ça se trouve c'est juste parceque la taille de <h3></h3> se limite a la largeur de ton texte contenu donc il est peut être deja centré mais tu ne le voit pas
Salut,

Dans ta partie CSS, je vois bien le sélecteur
.categories_dvd h3

Mais le titre h3 "Nouveautés" n'est pas "enfant" de .categories_dvd. Il faudrait donc que tu ajoutes le sélecteur h3 ou #corps h3
Ok, déjà j'ai dit "enfant", pour être plus précis j'aurais du dire "descendant".
Avec ce code :
.categories_dvd h3 {text-align: center;}

Tu ne vise que les titres h3 compris dans un élément auquel tu as attribué la classe .categories_dvd. Par exemple :
<div class="categories_dvd"><h3>titre centré</h3></div>

Mais, comme ton titre h3 "Nouveautés" n'a aucun ancêtre avec pour classe .categories_dvd, il n'est pas concerné.

C'est pourquoi, si tu veux viser en plus les titres H3 qui sont compris dans la div#corps (comme ton titre "nouveautés") il faut ajouter #corps h3 :
.categories_dvd h3, #corps h3 {text-align: center;}

Mais si tu veux viser tous les h3, autant mettre directement
h3 {text-align: center;}

Modifié par Alan (08 Mar 2006 - 11:35)
Ca devrait marcher comme il l'a fait.

Ca ne marcherait pas si il avait fait ".categories_dvd > H3" mais là ".categories_dvd h3" concerne toutes les balises h3 contenues dans les balises de classe categories_dvd

Enfin... si mes connaissances ne me font pas défaut...
Modifié par Nagaroth (08 Mar 2006 - 11:38)
Nagaroth a écrit :
mais là ".categories_dvd h3" concerne toutes les balises h3 contenues dans les balises de classe categories_dvd

Justement, comme je viens de l'écrire, le texte du titre qu'il veut centrer
<div id="corps"><p>recherche</p>
[b]<h3><strong>NOUVEAUTES</strong></h3>[/b]
n'a aucun ancêtre .categories_dvd...
Modifié par Alan (08 Mar 2006 - 11:45)
oula mais oui que m'arrive t'il c'est dans corps qu'il faut que je mette text-align? là c la tete qui ne veut plus fonctionner, merci
Alan a écrit :

Justement, comme je viens de l'écrire, le texte du titre qu'il veut centrer
<div id="corps"><p>recherche</p>
[b]<h3><strong>NOUVEAUTES</strong></h3>[/b]
n'a aucun ancêtre .categories_dvd...


Correct j'avais zappé que c'était nouveautés à centrer... Smiley bawling "allo l'hemisphère gauche ?"