Pb de footer sur div

[finstreet]

Bonjour

Bon alors j'ai décidé pour mon nouveau site de tout développer en valide xhtml 1.0 ... on rigole pas mais sur la page d'accueil avec trois liens, suis arrivé à faire 50 fautes lol pas facile de passer des tables au css

Bref, c'est pour vous dire que je suis une grosse bille en div et autres css

Alors voila mon soucis :

Il s'agit bien évidemment des couleurs définitives

:arrow: Alors en rouge, ca s'appelle le MENU... waaa trop fort

Voici le code :

div#menu {position:relative;width:1024px;height:150px;top:0px;left:0px;background-color:#EEEEEE;padding-top:2px;text-align:center;}

:arrow: En vert foncé, c'est le CORPS

div#corps {position:relative;width:1024px;top:0px;left:0px;}

Il contient le CONTENU (vert clair), les DETAILS (le bleu) et les LIENS (orange)

div#contenu {position:absolute; width:542px;background-color:white;left:0px;padding:4px;margin:4px;border-style:dotted;border-width:thin;}
div#detail {position:absolute; width:300px;background-color:yellow;left:558px;background-color:white;padding:4px;min-height:100%;}
div#liens {position:absolute; width:150px;background-color:#EEEEEE;left:866px;padding:4px;text-align:right;}

En bas c'est le violet et c'est ca le problème

Il manque aussi le global à vous montrer :

#global {position:relative;margin-left: auto;margin-right: auto;width: 1024px;text-align: left; /* on rétablit l'alignement normal du texte */}

Il englobe tout et permet de centrer le site

Voici la structure de la page :

<div id="global">
	<div id="menu"></div>
	<div id="corps">
		<div id="contenu"></div>
		<div id="detail"></div>
		<div id="liens"></div>
	</div>			
</div>

J'ai deux problèmes.

1. Je souhaite pouvoir afficher une couleur uniforme sur toute la hauteur de la rubrique LIENS (en orange). Au mieux j'arrive à faire 100% de l'écran et encore si y'a pas trop de texte parce que là ca descend pas jusqu'en bas

2. dans le meme temps, je souhaiterais mettre un footer (le truc violet). J'arrive à définir la hauteur... mais quand le texte du CONTENU est trop long, le FOOTER coupe le CONTENU. J'ai pas pu faire mieux. La plupart de mes tests se sont terminés en footer collé en haut

Donc voici les deux problèmes. Je peux répondre à toutes vos questions (en fait pour Lady Di c'est un complot) si vous voulez des infos complémentaires

J'espère avoir été clair

Ciao ciao

 

[dayassine]

t'as regardé ici si ca pourrait t'aider?

http://css.alsacreations.com/modeles/modele10.htm

je trouve que c'est les memes positions avec la largeur differente

 

[Lomax7]

J'ai pas tout compris pour ton premier problème. Sois plus clair. :lol:

Par contre pour le footer je te conseil de bannir position absolute des pages
ou tu veux que le footer colle au corps sans le chevaucher.

La position absolute c'est parfait pour une mise en page tres stricte.
Moi je l'utilise très peu, j'utilise exclusivement la position relative.
Sinon tu peux utiliser les float, mais ça ne te permet pas une grande marge
de manoeuvre en ce qui concerne le positionnement des div.

 

[finstreet]

Merci

C'est en parti réglé... en parti seulement car la solution peut être un peu merdouilleuse

Donc j'ai choisi ce modèle ci : http://css.alsacreations.com/modeles/modele5.htm

Mais deux soucis :

- la colonne de droite n'a pas de fond de couleur spécifique... ca s'arrete dès que le texte s'arrete. La bidouille utilisée est trop bidouilleuse meme pour moi
- deuxio, cela implique que la colonne de droite et de gauche soient toujours moins hautes que la colonne du milieu... et ca par nature on ne sait pas

Mais bon j'ai déjà un bon gabarit que j'essaierais d'améliorer

Merci

 

[tonguide]

Si c'est uniforme du haut en bas les couleurs, tu te fatigues pas. Tu fais comme tu as fais pour le moment (au niveau des div).

Et au lieu de mettre le code couleur pour chaque bloc, tu mets une image qui va contenir une ligne des 3 blocs, du genre 1px de hauteur et XXXpx de largeur (taille de ton design). Cette image tu l'as mets en fond du bloc qui contient les 3 autres.

Comme ça, peu importe quel bloc est le plus bas, les 3 blocs seront alignés en bas.

Pour ton footer ... après les 3 blocs, dans le div principal (pas obligé de le sortir, sauf si vraiment tu aimes ça, ou si tu as une couleur dedans), essai de mettre <div style="clear:both;"></div> juste avant le code de ton div du footer.

Bon courage
(oublie pas de t'amuser à regarder sur IE 6 )

 

[finstreet]

Ah y'a du mieux

Alors pour le truc de l'image, ca marche parfaitement.... un tit background repeat et c bon

par contre le footer se retrouve parfois dans ls choux... je recollerais le code ce week end

rhooo déjà j'essaye sur Mozilla... IE 6 on verra lol