Css équivalent de : " width: 100%-210px; "
Résolu
jemsss
Messages postés
198
Statut
Membre
-
jemsss Messages postés 198 Statut Membre -
jemsss Messages postés 198 Statut Membre -
Bonsoir,
Un double-casse tête qui ne devrait probablement pas en être un, mais là, je sèche.
1. Je veux un div qui fasse toute la largeur de ma fenêtre moins 210px.
2. Je veux aligner en bas à gauche de mon body un autre div.
Est-ce possible en css ?
contenu
Je ne peux pas mettre "menu" en float:left car sinon "contenu" s'aligne complètement à gauche sous "menu".
Je ne peux pas jouer sur les padding, les margin ou une position:absolute car sinon la largeur de mon contenu déborde en dehors de la fenêtre.
Je ne peux pas non plus faire width:100%-210px, vous vous en doutez, ça ne marche pas.
bottom-left
J'ai essayé d'imbriquer "menu" et "bottom-left" dans un div avec height:100% (du body?), pour mettre "bottom-left" en bottom:0px, mais ça n'a pas marché
Merci d'avance pour vos conseils
Un double-casse tête qui ne devrait probablement pas en être un, mais là, je sèche.
1. Je veux un div qui fasse toute la largeur de ma fenêtre moins 210px.
2. Je veux aligner en bas à gauche de mon body un autre div.
Est-ce possible en css ?
______________________ width 100% _____________________
| |
| top |
| |
|_______________________________________________________|
| | |
| | |
| | |
| | |
| menu | |
| | |
| | |
| | |
|___ 210px _____| contenu |
| |
| |
| |
| |
| |
| |
_______________| |
| | |
| bottom-left | |
| | |
| | |
|___ 210px _____|_____________ 100%-210px ______________|
contenu
Je ne peux pas mettre "menu" en float:left car sinon "contenu" s'aligne complètement à gauche sous "menu".
Je ne peux pas jouer sur les padding, les margin ou une position:absolute car sinon la largeur de mon contenu déborde en dehors de la fenêtre.
Je ne peux pas non plus faire width:100%-210px, vous vous en doutez, ça ne marche pas.
bottom-left
J'ai essayé d'imbriquer "menu" et "bottom-left" dans un div avec height:100% (du body?), pour mettre "bottom-left" en bottom:0px, mais ça n'a pas marché
Merci d'avance pour vos conseils
A voir également:
- Css équivalent de : " width: 100%-210px; "
- Équivalent coco - Accueil - Réseaux sociaux
- Equivalent coco - Accueil - Réseaux sociaux
- Equivalent begone android - Accueil - Protection
- Equivalent wawacity - Accueil - Outils
- Equivalent word gratuit - Guide
3 réponses
Bonsoir,
Pour la première question, concernant la largeur de 100%-210px;
tu as trois solution :
1) donner une largeur fixe, en pixels à ta balise body, et calculer la différence.
2) Créer un fichier HTC qui contiendra du code javascript pour faire le calcul.
3) Le faire directement en javascript
Pour la seconde question,
Soit tu mets un margin-top à ton cadre botom-left en pourcentage. Soit tu reprends les solutions 2) et 3) de la questions d'avant.
Pour le HTC, je pense que tu saura ou chercher.
Pour la première question, concernant la largeur de 100%-210px;
tu as trois solution :
1) donner une largeur fixe, en pixels à ta balise body, et calculer la différence.
2) Créer un fichier HTC qui contiendra du code javascript pour faire le calcul.
3) Le faire directement en javascript
Pour la seconde question,
Soit tu mets un margin-top à ton cadre botom-left en pourcentage. Soit tu reprends les solutions 2) et 3) de la questions d'avant.
Pour le HTC, je pense que tu saura ou chercher.
Merci pour tes conseils,
Question1: j'ai bien pensé à avoir recours à javascript, mais j'osais espérer qu'il y ait une solution avec du pur css (vive les bons vieux tableaux, ça me tente!).
Question2: je viens de faire des tests avec les pourcentages en margin-top mais j'ai de la peine à comprendre ce que ça me rapporte.
...
Question1: j'ai bien pensé à avoir recours à javascript, mais j'osais espérer qu'il y ait une solution avec du pur css (vive les bons vieux tableaux, ça me tente!).
Question2: je viens de faire des tests avec les pourcentages en margin-top mais j'ai de la peine à comprendre ce que ça me rapporte.
...
J'ai enfin trouvé la solution avec uniquement du CSS !
Contenu
Il faut mettre "contenu" dans une autre div avec height:100%.
Puis mettre au div "contenu" margin-left:210px et margin-right:0px.
bottom-left
Je crée un div "page" qui contient tous les div du body.
Je place "bottom-left" en position absolue en bas de "page".
Je place "menu" en position absolue dans "page".
Je mets une hauteur mini à "contenu" pour que "bottom-left" ne se superpose pas avec "menu" (avec un petit hack pour IE6 qui ne reconnaît pas min-height)
Cette page m'a beaucoup aidé : http://www.couzinhub.com/mar-09/colonnes-de-m-me-hauteur-avec-css
Code CSS
Code HTML
Contenu
Il faut mettre "contenu" dans une autre div avec height:100%.
Puis mettre au div "contenu" margin-left:210px et margin-right:0px.
bottom-left
Je crée un div "page" qui contient tous les div du body.
Je place "bottom-left" en position absolue en bas de "page".
Je place "menu" en position absolue dans "page".
Je mets une hauteur mini à "contenu" pour que "bottom-left" ne se superpose pas avec "menu" (avec un petit hack pour IE6 qui ne reconnaît pas min-height)
Cette page m'a beaucoup aidé : http://www.couzinhub.com/mar-09/colonnes-de-m-me-hauteur-avec-css
Code CSS
div#top {
position: absolute;
top: 0px;
width: 100%;
height: 120px;
min-width: 770px;
}
div#page{
position:relative;
}
div#contenu_large {
width: 100%;
}
div#contenu {
margin-left: 210px;
margin-right: 0px;
padding-top: 125px;
min-width: 560px;
min-height: 530px;
}
/* hack pour ie6 */
* html div#component {
width: 540px;
height: 530px;
}
div#menu {
position: absolute;
top: 125px;
width: 210px;
}
div#bottomLeft {
position: absolute;
bottom: 0px;
width:210px;
}
Code HTML
<div id="page">
<div id="contenu_large">
<div id="contenu"></div>
</div>
<div id="menu"></div>
<div id="top"></div>
<div id="bottomLeft"></div>
</div>