1 pièce(s) jointe(s)
Ma deuxième div ne prend pas toute la hauteur qui reste
Bonjour,
J'ai un souci avec mon mon div qui contient 2 div : le premier div contient un input pour mettre le titre et des images cliquables pour lancer des fonctions javascript comme fermer , sauvegarder etc ...
le deuxieme div est un div avec la propriété content editable qui me permettra d'entrer des données(note). L'objectif du tout est de former un petit bloc note. Pour l'instant j'ai bien avancer mais je bloque sur 2 3 trucs que je n'ai pas hesiter à partager sur le forum pour trouver des solutions enfin bref voila le code du div entier :
Code:
1
2
3
4
5
6
7
8
9
| <div class="blocNote" post_it_id="1">
<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre"> </input>
<a><img class="fermer" src="fermer.png" title="fermer"></img></a>
<a><img class="importer" src="importer.png" title="importer une sauvegarde">
<a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a>
<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a> </div> <hr/>
<div contenteditable="true" class="note" >Saisissez vos notes</div>
</div> |
voila son css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| .blocNote{padding:0 10px 0 10px;max-height:600px;max-width:600px;display:none;background:#FEFEBA;position:absolute;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;margin-left:41.5%;margin-top:10%;min-width:235px;min-height:150px;}
.titre{display:inline-block;width:100%}
.titre input {text-align:center;height:30%;min-height:30px;max-height:30px;max-width:400px;width:60%;color:#989E9D;border:1px solid black;border-radius:2px;}
.fermer {float:right;line-height:11.5px;text-decoration:none;width:10px;}
.importer {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.note {position:relative;color:#989E9D;border:1px solid black;border-radius:2px;background: white;width:100%;text-align:center;word-wrap:break-word;height:70%;boder:0 5px 0 5px;line-height:800%;overflow:auto;}
.blocNote a{cursor:pointer;} |
Alors mon problème c'est que j'ai un souci au niveau de la fonction resizable() de jquery. En effet j'ai appliaquer la fonction sur mon blocNote ca fonctionne perfect mais quand je l'etends on voit vite le problème voila un petit capture d'ecran :
Pièce jointe 199812
en fait j'ai appliqué a mon premier div avec la class="titre"
Code:
.titre{height:30%;min-height:30px;max-height:30px}
pour qu'il ne s'elargit pas plus
du coup la logique c'etait de mettre un height de 70% à mon deuxème div pour que tout fonctionne impeccablement mais non quand j'etends ma bloc la deuxieme div ne prends pas toute la hauteur qui reste.(comme sur la photo)
merci de bien vouloir maider. :D:D:D:D
J'ai trouve la solution merci pour vos réponses
J'ai essaye ce que vous m'avez demander mais c a fonctionne pas du moins de comment je l'ai fait peut etre c'est moi merci en tout cas voila je partage la solution pour celui qui aurait le souci une autre fois :
J'ai seulement appliqué à ma div contenteditable avec la class="note" le code css suivant :
Code:
1
2
|
.note {height:calc( 100% - 47px); } |
Merci pour vos réponses. J'espère pouvoir aider aussi pour ce petit bricolage de code :P
