28173 sujets

CSS et mise en forme, CSS3

[Résolu] Fond coupé dans Firefox

Je n'ai pas trouvé !!

Voici mon code

/*************************************************/
/*    Mise en page générale                      */
/************************************************/

body {
	margin: 0 auto; /* pour éviter les marges */
	text-align: center; /* pour corriger le bug de centrage IE */
	font-family: "Arial Narrow", Arial, sans-serif;
	color: #666666;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial Narrow", Arial, sans-serif;
}

h1 {
	font-size: 1.3em;
	color: #FFFFFF;
}

h2 {
	font-size: 1.1em;
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 10px;
	text-indent: 20px;
}

P {
	margin-left: 10px;
}

.liste {
	text-indent: 0px;
	margin-left: 20px;
}

.important {
	color: #FF0000;
	font-weight: bold;
}

/*************************************************/
/*         Contenants                            */
/************************************************/
#conteneur_global, #conteneur_global2, #conteneur_global3 {
	width: 760px;
	text-align: left;
	margin: 0 auto;
}

#conteneur_global {
	background-image: url(../images/contour_haut.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

#conteneur_global2 {
	background-image: url(../images/contour_milieu.gif);
	background-repeat: repeat-y;
}

#conteneur_global3 {
	background-image: url(../images/contour_bas.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	
}


#conteneur {
	width:735px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#contenu {
	width: 735px;
	background-repeat: repeat-y;
	background-position: right;
	margin-top: 45px;
}

#en-tete {
	width:735px;
	margin: 0 auto;
	top: 15px;
	position: relative;
	z-index: 500;
}

#liens_generaux {
margin:0 auto;
position:absolute;
width:735px;
z-index:100;
}

#menu_general,#bandeau_flash {
	margin:0;
}

#contenu_cible {
	width: 570px;
	text-indent: 10px;
}

#rubriques_page {
	width:147px;
	position: absolute;
	top: 205px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 588px;
}

#liens_relatifs {
	width: 130px;
	margin-top: 20px;
	position: absolute;
	right: 0;
	text-indent: 10px;
	top: 300px;
}

#bandeau_titre_rub {
	background-position:top;
	background-repeat:no-repeat;
	height:50px;
	width:735px;
	position: relative;
	top: 40px;
}

#pied_de_page {
	height: 80px;
	width: 735px;
	text-align: center;
	margin: 0 auto;
	border-top: 1px solid;
}


Et la page html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Site officiel de la ville d'Unieux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/JavaScript" src="../../commun/cssjs/menus.js"></script>

<link href="../../commun/cssjs/commun.css" rel="stylesheet" type="text/css" />
<link href="../cssjs/citoyenne.css" rel="stylesheet" type="text/css" />
</head>

<body id="services">


<!--CONTENEUR GLOBAL -->
<div id="conteneur_global">


	<!--EN-TETE -->
	
	<div id="en-tete">   
	
		<!--Bandeau Flash -->	
		<div id="bandeau_flash"><img src="../../accueil/images/banniere_accueil.jpg" alt="banniere_accueil" width="735" height="100" />
		  <!--<object type="application/x-shockwave-flash" data="accueil/flash/bandeau_accueil.swf" width="735" height="100">
		   <param name="movie" value="accueil/flash/bandeau_accueil.swf"/>
		  <p>Il vous manque le plugin flash pour visionner l'animation.</p>
			</object>-->
		</div>
		<!--Fin bandeau_flash -->
		
		
		<!--Menu général -->	
		<div id="menu_general">
		
				<!--Liens généraux -->	
				<div id="liens_generaux">
				
				<?php include "../../commun/liens_generaux.php"; ?>  <!--Le fichier liens_generaux.htm est inclus à cet endroit -->
				</div>
		</div>
		<!--Fin menu général -->
	</div>  
	<!--FIN EN-TETE -->

</div>
<!--FIN CONTENEUR GLOBAL -->

<!--CONTENEUR GLOBAL 2-->
<div id="conteneur_global2">

	<!--CONTENEUR -->
	<div id="conteneur">
	
		<!--Bandeau contenant titre et chemin -->
		<div id="bandeau_titre_rub">
		
			<div id="titre_rub">
			<ul>
			<li class="gros_ssrub">Services Municipaux</li>
			<li class="petit_ssrub"></li>
			</ul>
			</div>
	  </div>
	
		
		<div id="contenu">
		
		
			<div id="contenu_cible" class="services">
			<h1>Horaires et coordonnées de votre mairie</h1>
			<h2>Du lundi au jeudi</h2>
			<p class="liste">De 8h00 à 12h00 et de 13h30 à 17h30.</p>
			<h2>Le vendredi</h2> 
			<p class="liste">De 8h00 &agrave; 12h00 et de 13h30 &agrave; 16h30.</p>
			<br />
			<p class="liste"><em  class="important">Attention : </em>
			<em> En Juillet et en Ao&ucirc;t la mairie est ouverte de 8h00 &agrave; 16h00 sans interruption.</em></p>
			<br />
			<h2>Numéro de l'accueil de votre mairie</h2>
			<p class="liste">04.77.40.30.80</p>
			<h2>Mail</h2>
			<p class="liste"><a href="#">mairie-unieux@wanadoo.fr</a></p>
			<br />
			<h2>A.I.M.</h2>
			<p class="liste">Mme DURIEUX ou Mme SACIC&nbsp;: 04.77.43.26.26</p>
			<h2>ASSISTANCE SOCIALE</h2>
			<p class="liste">Contact au 04.77.10.11.20.
			<br />
			<br />
			<br />
			
			<h1>Planning des permanences</h1>
			
			<h2>CALL PACT (rénovation de façade)</h2>
			<p class="liste">Tous les jeudis de 1h00 &agrave;  12h00 avec&nbsp;????</p>
			 
			<h2>P.A.I.O (Permanence d&rsquo;Accueil et d&rsquo;Information et  d&rsquo;Orientation)</h2>
			<p class="liste">Tous les lundis de 14h00 &agrave; 17h00 avec M.PARET.<br />
			<em>(prendre  rendez-vous &agrave; l&rsquo;accueil de la mairie)</em></p>
			
			<h2>JURIDIQUE</h2>
			<p class="liste">Les 2&egrave;me vendredi du mois de  9h00 &agrave; 11h00. <br />
			 Rendez-vous toutes les 20 minutes au sous-sol de la mairie.</p>

			<h2>CONCILIATEUR</h2>
			<p class="liste">Les 4&egrave;me mercredi du mois sur  rendez-vous de 14h00 &agrave; 17h00.</p>

			<h2>A.I.M.</h2>
			<p class="liste">Tous les jeudis au sous-sol int&eacute;rieur de la  mairie de 9h00 &agrave; 11h00. <br />
			Avec Mme DURIEUX ou Mme SACIC&nbsp;: 04.77.43.26.26<br />
			  <br />
			  Pour les aides m&eacute;nag&egrave;res, dernier lundi du mois de 13h30 &agrave;  16h30.</p>
			
			<h2>ASSISTANCE SOCIALE</h2>
			<p class="liste">Contact au 04.77.10.11.20.<br />
			  <br />
			  Tous les mardis avec Mme PICARD de 8h00 &agrave; 12h00 <em>(sur  rendez-vous).</em><br />
			  Tous les vendredis avec Mme RAULT de 8h00 &agrave; 12h00 <em>(sur  rendez-vous).<br />
			  <br /></em></p>
			</div>
	
			<!--Liens de page à droite -->
			<div id="rubriques_page">
			
		
			<div class="rubriques">
			<?php include "../rubriques_citoyenne.php"; ?> <!--Les rubriques accueil sont inclues à cet endroit -->
			</div>
			
			<div id="liens_relatifs">
				<ul>
				<li class="gif_accueil"><a href="../../index.php" name="Accueil" accesskey="1" title="Accueil">Accueil</a></li> 
				<li class="gif_contact"><a href="#" accesskey="7" title="Contact">Contact</a></li> 
				</ul>
			</div>
			</div>
			<!--Fin liens de pages -->
			
			
		</div>
		<!--Fin contenu -->
	</div>
	<!--FIN CONTENEUR -->

</div>
<!--FIN CONTENEUR GLOBAL 2 -->

<!--CONTENEUR GLOBAL3 -->
<div id="conteneur_global3">

<br/>

	<!--PIED DE PAGE -->
		<div id="pied_de_page">
		<?php include "../../commun/pied_de_page.php"; ?> <!--Le pied de page est inclu à cet endroit -->	
		</div> <!--Fin pied de page -->

</div>
<!--FIN CONTENEUR GLOBAL 3-->



</body>
</html>

Modifié par Julihus (03 Mar 2006 - 16:33)
Merci ça marche nickel !!

Je débute en xhtml css et j'ai mis beaucoup de temps à faire ce site aussi peu soit il avancé !!

Merci à vous tous d'y contribuer !
Quelques captures d'écran:
http://files.covertprestige.info/screens/web/unieux1.png
Où l'on voit que l'image de fond des titres de niveau 2 gagnerait à être alignée en haut, non ? Je propose un :
h2 {
	background-position: left .2em;
}


http://files.covertprestige.info/screens/web/unieux2.png
Où l'on voit que le site supporte très mal le redimmensionnement du texte (deux niveau d'agrandissage ici). Je l'avais d'ailleurs remarqué rien qu'à l'échelle 1:1 à cause d'un lien d'un menu déroulant qui était sur deux lignes. Or de nombreux éléments ont l'air d'avoir une hauteur fixe, qui les empêche de prendre la hauteur nécessaire si jamais le texte grandit, ou passe sur plusieurs lignes (à fortiori pour une combinaison des deux facteurs).

http://files.covertprestige.info/screens/web/unieux3.png
Où l'on voit que c'est encore pire. Euh non là je rigole Smiley lol

Voilà mes deux centimes d'euro. En tout cas, j'aime beaucoup le graphisme.
Merci beaucoup de ces commentaires.

Je suis cependant un peu déconcertée par tout ça car je débute en xhtml css.
J'ai eu beaucoup de mal à en arriver là sur le site et je pensais m'en être pas trop mal sortie.

Quels sont exactement les problèmes ? Dans quels cas puis je avoir le résultat de ces captures d'écran ?

Merci beaucoup...
Julihus a écrit :
Quels sont exactement les problèmes ? Dans quels cas puis je avoir le résultat de ces captures d'écran ?

Pour les éléments qui ont une hauteur figée, le problème se pose dès que le contenu de l'élément dépasse la hauteur indiquée. Sur certains navigateurs (IE) l'élément s'étendra en hauteur, tandis qu'avec d'autres le contenu dépassera, et pourra se chevaucher (dans le cas de texte qui dépasse de la zone fixée).

Dans mon cas:
- j'ai un écran 17" TFT (qui a presque la diagonale d'une 19" CRT), configuré en 1280×1024px... comme 15% des internautes, d'ailleurs ! (+ 5% qui ont une résolution supérieure) ;
- j'utilise Firefox (sous Linux, mais ça ne change pas grand chose) ;
- dans Firefox, j'ai une taille de police minimale fixée à 12 points. Du coup, si un webmaster veut absolument du 10pt pour sa police, pour que son menu horizontal tienne pile sur la largeur de la page, ça risque de poser un problème Smiley cligne

Bref, on peut peut-être fixer la taille d'un site ou d'un élément en largeur, mais vu la gestion des marges des éléments qui peut être assez aléatoire d'une configuration à l'autre, et surtout vu la gestion des fontes et des tailles du texte qui peut varier énormément d'une configuration à l'autre, on évitera de donner des hauteurs fixes aux éléments, et on se contentera de les laisser prendre la hauteur dont ils ont besoin.
Bon ok je vais essayer de faire ca alors.
Ca concerne donc le menu d'en haut et le menu de droite uniquement ?

Merci
Il y a de l'amélioration !

Cf cette capture d'écran :
http://files.covertprestige.info/screens/web/unieux4.png
(taille du texte +1)

Par contre, lorsque le texte du menu augmente, ça ne fait pas descendre le contenu en dessous. C'est peut-être (sans doute ?) un comportement voulu, et je ne sais pas trop si ça pose un problème réel. Ça peut cacher certaines choses, mais ça permet de ne pas décaler tout le bas du site lorsqu'on déroule un menu.

Donc ça devrait être bon comme ça.

Rien à voir, une petite remarque : je remplacerais bien « Bienvenue sur le site officiel d'Unieux. » par « Bienvenue sur le site de la commune d'Unieux. »
Parce que bon, je ne sais pas s'il existe des sites non officiels de la commune d'Unieux, mais j'en doute.
Effectivement, ça cache le haut du contenu si on grossit les menus.

Si je mets mon menu en relatif tout se décale quand on déroule.
Alors tu as raison, ça dvrait aller comme ça.

Merci pour tous tes conseils.
Sujet clos
Aller à