28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mon body ne prend pas toute la page...

Bonsoir tout le monde.
J'arrive en phase final de la création graphique de mon site. Et je vais devoir me coller à un probleme que j'ai depuis longtemps mais que j'ai toujours repoussé depuis le début...

En faite j'ai placé mes div avec des position relative absolute afin d'optimiser le referencement.
Cad que dans le code j'ai les chose a référencer en premier. Mais on gere l'affichage via le css. Bon je dis ça mais je ne sais pas si ça a un rapport...

Le probleme est que j'ai un pied de page ingérable. Il ne veut pas se mettre en bas de mon contenu. Actuellement je suis obliger de la gérer via position:absolute et bottom:-600px... et augmenter le chiffre.
Mais le contenu change en fonction de la page. Donc pas gérable comme ça.
Je ne comprends pas trop pourquoi je n'arrive pas a le mettre en bas.

Il se trouve qu'en essayant de trouver le problème avec firebug, j'ai découvert que mon html body div global etc.... ne prenne pas toute la page mais juste une partie. J'ai beau essayé de corriger ça je ne trouve pas.
J'ai beau regarder sur le net je ne trouve rien non plus à ce sujet. A croire que je soit le seul.

Bref mon problème est que j'aimerai bien que mes balises html, body,div global prenne toute ma page.
Et j'aimerai mettre mon pied de page en à sa place donc en pied de page...

Tout est en ligne. Mon site est http://www.gagner-argent-gratuitement.com
Il faut aller dans l'onglet général : j'y ai mis un max de contenu pour mieux se rendre compte.

Si quelqu'un a des idées a proposer... Merci d'avance aux personnes qui se pencheront sur mon problème.

jejemo
Modifié par jejemo (25 Jan 2010 - 00:47)
Moi je vois pas trop pourquoi tu as autant de tag en absolute.
Même si j'ai compris que tu fais attention au SEO, y'a des agencements mal conçu dans ta page.
Il y a, effectivement, trop de position absolue. Ce que j'en sais, le parent de ton texte ( div#contenu ) ne prendra jamais la hauteur de ton élément absolu ( div#conteneur ). Ça fonctionnerait si tu mettais une hauteur fixe à ton div#contenu mais puisque ça doit varier, ça ne marchera pas.

J'ai fait un petit exemple rapide de comment je l'aurais probablement fait; plus simple et plus facile à gérer.


<body>
    <div id="content">
    	<div id="colonne_left">
        	<p>menu left item</p>
        	<p>menu left item</p>
            <p>menu left item</p>
        </div>
            <div id="colonne_middle">
			sadasdasd
        </div>

        
        <div id="colonne_right">menu right</div>
    </div>
    <div id="header">
    	<ul id="menu">
        	<li>General</li>
            <li>Renumeration</li>
            <li>Jeux d'argent</li>
            <li>etc ..</li>
        </ul>
    </div>
    <div id="footer">
    	footer
    </div>
</body>





body { padding-top: 300px; }

#header { position:absolute; top:0px; left:0px; }

#content,
#colonne_left,
#colonne_middle,
#colonne_right {
	float:left;
	border:1px solid red;
}

#colonne_middle { width:500px; }
#colonne_left { width:200px; }
#colonne_right { width:200px; }

#footer { clear:both; background:url(http://www.gagner-argent-gratuitement.com/images/bas-milieu.png) repeat-x 0 0; height:534px; }


Je t'ai positionné le header après le contenu mais c'est pas forcément mauvais de le laisser en haut de page sans la position absolue.

Si tu veux mieux comprendre le problème, voici le même que ton site mais en plus simple


<body>
<div>
	<p>asdad</p>
</div>
<p>footer</p>
</body>




div { position:relative; border:solid 1px red; }
div p { position:absolute; left:0px; top:0px; border:solid 1px blue; }

p { border:solid 1px green; }


Pour régler le problème de mettre le carré bleu dans le rouge pour que le footer soit bien positionné, suffit seulement de mettre une hauteur ( height ) au div. Cependant, ça reste une hauteur fixe et qui ne s'ajuste pas à ton texte.

Tu peux aussi lire cet article http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

Espérant que ça suffira à régler ton problème.
Modifié par Sorano (22 Jan 2010 - 14:10)
Bonsoir et merci à vous pour vos réponses. Sorano je suis désolé je n'ai pas tout compris.
Je me suis penché toute la soirée sur la reforme du php et css.
J'ai changé pas mal de truc et je pense que le site a une structure plus clair.
D'ailleur j'ai pu retirer pas mal de ligne de code.

En faite j'ai commencé à coder en local en représentant les div par des blocs de couleur et j'ai réussi a avoir ce que je cherche a avoir. Il m'a donc suffit de reprendre ça et de l'intégrer dans mon css du site.

J'ai modifié beaucoup de chose. Au finalje n'ai pas réussi a résoudre le probleme. Mais ça avance ! car ma div de contenu fonctionne. Enfin en partie...
Avec firebug j'ai remarqué que tous mes div fonctionne sauf les divs "corp" et "conteneur".

C'est ces divs qui grandisse avec le contenu. et qui font donc baisser le footer...
Sauf que la elle n'apparaisse pas avec firebug.

Bref je ne comprends pas... J'ai dû faire une erreur dans le code mais où ?
Bonjour,

Diagnostic simple: à peu près TOUT est positionné en absolu, y compris le contenu. Du coup ton div#wrapper ne peut pas s'adapter à la hauteur de son contenu.

Solution: revoir une bonne partie du positionnement de tes principaux conteneurs.
On utilisera plutôt des flottants, en faisant attention à gérer le dépassement des flottants.
Il faut que je garde les 3 divs "englobeuses" en absolute pour que je puisse mettre mon code dans un meilleur ordre pour le ref.
donc mes 3 div pricipales qui sont le header le corp et le footer seront en absolute et le contenu e mon corp en float ?
Si le corps est en absolue, ou son contenu, ça va juste pas être possible.
Quant à l'ordre des éléments pour optimiser le référencement, c'est pas loin d'être un mythe.
Bon ben j'ai reussi. Effectivement j'ai fu retirer tous les positions absolute du contenu. Apres ça a été.

Merci pour ta derniere reponse florent V !
Et merci aux autres également. Je mets résolu
Sujet clos
Aller à