Discussion :

[ZamZam340]

Bonjour,

je monte un site sous SPIP, et je voudrais avoir une présentation sur trois colonne : sommaire | contenu | breves (ou agenda)

je précise que chaque colonne doit faire la hauteur totale de la page (je ne veux pas de sommaire ou de brèves dans un coin).

voici le code de ma page /squelettes/sommaire.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="conteneur">
 
 <div id="navigation">
        <INCLURE{fond=inc-rubriques}>
 </div><!-- fin navigation -->
 
 <div id="encart">
  <!-- code des breves, cf post précédent -->
 </div>
 
 <div id="contenu">
	<!-- code du contenu-->
 </div> <!-- fin contenu -->
</div><!-- fin conteneur -->

voici un bout de mon fichier /squelettes/habillage.css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#page {
	width: 80%;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	padding: 1%;
	background: #FECC05; /*couleur orange safran*/ 
}
 
#conteneur { width: 100%;
	clear: both; /*sous FF et Opera : nettoie en haut et en bas, permet de dégager notamment l'espace réservé au fil d'ariane*/
 } 
 
#conteneur #navigation{			/* colonne de gauche,  le sommaire*/
	float: left;
	width: 15%;
}
 
#conteneur #encart {			/*colonne à droite pour les brèves */
	float: right;
	width: 15%;
	text-align: left;
}
 
#conteneur #contenu {			/* colonne du centre, l'article */
	margin-left: auto;
	margin-right: auto;
	width: 67%; 
	background: #FFFFA6; /*fond couleur sable*/
	padding: 1%;
}

Le résultat est assez mauvais aujourd’hui :
- IE6 : c'est parfait
- IE 7 : c'est parfait
- Firefox 3 : les menus de droite et de gauche sont OK. Le contenu central est ’bizarre’. Seul le chapeau est situé en haut de la page. Le corps du document commence à la fin du menu de navigation.
- Opera 9.51 : idem
- Chrome : idem

J'aurais aimé que tous les navigateurs affiche correctement la page.
Quelqu'un pourrait il m'aider ?

[blueice]

Tu prends le problème à l'envers, fait ton squelette pour les navigateurs respectueux des standards et ensuite adapte le pour IE.

[ZamZam340]

C'est gentil de me répondre mais ça ne m'aide pas trop ta réponse

Je ne pense pas prendre le problème à l'envers : je ne me suis jamais dit je vais faire un site pour IE (même si cela représente 75% du traffic sur mon site)

Ce que j'ai fais s'inspire de deux sources qui me semblent fiable : le code source de SPIP 1.92 et un tutoriel

Donc je reformule ma question (puisqu'apparement je regarde dans la mauvaise direction) : en quoi mon code n'est pas respectueux des standards du Web ? Et que dois-je faire pour qu'il le soit ?

edit : pour voir mon site en ligne (dsl pour le problème d'encodage) : http://www.pachyderme.net/virageenergie/

[ZamZam340]

bonsoir,

bon le pb est résolu mais avec le code que j'ai mis en ligne ce n'était pas possible (ça m'apprendra à faire mon radin )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
[(#REM) Contenu principal : article objectif ]
	<div id="contenu">
		<h1 class="invisible">#NOM_SITE_SPIP</h1>
 
		[(#REM) Contenu principal : contenu de l article ]
		<BOUCLE_sommaire(ARTICLES) {id_article=23}>
			<div class="cartouche">
				[<div class="#EDIT{chapo} chapo">(#CHAPO)</div>]
				<br class="nettoyeur" /> 
				<div> <center>
				<a href="#URL_SITE_SPIP/spip.php?article20"> <img src="#CHEMIN{synthesecouv.jpg}" alt="Présentation de la synthese" /> </a> <br />
				<a href="#URL_SITE_SPIP/spip.php?article20"> Présentation de la synthèse </a> <br />
				<a href="#URL_SITE_SPIP/spip.php?article20"> Téléchargement de la synthèse </a> <br />
				</center> </div>

c'est le <br class="nettoyeur" /> qui posait problème. Je l'ai remplacé par un <br /> et ça marche beaucoup mieux.

voici le code correspondant à la classe incriminée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.nettoyeur { clear: both; margin: 0; padding: 0; border: none; height: 0; line-height: 1px; font-size: 1px; }

Si quelqu'un à une explication je suis preneur.

[devyan]

Salut,

C'est la propriété "clear:both" qui fait que obligatoirement ton contenu passe SOUS (plus bas) que les éléments "float:left et/ou right" placés avant. Et c'est normal (c'est fait pour)