28220 sujets

CSS et mise en forme, CSS3

2 col et meme hauteur du background

Bonjour,

Voila je tente de faire une mise en forme d'un site..... en deux colonnes avec bkg de fond pour le body, bkg pour la col de gauche et bkg pour celle de droite. Malgre mes recherches a droite a gauche.... sur le sujet. rien ne fonctionne comme je le souhaite. regardez sur http://www.freazer.com/perso/karboxifene/test.html

voila il faut dire que le body a deja un bkg qui lui est propre et qui ne correspond pas aux colonnes du site

Merci de vos infos.....
Pas très clair sur ce qui fonctionne pas, mais je pense tu devrais rajouter un padding sur ce style :

div#contenu {
	width:589px;
	padding-left: 211px;
}
Merci, en effet c'est mieux... voire beaucoup mieux......
Cependant il reste une difference entre Firefox et IE.....

sur IE le contenu commence dans contenu mais en dessous de la derniere entree de menu, alors que sous Firefox si le contenu se positionne bien...il y a un espace en haut et en bas de la zone

http://www.freazer.com/perso/karboxifene/test.html

merci de ton aide Smiley lol
Il serait peut-etre plus judicieu de retirer ton calque colgauche de ton calque coldroite et de mettre une marge (au lieu du padding de ton calque contenu) à gauche à ce dernier, tout en attribuant la valeur de cet derniere à la largeur de ton premier calque colgauche. Smiley lol

Un peu comme dans les gabarits présents sur Alsacréations...
http://css.alsacreations.com/modeles/modele3.htm
Champolion a écrit :
Il serait peut-etre plus judicieu de retirer ton calque colgauche de ton calque coldroite et de mettre une marge (au lieu du padding de ton calque contenu) à gauche à ce dernier, tout en attribuant la valeur de cet derniere à la largeur de ton premier calque colgauche. Smiley lol

Un peu comme dans les gabarits présents sur Alsacréations...
http://css.alsacreations.com/modeles/modele3.htm



Certe mais dans ce cas..... le background n'apparait pas ni sous IE ni sous Firefox

http://www.freazer.com/perso/karboxifene/test2.html

de plus je souhaite que la page soit toujours affichee jusqu'en bas, meme si le contenu est seulement de quelques lignes
div#menu{
	float:left;
	width: 211px;
        background-image: url(medias/testgauche.gif);
        background-repeat: repeat-y;
        width: 100%;
        height: 100%;
}

div#contenu{
	width:589px;
	padding-left:211px;
        background-image: url(medias/testdroite.gif);
        background-position: right;
        background-repeat: repeat-y;
        width: 100%;
        background-color: #aabb99;
}


Il faut que tu donnes les memes attributs à tes calques menu et contenu si tu decides de supprimer tes deux precedents calques colgauche et coldroite.

Cela va de soi...
Champolion a écrit :
div#menu{
	float:left;
	width: 211px;
        background-image: url(medias/testgauche.gif);
        background-repeat: repeat-y;
        width: 100%;
        height: 100%;
}

div#contenu{
	width:589px;
	padding-left:211px;
        background-image: url(medias/testdroite.gif);
        background-position: right;
        background-repeat: repeat-y;
        width: 100%;
        background-color: #aabb99;
}


Il faut que tu donnes les memes attributs à tes calques menu et contenu si tu decides de supprimer tes deux precedents calques colgauche et coldroite.

Cela va de soi...



Aie Aie aie...moyennement concluant.....

http://www.freazer.com/perso/karboxifene/test2.html

quelle galere ce truc !!!!!
Essayes de remplacer dans ta balise div#contenu p :

margin-left:15px;
margin-right: 15px;


par :

padding-left:15px;
padding-right: 15px;


Smiley lol
Rentre ton contenu (texte) DANS ton menu, donne une largeur à ta liste menu (ul {with: xxx;}), laisse ton contenu en float, et le fond de ton menu sera recouvert juste par la partie contenu, alors qu'il fera toute la hauteur.
Réduit encore tes largeurs d'une 20aine de pixels, et ce sera aussi bon pour la scrollbar horizontale...
Pour ton menu qui tend pas vers le bas... height: 100% Smiley lol

Je ne peux que te conseil de t'instruire à travers une documentation comme mediabox; la documentation offre simplement de bonnes bases.

L'amalgame du CSS, c'est que pour les personnes ayant utilisé à tors et à travers les tableaux, le voit comme un contenu vide parfois (et c'est bien souvent tout l'inverse), alors que ce n'est qu'un outils .
Modifié par Champolion (13 Sep 2005 - 15:22)
Champolion a écrit :
Pour ton menu qui tend pas vers le bas... height: 100% Smiley lol

Je ne peux que te conseil de t'instruire à travers une documentation comme mediabox; la documentation offre simplement de bonnes bases.

L'amalgame du CSS, c'est que pour les personnes ayant utilisé à tors et à travers les tableaux, le voit comme un contenu vide parfois (et bien souvent tout l'inverse), alors que ce n'est qu'un outils .



heu...ba c'est deja dans le CSS ca.... Smiley eek
Jetes un oeil à la documentation de mediabox au chapitre " Propriétés de boîte " .

Smiley biggrin

Dans ce sens, on est deja moins paumé pour faire la transition vers les standards, mais bon faut pas s'exciter non plus, ça reste encore à s'eclaircir Smiley lol

Smiley cligne
J'ai peut être un truc tout con qui peut marcher...

Il te suffit en fait d'attribuer un fond au calque qui contient les 2 colonnes, qui fusionne les 2 fonds... un baground-repeat:repeat-y; en prime, et ça devrait rouler : tes 2 fonds se repeteront sur toute la hauteur du conteneur des 2 colonnes... Le reste, c'est une question de padding, marges, flottements.
Sujet clos
Aller à