CSS:largeur fixe/relative ...est-ce possible? Fermé

Question

Salut,

J'ai un probleme avec un site php utilisant du css

J'ai deux parties dans mon site, un menu a gauche et le reste de la page a droite. J'utilise des div et du css pour gerer ca.
je souhaiterais que le menu de gauche ait une taille fixes de 250px, et que la partie de droite occupe le reste de l'espace. 

on CSS est:

#right {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:250;
	overflow:auto;
	z-index:2;
} 
#menu {
	position:absolute;
	width:250;
	height:100%;
	top:0;
	left:0;
	overflow:auto;
	z-index:2;
} 

Evidement la partie de droite (right) prend pour taille 100% = la largeur du browser....et non (largeur browser - 250 ) comme je le souhaiterais....
Du coup, ce que j'affiche a droite deborde hors cadre...

Pour vous rendre compte: le site est http://gitepers.free.fr/ (en construction)

Y a-t-il moyen de faire en sorte que le cadre de droite prenne 100% de l'espace restant une fois enleve les 250 utilises par le menu?

Merci d'avance!

Jean

PS: Desole pour les accents, j'ai un cliavier Qwerty....

s.spark · Accepted Answer

Salut,

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

jporcher · Answer

Salut,

merci pour le lien, ca m'a permis de progresser.

J'ai remplace le style de la partie de droite par:
margin-left: 250;
width: auto;

ca marche mieux our le contenu html, mais pour mon fond, ca n'a pas resolu le probleme (c'est meme pire qu'avant). Pour mon fond de droite j'ai le style:

#backgroundright{
	position:absolute;
	top:0;
	z-index:1;
	margin-left: 250;
	width: auto;
	height: 100%;
	overflow: auto;
}

Malheureusement, width:auto fait que l'image prend la taille du l'mage originale et ne l'agrandit pas: http://gitepers.free.fr/ Si je mets 100%, 250 pixels de la parttie droite de l'image sont perdus...

Jean

s.spark · Answer

Excuse moi mais la lecture du code source est difficile car l'indentation n'est pas bien faites, et tu as mélangé les technique CSS et balise center, utilisation de tableau pour la mise en page. Et tu comprends en ce moment je ne suis pas très motivé pour passer du temps à déchiffré avant de pouvoir commencé à débugué ^^

Sinon sous Firefox l'affichage à l'air normale contrairement à internet Explorer 6.

jporcher · Answer

Merci pour ta reponse, je comprend tout a fait....

j'ai isole le probleme sur une page de test:

http://gitepers.free.fr/test/index.html

Le css est dans le header.

Comme tu peux le voir, y a deux probleme:

1- L'image de droite (Sur laquelle j'ai ecrit un texte est affichee en taille reels des pixels, donc elle ne prend pas tout l'espace suivant le rapport hauteur/largeur du browser.
2- Second probleme, la scrollbar qui s'affiche au milieu de mon div de droite...

Les deux problemes semblent venir de mon width:auto. Si je le remplace par width:100%, l'image et le texte debordent hors cadre a cause des 250 pixels utilises par le menu de gauche...j'aimerais que ca prenne 100% de l'espace restant...et non 100% de l'espace total...

Merci d'avance si tu peux m'aider. Je suis novice, je fais sans doute un truc pas comme il faut....mais quoi?

PS: Note que je me prend la tete dans le but d'avoir une image de fond statique, qui ne bouge pas lorsu'on fait defiler le texte....

s.spark · Answer

Les images de fond doivent être en background (CSS) il ne faut pas utiliser la balise IMG.

jporcher · Answer

Salut, tu veux dire, ajouter: background-image:url(images/droite1.jpg); background-attachment:fixed; background-repeat:no-repeat; Dans le style "#right" et virer le

qui affaiche l'image? Mais comment faire pour que l'image occupe 100% de la leurgeur et 100% de la hauteur? Il n'y a pas de background-size.... Aussi, ca ne resoud pas le probleme de ma scrollbar qui apparait en plein milieu de la page... Merci pour ton aide Jean

s.spark · Answer

Il n'y a rien de plus moche qu'une image étiré ou pire déformé. Tu n'as qu'a mettre un eimage plus grande ou la laisser se répéter, ce qui moche aussi pour un photo.

Je t'ai passé des models, plutôt que a tout pris adapter le tiens, utilise ses exemples, puis après tu modifies le style..

jporcher · Answer

Merci pour les conseils. Utiliser tes models c'est exactement ce que j'ai fait. Mais vu qu'ils n'affichent pas d'images ca ne m'aide qu'a moitie (avec un fond uni, on a evidement aucon probleme pour lui faire occuper 100% de l'espace).

je vais passer la width a 100%, ca me cache une partie de l'image mais au moins y a pas de zone blanche.

Merci quand meme.

CSS:largeur fixe/relative ...est-ce possible?

8 réponses

Discussions similaires