28172 sujets

CSS et mise en forme, CSS3

bonjour,

j'ai un petit soucis sur le site (squellette spip) que je suis en train de faire. j'ai une bae qui gache tout mon graphisme entre deu bloc
www.npa13.org.

la feuille de style

/*  ----------------------------------------------------------- */
/*  Feuilles de styles du squellet npa13 */
/*  ----------------------------------------------------------- */



/*  ------------------------------------------
/*  Correction des styles HTML par defaut
/*  ------------------------------------------ */
body {
	background: #cccccc;
	margin: 0;
	text-align: center;
	font-size: 10.5px;
	color: black;
}

img, table { margin: 0; padding: 0; border: none; }

/*  ------------------------------------------
/*  Disposition a l'ecran des blocs principaux
/*  ------------------------------------------ */
#page {
	width: 1000px;
	text-align: left;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}

#conteneur { width: 100%; 
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;}


#conteneur #contenu {
	float: right;
	width: 750px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;}

#conteneur #navigation {
	float: left;
	width: 250px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}


le fichier html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<INCLURE{fond=inc-head}>
</head>

<body>
<div id="page">


	<INCLURE{fond=inc-entete}>

	<div id="conteneur">
	
		<div id="contenu">		
		</div><!-- fin contenu -->


		<div id="navigation">
			<INCLURE{fond=inc-rubriques}>
		</div><!-- fin navigation -->

	</div><!-- fin conteneur -->


	<INCLURE{fond=inc-pied}{skel=#SQUELETTE}>

</div><!-- fin page -->
</body>
</html>




je m'arrache les cheveux!

Merci
mat per a écrit :
je m'arrache les cheveux!

Et sans doute les doigts aussi, ce qui expliquerait que tu écrives des chose aussi peu compréhensibles que «j'ai une bae qui gache tout mon graphisme entre deu bloc». Smiley cligne Qu'est-ce donc qu'une bae?

Je n'ai rien compris à ton explication (et je pense ne pas être le seul Smiley cligne ), mais en voyant le site j'ai l'impression que le menu devrait être dans la continuité de l'en-tête. Par contre, les modifications à apporter pour que ça marche ne sont pas super évidentes. Tu as pas mal de problèmes qui se cumulent, et des problèmes de conception à la base, par exemple un conteneur global de 1024px de large (je te laisse deviner pourquoi c'est une erreur grossière -- un indice: c'est trop large pour un écran de 1024px de large).

Et surtout, tu as de nombreuses erreurs HTML. Tu n'arriveras à rien si tu ne vérifies pas la validité de ton code HTML, et en particulier l'imbrication correcte des éléments. J'avoue qu'en regardant ton code je n'arrive pas à comprendre quelle devrait être la structure des éléments. Donc on va à l'adresse suivante:
http://validator.w3.org
et on corrige les problèmes rencontrés (en commençant par le haut: certaines erreurs peuvent être un problème d'analyse à cause d'une erreur située plus haut dans le code).

Tu peux aussi travailler avec des outils comme Firebug pour vérifier l'imbrication de tes blocs.
Modifié par Florent V. (08 Mar 2008 - 16:31)
Oui c'est vrais j'écris trés mal.
bon j'ai refait mon squellette, mais ça marche trés bie nsous firefox mais pas du tout sous ie6. je comprend pas pourquoi, c'ets vrais je tatone te ayant linux je voie le résultat et je modifie ne fonction de ce que m'affiche firefox.
mon site

mon fichier style :
#CACHE{7200}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html dir="#LANG_DIR" lang="#LANG">

<head>

<title>[(#NOM_SITE_SPIP|textebrut)]</title>

[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]

<INCLURE{fond=inc-head}>

</head>



<body class="page_sommaire">

<div id="page">





	<INCLURE{fond=inc-entete}>



	<div id="conteneur">



		

		<div id="contenu">

			[(#REM) Fil d'Ariane ]

	<div class="hierarchie"><:accueil_site:> | <a href="#URL_PAGE{plan}"><:plan_site:></a>

	| <a href="ecrire/"><:espace_prive:></a>

	</div><br class="nettoyeur" /><br><br>

			<div class="appel">

			<BOUCLE_articles(ARTICLES){id_rubrique=1}{id_article=1}>

			<h2><a href="#URL_ARTICLE">[(#TITRE)]</a></h2><br />

			[(#TEXTE|couper{800})]<br><br>

		    <a href="#URL_ARTICLE">Lire la suite -></a>

			</BOUCLE_articles>

			</div>

			

			<div class="agenda">

			<h2>Agenda :</h2>
			<B_agenda>
	
			<dl>
<BOUCLE_agenda(EVENEMENTS){age<0}{par date} {0,3} {statut=publie}>
<h1>#TITRE</h1>
<p>#DESCRIPTIF<br>[(#DATE_DEBUT|Agenda_affdate_debut_fin{#DATE_FIN,#HORAIRE})] wine#LIEU</p>


</BOUCLE_agenda>

</B_agenda>

	

			</div>



			<br class="nettoyeur" /><br><br><br><br>			

			[(#REM) Les deux derniers articles ]
			<div class="dernier"><h2>Les deux derniers articles publiés :</h2></div><br class="nettoyeur" />

					<BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {0,3} {doublons}>

									<div class="article">

					<a href="#URL_ARTICLE"><h2 class="titre_art">[(#TITRE|supprimer_numero)]</h2></a><br />

					[(#CHAPO)]

					[(#TEXTE|couper{600})]})]<br><br>

					<a href="#URL_ARTICLE">Lire la suite -></a>

					

				</div>

				<img src="dist/images/poing.png" / class="poing">

				<br class="nettoyeur" /><br><br><br>

					</BOUCLE_articles_recents>

				



			







		</div><!-- fin contenu -->





		<div id="navigation">





			<INCLURE{fond=inc-rubriques}>





		</div><!-- fin navigation -->



	</div><!-- fin conteneur -->







</div><!-- fin page -->

</body>

</html>




mon fichier html :

#CACHE{7200}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html dir="#LANG_DIR" lang="#LANG">

<head>

<title>[(#NOM_SITE_SPIP|textebrut)]</title>

[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]

<INCLURE{fond=inc-head}>

</head>



<body class="page_sommaire">

<div id="page">





	<INCLURE{fond=inc-entete}>



	<div id="conteneur">



		

		<div id="contenu">

			[(#REM) Fil d'Ariane ]

	<div class="hierarchie"><:accueil_site:> | <a href="#URL_PAGE{plan}"><:plan_site:></a>

	| <a href="ecrire/"><:espace_prive:></a>

	</div><br class="nettoyeur" /><br><br>

			<div class="appel">

			<BOUCLE_articles(ARTICLES){id_rubrique=1}{id_article=1}>

			<h2><a href="#URL_ARTICLE">[(#TITRE)]</a></h2><br />

			[(#TEXTE|couper{800})]<br><br>

		    <a href="#URL_ARTICLE">Lire la suite -></a>

			</BOUCLE_articles>

			</div>

			

			<div class="agenda">

			<h2>Agenda :</h2>
			<B_agenda>
	
			<dl>
<BOUCLE_agenda(EVENEMENTS){age<0}{par date} {0,3} {statut=publie}>
<h1>#TITRE</h1>
<p>#DESCRIPTIF<br>[(#DATE_DEBUT|Agenda_affdate_debut_fin{#DATE_FIN,#HORAIRE})] wine#LIEU</p>


</BOUCLE_agenda>

</B_agenda>

	

			</div>



			<br class="nettoyeur" /><br><br><br><br>			

			[(#REM) Les deux derniers articles ]
			<div class="dernier"><h2>Les deux derniers articles publiés :</h2></div><br class="nettoyeur" />

					<BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {0,3} {doublons}>

									<div class="article">

					<a href="#URL_ARTICLE"><h2 class="titre_art">[(#TITRE|supprimer_numero)]</h2></a><br />

					[(#CHAPO)]

					[(#TEXTE|couper{600})]})]<br><br>

					<a href="#URL_ARTICLE">Lire la suite -></a>

					

				</div>

				<img src="dist/images/poing.png" / class="poing">

				<br class="nettoyeur" /><br><br><br>

					</BOUCLE_articles_recents>

				



			







		</div><!-- fin contenu -->





		<div id="navigation">





			<INCLURE{fond=inc-rubriques}>





		</div><!-- fin navigation -->



	</div><!-- fin conteneur -->







</div><!-- fin page -->

</body>

</html>