Texte qui sort du "div"

Version imprimable

Bonjour,

Voici une ebauche de mon template :
http://www.zonegeeks.com/info.php

Je voudrais savoir pourquoi le texte "sort" de la balise div et se colle dans le footer puis sort de la page...

Je voudrais que le texte reste toujours dans le div "contenu" et que le div "footer", le div "partenaire" et le div "menu" descendent en meme temps en fonction de la longueur du texte.

Je sais pas si je suis très clair :?

Code CSS :
Code:

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 32 33 34 body { margin:0cm; padding:0cm; } div#header { width:950px; height:200px; background-image:url(Header.jpg) } div#menu { float:left; width:225px; height:500px; background-image:url(Partenaires.jpg); } div#contenu { float:left; width:500px; height:500px; background-repeat:repeat; background-image:url(Contenu.jpg); } div#partenaire { float:left; width:225px; height:500px; background-image:url(Partenaires.jpg); } div#footer { clear:both; width:950px; height:68px; background-image:url(footer.jpg); }
Merci de votre aide ;)

06/07/2007, 14h05
Candygirl

Tu fixes une hauteur à tes éléments. Le navigateur se tient donc à la hauteur que tu lui donnes. Tu ne dois pas attribuer de height si tu veux que le conteneur s'agrandisse avec son contenu (comportement par défaut).
06/07/2007, 14h21
Aspic

Citation:

Envoyé par Candygirl

Tu fixes une hauteur à tes éléments. Le navigateur se tient donc à la hauteur que tu lui donnes. Tu ne dois pas attribuer de height si tu veux que le conteneur s'agrandisse avec son contenu (comportement par défaut).

Oui je suis d'accord mais si j'enlève le height alors mes trois blocs sont ricicis et le site est illisible... C'est pas possible de définir par exemple 500px quand il y a rien ? (car il n'y aura pas forcement autant de texte dans les 3 blocks donc ils ne seront pas au meme niveau)

EDIT : En fait il faudrait que lorsque le block contenu descend, les autres suivent...

EDIT 2 : Voir ici
06/07/2007, 14h57
Candygirl

Oui, c'est un des gros problème des montages css qui n'a actuellement pas de solutions vraiment effiace tous navigateurs.

En général, le plus simple dans le cas d'un site de largeur fixe comme le tiens, on fait une tranche du fond rouge/bleu que tu va répéter en y dans le conteneur principal. De cette manière que cela soit le menu ou le contenu le plus long de toute manière le fond suit sur toute la largeur.
06/07/2007, 15h03
Aspic

Citation:

Envoyé par Candygirl

En général, le plus simple dans le cas d'un site de largeur fixe comme le tiens, on fait une tranche du fond rouge/bleu que tu va répéter en y dans le conteneur principal. De cette manière que cela soit le menu ou le contenu le plus long de toute manière le fond suit sur toute la largeur.

Pourrais tu etre un peu plus explicite :oops: ? Je débute vraiment dans le CSS vu que mon autre site avec des tables commence à me gonfler !

Penses tu que je dois créer un conteneur qui va contenir mes 3 blocs (menu, contenu et partenaires) et bidouiller le conteneur ? Si oui comment ? Merci ;)
06/07/2007, 15h07
BnA
Je pense que CandyGirl veut parler d'un
Code:

1 2 background:url(taTrancheRougeEtBleue) repeat-y;
Propriété que tu mettra sur ton conteneur principal.

Mais je me trompe peut-être. ;)
06/07/2007, 15h33
Candygirl

1 pièce(s) jointe(s)

Citation:

Envoyé par BnA

...
Propriété que tu mettra sur ton conteneur principal.

Oui, c'est tout à fait ça ;)

Pour plus de précision tu coupe une tranche du genre:
Pièce jointe 16229

enfin vu ta texture elle serait nettement plus haute.

J'ai pas compris l'histoire de la tranche rouge et bleu. A quoi ca sert ? et où dois je le mettre ?

EDIT : Rouge et bleu c'est juste pour des tests dans les vrais couleurs il va y avoir des dégradés...

EDIT 2 : Je pense en fait que j'ai compris : On crée un seulm bloc et on repeat la tranche pour faire le skin voulu. Probleme, si on ne sépare pas les 3 blocs (menu, contenu et partenaire) par des div alors je ne vais pas pouvoir éditer individuellement les bloc. On peux aussi enboiter les 3 bloc dans un bloc globale mais je n'arrive pas à mettre une image ou couleur en BackGround :

Voici mon code :
Code:

1 2 3 4 5 <div style="width:950px; background-color:#FFFF00;"> <div id="menu"><p>Ceci est le menu</p></div> <div id="contenu"><p>Ceci est le contenu</p></div> <div id="partenaire">Ceci est le partenaire</div> </div>

06/07/2007, 21h59
Dan_A

div et cellules de tableau ont des caractéristiques différentes et ça ne peut pas marcher avec une couleur de fond mais avec une image.
Des explications/Les principes se trouvent là :
http://www.alistapart.com/articles/fauxcolumns/
06/07/2007, 23h05
Aspic

Ok merci j'ai compris le concept du bidoulage. Ca peut vraiment etre très pratique ;)

Je vais ouvrir un autre topic plus vagur qui va recencer mes problemes car sinon je vais polluer ce forum :aie:

Merci en hop une mention résolu ;)