Css équivalent de : " width: 100%-210px; "
Résolu/Fermé
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
-
Modifié par jemsss le 10/11/2010 à 22:55
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 11 nov. 2010 à 12:10
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 11 nov. 2010 à 12:10
A voir également:
- Css équivalent de : " width: 100%-210px; "
- Equivalent word gratuit - Guide
- 20 go internet équivalent en heure - Forum Réseaux sociaux
- 10 go internet équivalent en heure - Forum Consommation & Internet
- 20 go internet mobile, équivalent a illimité? ✓ - Forum Mobile
- Css premier plan ✓ - Forum CSS
3 réponses
Dj Nam
Messages postés
327
Date d'inscription
mardi 9 octobre 2007
Statut
Membre
Dernière intervention
31 janvier 2014
41
10 nov. 2010 à 22:57
10 nov. 2010 à 22:57
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.
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
10 nov. 2010 à 23:25
10 nov. 2010 à 23:25
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.
...
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
Modifié par jemsss le 11/11/2010 à 12:14
Modifié par jemsss le 11/11/2010 à 12:14
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>