CSS:largeur fixe/relative ...est-ce possible?
jporcher
-
jporcher -
jporcher -
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....
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....
A voir également:
- CSS:largeur fixe/relative ...est-ce possible?
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
8 réponses
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
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
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.
Sinon sous Firefox l'affichage à l'air normale contrairement à internet Explorer 6.
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....
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....
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 <div> 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
tu veux dire, ajouter:
background-image:url(images/droite1.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
Dans le style "#right" et virer le <div> 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
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..
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..
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.
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.
