Création
d'entreprise
Posez votre question Signaler

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

jporcher - Dernière réponse le 28 janv. 2008 à 00:14
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....
Lire la suite 

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

8 réponses
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
+0
moins plus
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....
Ajouter un commentaire
Réponse
+0
moins plus
Les images de fond doivent être en background (CSS) il ne faut pas utiliser la balise IMG.
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
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..
Ajouter un commentaire
Réponse
+0
moins plus
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.
Ajouter un commentaire
Réponse
-1
moins plus
Salut,

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Ajouter un commentaire
Ce document intitulé « CSS:largeur fixe/relative ...est-ce possible? » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?