Css équivalent de : " width: 100%-210px; "
Résolu
jemsss
Messages postés
188
Date d'inscription
Statut
Membre
Dernière intervention
-
jemsss Messages postés 188 Date d'inscription Statut Membre Dernière intervention -
jemsss Messages postés 188 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Css équivalent de : " width: 100%-210px; "
- Équivalent coco - Accueil - Réseaux sociaux
- Equivalent coco - Accueil - Réseaux sociaux
- Equivalent wawacity - Accueil - Outils
- Equivalent begone android - Accueil - Protection
- 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>