Dilemme de position resolu mais incompatibilité IE

Question

Gut&Berg

9 Nov 2006 à 15:52

ATTENTION: Ce sujet est inutile, ne perdez pas votre temps à le lire. Allez plutôt à la FAQ. [Aux modérateurs]Merci de le fermer.

Je travaille sur une page d'article spip avec un positionnement assez banal :

-------------- Entête -------------

-------------- corps ---------------

____________ . ________
l........................l . l................l
l........................l . l................l
l........................l . l....MENU...l
l....ARTICLE.......l . l................l
l........................l . l................l
l........................l
l........................l

-------------- Pied ----------------

l'entête, le corps et le pied ont une image en fond paramétrées ainsi :


#entete{
background-image: url(../images/head.gif);
background-repeat: no-repeat;
}
#corps{
background-image:url(../images/fond.gif);
background-repeat: repeat-y;
}
#pied{
background-image: url(../images/foot.gif);
background-repeat: no-repeat;
}

le bloc article et le bloc menu varient en hauteur en fonction de leur
contenu.

1. Tout fonctionne bien avec le "menu" positionné en absolu mais s'il venait
a avoir plus de contenu que l'article, il ne repousserait pas le pied de page
et prolongerait plus bas que celui-ci.

2. Positionné en "float", il pourrait repousser le pied de page comme je le veux mais alors, il n'admet plus d'image de fonds sous lui.

Y-a-t-il une solution en CSS ? J'ai peur qu'il n'y en ait pas... Pourtant j'aimerais séparer au maximum forme et contenu et donc, ne pas avoir recours à un tableau html...

Si quelqu'un a déjà résolu ce problème (ce que je n'ai pas encore vu), merci de renvoyer au post et me pardonner celui-ci ...
Modifié par Gut&Berg (14 Nov 2006 - 14:43)

koala64

Modérateur

9 Nov 2006 à 15:57

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code CSS[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Gut&Berg

9 Nov 2006 à 16:02

Corrigé. Merci.

Thomas D.

9 Nov 2006 à 21:59

Salut.

En fait, tu veux faire 2 colonnes de même hauteur ? Parce que c'est un sujet récurrent sur le forum Smiley smile

Si au moins une de tes deux colonnes a une largeur fixe, utiliser la méthode des colonnes factices, sinon, un tableau à 2 cellules pour être compatible avec IE6.

a écrit :
2. Positionné en "float", il pourrait repousser le pied de page comme je le veux mais alors, il n'admet plus d'image de fonds sous lui.

Heu, à priori, en absolu non plus, l'image de fond ne se prolonge pas !?

Gut&Berg

10 Nov 2006 à 16:03

J'ai dû mal formuler le problème car je ne souhaitais pas faire deux colonnes de même hauteur, mais bien de hauteurs variables (car contenus variables) et surtout conserver tous les backgrounds en image gif pour pouvoir créer tout type de rendu/texture.
J'ai résolu le problème et je le présente intégralement (Si quelqu'un voit des simplifications possible, merci de les poster, dès que l'on peut alléger quoi que ce soit, ça a du bon...)

La page html (sans le balisage SPIP ni menu javascript pour plus de clarté) :



<body >
<div id="page">


<!--  _________________________________________________ HEAD _________________________________________________ -->

<div id="header">

	<!--  __________ -->	
		<div id="hierarchie">
				<a href="#">Racine > Rubrique > Sous-rubrique</a>
		</div>
	<!--  __________ -->	
		<div id="titre_article">
			<h1>Titre de l'article en question</h1>
		</div>
	<!--  __________- -->	
</div>
<!--  _________________________________________________ /HEAD _________________________________________________  -->
<!--  _________________________________________________ INSIDE _________________________________________________  -->

	

<div id="inside">


		<div id="principal">
		<h2>Soustitre de l'article en question</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas et erat. Sed id nulla.
		In hac habitasse platea dictumst. Nunc commodo. Integer vulputate. Etiam eget augue posuere turpis aliquet egestas.
		Fusce turpis tellus, convallis at, condimentum vitae, lobortis sed, odio. Pellentesque sodales.
		Nam risus. Pellentesque semper. Vestibulum facilisis lacus a quam. Curabitur eget erat vitae nulla dignissim lobortis.
		Duis volutpat pede vitae enim.</p>

		
		</div>
			

<!--  _________________________________________________  -->

	<div id="annexes">
	
		<!-- _______________________ -->
		<div class="encart">
		
			<div class="encart-head">
					
				<h3>SOMMAIRE</h3>
				
			</div>
			
			<div class="encart-body">	
				<span class="encart-vspacer">&nbsp;</span>
				<ol>
						<li><a href="#">lien 1 - Article A</a></li>
						<li><a href="#">lien 2 - Article B qui parle de x choses sur le sujet de cet article</a></li>
						<li><a href="#">lien 3 - Article C</a></li>
						<li><a href="#">lien 4 - Tet site a voir</a></li>
				</ol>
			</div>
			<div class="encart-foot">
			</div>
			
		</div>
		<!-- _______________________ -->
		
		<div class="encart">
		
			<div class="encart-head">
					
				<h3>SOMMAIRE</h3>
				
			</div>
			
			<div class="encart-body">	
				<span class="encart-vspacer">&nbsp;</span>
				<ol>
						<li><a href="#">lien 1 - Article A</a></li>
						<li><a href="#">lien 2 - Article B qui parle de x choses sur le sujet de cet article</a></li>
						<li><a href="#">lien 3 - Article C</a></li>
						<li><a href="#">lien 4 - Tet site a voir</a></li>
						<li><a href="#">lien 1 - Article A</a></li>
						<li><a href="#">lien 2 - Article B qui parle de x choses sur le sujet de cet article</a></li>
						<li><a href="#">lien 3 - Article C</a></li>
						<li><a href="#">lien 4 - Tet site a voir</a></li>
				</ol>
			</div>
			<div class="encart-foot">		
			</div>
			
		</div>
		
		
	</div>
<!--  _________________________________________________  -->

	<div class="pusher">&nbsp;
	</div>


</div>
<!--  _________________________________________________ /INSIDE _________________________________________________  -->
<!--  _________________________________________________ FOOTER _________________________________________________  -->

<div id="footer">
accueil | informations | contact
</div>
<br/>
<!--  _________________________________________________ /FOOTER _________________________________________________  -->

</div>
</body>

le CSS :


/*  ------------------------------------------
/*  PAGINATION GLOBALE
/*  ------------------------------------------
*/

html, body {
padding-top: 0;
font-family: "Lucida Grande", Geneva, "Myriad Web", Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center; /* pour IE anterieur a IE6 */
}


#page{
position: absolute ;
text-align: left; /* pour IE anterieur a IE6 */
/*width: 913px;*/
left: 50%; /* left et margin-left ainsi associes permettent de centrer horizontalement  */
margin-left: -456px; /*  moitié de la largeur du conteneur  */
}

/*  ------------------------------------------
/*  TEXTE GLOBAL
/*  ------------------------------------------
*/
a:link {
text-decoration: none;
color: #0060b6;
}
a:visited {text-decoration: none; }
a:hover { color : red ; }
a:active {color: red ; }



/*  ------------------------------------------
/*  ENTETE
/*  ------------------------------------------
*/
#header{
clear: both;
background: url(../images/head.gif) no-repeat;
height: 233px;
width: 913px;
}

#hierarchie{
position: relative;
top: 174px;
left: 192px;

}

#titre_article{
position: relative;
top: 184px;
left: 56px;
width: 464px;
}
/*  ------------------------------------------
/*  PIED
/*  ------------------------------------------
*/
#footer{
clear: both;
background: url(../images/foot.gif) no-repeat;
height: 36px;
width: 913px;
text-align: center;
}

/*  ------------------------------------------
/*  CORPS
/*  ------------------------------------------
*/

#inside{
width: 913px;

background-image:url(../images/fond.gif);
background-repeat: repeat-y;

}
.pusher {
clear: both;
background-image:url(../images/fond.gif);
background-repeat: repeat-y;
}
/*  ------------------------------------------
/*  CONTENU PRINCIPAL DU CORPS
/*  ------------------------------------------
*/

#principal{
background-color: #9FD1CF;
text-align: justify;
margin: 2em;
padding:1em;
float: left;
width:500px;
}

/*  ------------------------------------------
/*  CONTENUS ANNEXES DU CORPS
/*  ------------------------------------------
*/

#annexes{
float: right;
width:300px;
margin-right: 2em;
/*background: #9FD1CF;*/
}


.encart{
width:289px;
margin-bottom: 1em;
}


.encart-head{
padding-top: 0.2px;
text-align: center;
color: #FFFFFF;
background: url(../images/minisom_head.gif) no-repeat;
height: 39px;
width: 289px;
}

.encart-body{
padding-left: 1em;
background: url(../images/minisom_body.gif) repeat-y;
background-position: 0 0;
width: 289px;
}

.encart-foot{
text-align: center;
background: url(../images/minisom_foot.gif) no-repeat;
height: 19px;
width: 289px;
margin-top: -1em ;

}
.encart-vspacer{
font-size: 50%;
line-height: 50%;
}

Et l'image du rendu (avec cas ou la colonne de droite est plus haute que la gauche et vice-versa).

Modifié par Gut&Berg (14 Nov 2006 - 11:32)

Raphael

Administrateur

10 Nov 2006 à 16:18

Ah, juste en passant, "dilemne" s'écrit "dilemme" Smiley cligne

Gut&Berg

10 Nov 2006 à 16:23

En effet, merci. Il doit y avoir un mot en -emne qui parasite nos esprits.

Thomas D.

10 Nov 2006 à 17:36

Gut&Berg a écrit :
2. Positionné en "float", il pourrait repousser le pied de page comme je le veux mais alors, il n'admet plus d'image de fonds sous lui.

Je ne comprends toujours pas cette phrase Smiley ohwell

Qu'est-ce qui t'empêchait de réaliser la mise page que tu donnes dans tes captures avec des flottants ?

Gut&Berg

13 Nov 2006 à 12:25

Sopo a écrit :
Je ne comprends toujours pas cette phrase
Qu'est-ce qui t'empêchait de réaliser la mise page que tu donnes dans tes captures avec des flottants ?

Pour la deuxième colonne mon, code CSS était :


#annexes{
float: left;
width:300px;
margin: 530px;
}

Mon erreur était bêtement sur la ligne "marge" qui me restait d'une tentative de placement en absolu, du coup, mes encarts se décalaient, tout allait mieux en la supprimant ainsi :


#annexes{
float: right;
width:300px;
margin-right: 2em;
}

Modifié par Gut&Berg (14 Nov 2006 - 14:38)

Felipe

Administrateur

15 Nov 2006 à 10:38

Fermé à la demande de l'auteur.

Pour information, il n'est pas d'usage ici de fermer un Sujet lorsqu'il est résolu (ça se fait sur d'autres forums mais ce n'est pas la pratique ici). Simplement éditer le titre pour rajouter [ Résolu] et on le laisse ouvert si quelqu'un veut apporter un complément, voir l'Aide à ce sujet.

M'enfin c'est le droit de l'auteur du sujet donc ... close

Sujet clos

Questions générales et questions de débutants

Dilemme de position resolu mais incompatibilité IE