Texte sous le footer

Bonjour à tous,


Petit problème de positionnement de footer (oui je sais......encore un ! ).
Voici mon HTML :

<div id="full_size"> 
	<div id="container">
		<div id="header">
			<div id="logo"></div>
            <div id="menu">
                <div id="menu1"><jdoc:include type="modules" name="menu_colonne1" style="xhtml" /></div>
                <div id="menu2"><jdoc:include type="modules" name="menu_colonne2" style="xhtml" /></div>
                <div id="menu3"><jdoc:include type="modules" name="menu_colonne3" style="xhtml" /></div>
                <div id="menu4"><jdoc:include type="modules" name="menu_colonne4" style="xhtml" /></div>
            </div>
		</div>
		<div id="site">
			<div id="colonne_gauche"><jdoc:include type="modules" name="left" /></div>
            <div id="avant_contenu">
            	<div id="pathway"><jdoc:include type="modules" name="breadcrumbs" /></div>
                <div id="recherche"><jdoc:include type="modules" name="user4" style="xhtml" /></div>
			</div>			
            <div id="contenu"><jdoc:include type="component" /></div>						
		</div>
	</div>
</div>

<div id="footer_container">
    <div id="footer">
        <div id="footer_gauche"></div>
        <div id="footer_droite"></div>	
        <div id="footer_centre">
        	<jdoc:include type="modules" name="pied_page" style="xhtml" />
        </div>
    </div>
</div>

Et la CSS qui correspond :

#full_size{ background-repeat:repeat-x ; background-image:url(../images/bg_header.jpg); height:100%;}
#container{ margin-left:auto ; margin-right:auto ; width:90% ; }

#header{ }
#logo{ width:201px ; float:left ; height:190px ; background-image:url(../images/logo_header.png) ; background-repeat:no-repeat;}
#menu{margin-left:201px; height:190px; }
#menu1{ width:25% ; float:left ; }
#menu2{ width:25%  ; float:left ; }
#menu3{ width:25% ; float:left ;  }
#menu4{ width:25%  ; float:left ; }

#site{ height:100%;background-image:url(../images/bg_colonne_gauche.png); background-repeat:repeat-y;}
#colonne_gauche{ clear:right; float:left ; width:201px ; }
#avant_contenu{ margin-left:201px; }
#pathway{ float:left; width:50%; }
#recherche{ float:right; width:50%; text-align:right;  }
#contenu{  }

#footer_container{ background-repeat:repeat-x; background-image:url(../images/bg_footer.png); width:100%; height:45px; clear:both;}
#footer{ margin-left:auto ; margin-right:auto ; width:90% ; }
#footer_gauche{ width:201px;float:left;background-image:url(../images/bg_footer_gauche.png);height:38px;background-repeat:no-repeat; }
#footer_droite{ width:200px;height:38px;float:right;background-image:url(../images/bg_footer_droite.png);background-repeat:no-repeat; background-position:right;}
#footer_centre{ text-align:center;color:#216f9d;overflow: hidden; padding-top:10px;}

Problème : quand le contenu de la div "contenu" est trop long, le texte déborde et passe sous le footer.

Avez-vous une solution à me proposer ?


Merci beaucoup d'avance !

Bonjour bensoltane,

Pas de style pour ton div contenu ?
As-tu parcouru les solutions proposées par la FAQ et les liens associés ?

Cdt,
Sylvain

6l20 a écrit :
Bonjour bensoltane,

Pas de style pour ton div contenu ?
As-tu parcouru les solutions proposées par la FAQ et les liens associés ?

Cdt,
Sylvain

Bonjour Sylvain,


Je n'ai pas encore complété mon div contenu, mais pas de spécification particulière : sa hauteur et sa largeur s'adaptent automatiquement.

J'ai effectivement parcouru les sections FAQ, et notamment ce sujet sur le footer, mais le problème reste le même : mon footer colle bien au bas de bas en appliquant la méthode, mais le texte passe toujours en dessous en cas de contenu trop long.

As-tu une idée, en parcourant mon code ?
Je peux te donner en MP le lien du site de test si tu veux, pour te faire une idée.

Re,

Si c'est une page de test, tu dois pouvoir la poster ici même non ?
Effectivement cela peut aider

Cdt,
Sylvain

Bonsoir bensoltane,

Je répond ici à ton message privé, n'y vois pas d'offense, c'est la politique de ce forum et de notre communauté, ta problèmatique et son éventuelle résolution pourront peut-être aidés quelqu'un à l'avenir.
Merci de ta compréhension

1-Concernant ta problèmatique de confidentialité, il suffit de faire une simple page de test reproduisant le(s) problème(s), en modifiant éventuellement les infos à cacher ( avec du faux texte comme tu l'as fait sur certaines portions de ton code), ou en postant une image avec des commentaires sur le(s) soucis rencontré(s).

2-

a écrit :
Le texte passe sous le footer (en revanche, il reste bien collé au bas de page, ce que je recherchais)

Je ne comprends pas bien la parenthèse, mais cela n'a pas d'importance.
Il faudra par contre revoir le positionnement absolu :

openweb a écrit :

Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :

-une boîte elle-même positionnée (position relative ou absolue)
-le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.

Cherches le premier ancêtre positionné (ou non...) de ton pied de page et tu résoudras ton problème
Il y a également d'autres méthodes de positionnement de manière générale et concernant le pied de page en particulier

3-

a écrit :
- la colonne de gauche ne prend pas toute la hauteur

Pourquoi le ferait-elle ?
Elle n'a pas de contenu pouvant justifier qu'elle "sétire" comme le conteneur et aille jusqu'au pied de page (lorsque tu l'auras remis à sa place ).
Tu n'indiques pas de hauteur; il est d'ailleurs difficile d'évaluer celle-ci, puisqu'elle est fonction du contenu du site, lui même variable, de manière générale, suivant les pages qui composent ce site...
Tu pourras sans doute palier à cette difficulté au moyen des "colonnes factices" ce qui ne devrait pas être très compliqué dans ce cas de figure, ou en étudiant les technique utilisées dans les derniers modèles de mise en page en css mais cela impliquerait quelques modifications supplémentaires.

Concernant les remarques éventuelles sur le design, nous avons une section dédiée qui répondra parfaitement à tes attentes (avec faux texte si besoin )
Cela reste sobre et assez "passe-partout"

4-Pour le code, je ne connais pas vraiment Jomla, il me semble cependant que tu te compliques un peu la vie parfois, notamment pour le pied de page (un seul bloc, et une image unique devraient suffire), il y a sûrement moyen de ne pas utiliser de tableaux lorsque ce n'est pas nécessaire ensuite, quelques petits soucis de positionnement (sur tes formulaires notamment) que tu résoudras assez facilement.
Penses à regarder ton site avec plusieurs navigateurs, Opera et IE6 semblent éprouver quelques difficultés...
! Tu as deux fois l'id lipsum est ça c'est mal !

Après, il reste le domaine de l'accessibilité, de l'ergonomie, etc...et tu trouveras matière à commentaire en proposant ton site dans la section idoine

En espérant que tu cela t'aidera à solutionner tes petits soucis, n'hésites pas à revenir vers nous avec tes solutions, ou d'éventuelles questions

Cdt,
Sylvain

Bonsoir Sylvain et merci pour cette réponse très complète.

Je reprends les différents points dans l'ordre :

1/ Je posterai des screenshots des problèmes constatés sur mon site.
En réalité, ce n'est pas tellement un soucis de confidentialité, je veux seulement éviter que le contenu ne soit rendu public avant la mise en ligne définitive (certains modules sont encore en développement...).

2/ Quand je dis "en revanche, il reste bien collé au bas de page, ce que je recherchais", j'ai appliqué la méthode qui consiste à faire coller le footer en bas de page quel que soit le contenu (en cas de contenu insuffisant, le footer restera en bas de fenêtre, ce qu'il ne ferait pas de manière naturelle, il se placerait seulement après le contenu.).
C'est suite à cette modification dans mon code (en jouant sur les positionnements absolus et relatifs) que le contenu déborde en dessous de ce footer. J'ai essayé de nombreuses fois d'appliquer le positionnement énoncé dans tes liens sur le conteneur initial, mais rien n'a fonctionné...

3/ Effectivement, rien n'est fait dans mon code pour que la colonne de gauche ne prenne toute la hauteur. J'ai essayé la technique des colonnes factices, mais là encore, rien à faire....en revanche je te remercie pour le second lien, celà me semble plus compliqué mais si le résultat est là....
Niveau design, c'est le but recherché, l'intérêt venant principalement du contenu des articles (illustrations, etc...) et non de l'aspect général. Clean, simple, lisible.

4/ Le footer est décomposé en 3 parties car il doit pouvoir afficher : l'image de gauche, le contenu "menu" du footer (étirable), et l'image de droite. Un seul aurait pu suffire sur un design à largeur fixe (sauf erreur de ma part).
Sinon effectivement j'ai constaté des petits soucis avec IE6, qui viennent principalement de mon CSS (exemple : titres H3 incomplets, etc....).
Merci pour l'id "lipsum"

Mon gros problème est surtout méthodique plus que technique : j'attaque tout en même temps, le positionnement et la mise en forme, en revenant sur le HTML, etc....d'où certains soucis parfois...

Un grand merci pour ton aide en tout cas, ca me permet d'avancer un peu.
Sur ce......je retourne à mon footer

Bonjour bensoltane,

bensoltane a écrit :

Quand je dis "en revanche, il reste bien collé au bas de page, ce que je recherchais", j'ai appliqué la méthode qui consiste à faire coller le footer en bas de page quel que soit le contenu (en cas de contenu insuffisant, le footer restera en bas de fenêtre, ce qu'il ne ferait pas de manière naturelle, il se placerait seulement après le contenu.).
C'est suite à cette modification dans mon code (en jouant sur les positionnements absolus et relatifs) que le contenu déborde en dessous de ce footer. J'ai essayé de nombreuses fois d'appliquer le positionnement énoncé dans tes liens sur le conteneur initial, mais rien n'a fonctionné...

Et bien pas tout à fait ce me semble lorsque tu fais défiler ta page, le pied de page ne reste pas coller en bas à la suite de ton contenu (c'est bien ce que tu souhaites obtenir ?)
L'ancêtre positionné devrait être ton div full_size (qui n'a actuellement aucune propriété de positionnement)...
Si tu lui affectes un positionnement relatif par exemple, il me semble que tu obtiens ce que tu désires, non ?

bensoltane a écrit :

3/ Effectivement, rien n'est fait dans mon code pour que la colonne de gauche ne prenne toute la hauteur. J'ai essayé la technique des colonnes factices, mais là encore, rien à faire....en revanche je te remercie pour le second lien, celà me semble plus compliqué mais si le résultat est là....

Un conteneur positionné comme tu le souhaites, englobant ta colonne de gauche et ton "contenu" avec une image en background qui se répète en y, devrait pouvoir simuler cet aspect colonnes (factices) et te donner satisfaction pourtant.
Comme ceci par exemple (dimension, aspect à définir suivant ton besoin)

bensoltane a écrit :

Niveau design, c'est le but recherché, l'intérêt venant principalement du contenu des articles (illustrations, etc...) et non de l'aspect général. Clean, simple, lisible.

Alors cela semble réussi

Pour le pied de page, c'est toi le maître d'oeuvre

bensoltane a écrit :

Un grand merci pour ton aide en tout cas, ca me permet d'avancer un peu.
Sur ce......je retourne à mon footer

De rien, bon courage pour la suite.
Cdt,
Sylvain