[Resolu] problème CSS : faire un 100% et soustraire des PX
problème CSS : faire un 100% et soustraire des PX [Resolu] - HTML/CSS - Programmation
Marsh Posté le 18-06-2012 à 10:41:01
| hyptnos a écrit : C'est pourquoi il faudrait trouver un moyen en CSS de faire 100%-50px pour le "height" du div du contenu. |
La propriété calc me semble faite pour cela
https://developer.mozilla.org/fr/CSS/calc
Marsh Posté le 18-06-2012 à 10:48:21
Je ne connaissais pas 
je regarde cela voir si cela me convient et je test je reviendrais pour dire ce qu'il en est
merci
Marsh Posté le 18-06-2012 à 10:53:29
Et bien je te remerci grandement David Boring
C'est tout à fait cela et fonctionnel (du moins sur Firefox) mais étant donné que c'est de l'intranet applicatif pas de soucis je fais mes propres restriction.
Et bien c'est une bonne journée car j'ai appris quelque chose de vraiment utile
encore un grand merci et surtout pour ta réactivité
Sujets relatifs:
- Problème d'accents formulaire
- Problème d'espacement avec IE7
- [Résolu] Problème privilège oracle
- CSS pas toujours prise en compte par IE ?
- problème attributs
- probleme reponse a l'excecution d'une commande par code
- Problème select Max
- [BATCH] xcopy problème avec /D sur réseau
- Problème d'asynchronicité avec Node.js et Async.js
- Problème d'accès dll VBA/Excel
Marsh Posté le 18-06-2012 à 10:20:59
Bonjour.
j'espère que j'ai été clair pas facile a expliquer.
a force de vouloir faire toujours plus complexe bah la difficulté est là 
si cela se trouve c'est tout con, un truc que j'ai pas pensé je sais pas 
Je joins une partie du code CSS / HTML ainsi qu'une copie d'écran du résultat
J'ai besoin de l'aide des pro en CSS, car la je coince depuis quelque jour, j'essais tout un tas de truc mais rien n'y fait.
Alors mon projet est de type applicatif intranet et je suis sur la conception d'une interface maison simulant en tout point le fonctionnement de windows Seven (afin de ne pas perturber nos pauvres petit utilisateurs)
Donc en gros cela donne :
Bureau à icône, taille fixe, rien ne dépasse de l'écran et impossible d'y allez au delà. Cela est dynamique en fonction de la taille de l'écran.
Icône en position absolute et drag'n Drop activé.
Double clic sur une icône, va me permettre d'ouvrir une fenêtre type
Les fenêtre sont créer toutes sur le même modèle via une Classe maison en PHP5, j'instancie la classe j'y passe les paramètre en 'setter' et il me renvoie le contenu HTML de fabrication de la fenêtre. Chaque fenêtre est déplaçable sur toute la surface du bureau. ainsi que redimensionnable. 3 options supplémentaire pour simuler le système Windows, la miniaturisation de la fenêtre en barre de tache en dessous, l'agrandissement, et la fermeture. Tout cela est fonctionnelle, fluide et sans bug.
Seulement dans le projet de mon application, je vais avoir besoin sur certaine fenêtre d'y ajouter un module de recherche (qui filtrera les donner en ajax et me rafraichissera le contenu (celui qui est dans le blanc en scrolling. C'est pourquoi il va falloir obligatoirement qu'elle reste en haut. Le soucis, le bloc conteneur de la fenêtre à lui une taille en PX, normal mais Javascript lui change en fonction des options de redimensionnement. C'est pourquoi il faut que le reste des DIV a l'intérieur soit en 100%. Ce qui est le cas du bloc blanc ou il y à le contenu.
Cependant si je rajoute un bloc au dessus ne serai de 50px, et bien cela va décaler le bloc et le faire dépasser de la fenêtre (50Px + 100% forcement ça dépasse). C'est pourquoi il faudrait trouver un moyen en CSS de faire 100%-50px pour le "height" du div du contenu.
Donc voila vous l'aurez compris comment gérer cela
Merci par avance pour vos précieuse futur aide car la je suis vraiment bloqué
Le CSS
* {
margin : 0px;
padding : 0px;
}
html {
height:100%;
width:100%;
margin : 0px;
padding : 0px;
}
body {
background:#eadfcd url(../design/bckMarianne.jpg) no-repeat 0% 50%;
/*background:#eadfcd url(../design/montagne.jpg) no-repeat 0% 50%;*/
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
height:100%;
width:100%;
overflow:hidden;
}
/* bloc conteneur de la fenetre */
.css3-windows-7 .fenster {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
-webkit-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
background-color:rgba(160,160,160,0.4);
border:1px solid #000;
height:146px;
left:555px;
padding-bottom:46px;
position:absolute;
top:125px;
width:389px;
z-index:1;
min-width:200px;
border : 1px solid black;
}
/* bloc d'option de la fenetre */
.css3-windows-7 .fenster .optionFen {
position : relative;
float: right;
width: 108px;
}
.css3-windows-7 .fenster .optionFen .optReduc{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 30px;
background:transparent url(../design/optReduc.png) no-repeat 0px -1px;
}
.css3-windows-7 .fenster .optionFen .optReduc:hover{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 30px;
background:transparent url(../design/optReducH.png) no-repeat 0px -1px;
}
.css3-windows-7 .fenster .optionFen .optAgr{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 28px;
background:transparent url(../design/optAgr.png) no-repeat 0px -1px;
}
.css3-windows-7 .fenster .optionFen .optAgr:hover{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 28px;
background:transparent url(../design/optAgrH.png) no-repeat 0px -1px;
}
.css3-windows-7 .fenster .optionFen .optClose{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 46px;
background:transparent url(../design/optClose.png) no-repeat -1px -1px;
}
.css3-windows-7 .fenster .optionFen .optClose:hover{
position : relative;
z-index: 10;
float:left;
white-space:nowrap;
height: 22px;
width: 46px;
background:transparent url(../design/optCloseH.png) no-repeat -1px -1px;
}
/* titre de la fenetre */
.css3-windows-7 .fenster .title {
background:transparent url(../design/folder.png) no-repeat 2px 2px;
color:#000;
cursor:move;
font:normal 12px/16px "Segoe UI",Arial,sans-serif;
height:16px;
overflow:hidden;
padding:6px 0 8px 58px;
text-overflow:ellipsis;
text-shadow:0 0 1px #fff, 3px 3px 5px #fff, -3px -3px 5px #fff, -3px 3px 5px #fff, 3px -3px 5px #fff;
white-space:nowrap;
}
/* bloc du contenua l'intérieur du conteneur */
.css3-windows-7 .fenster .inhalt {
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
-moz-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
box-shadow:0 0 0px 1px rgba(255,255,255,0.65);
background-color:#fff;
border:1px solid #666;
color:#000;
font:normal 12px/18px arial,sans-serif;
height:100%;
margin:0 6px;
position:relative;
}
.css3-windows-7 .inhalt p {
margin-bottom:10px;
}
.css3-windows-7 .inhalt img {
background-color:#f1f1f1;
border:1px solid #ddd;
float:left;
margin:0 20px 10px 0;
padding:1px;
}
/* Div du contenu qui sera en scrolling */
.css3-windows-7 .fenster .contentFen {
color:#black;
font:normal 12px/18px arial,sans-serif;
overflow:auto;
height:100%;
position:relative;
display:block;
}
Le code HTML d'une fenetre
/!\ ne pas prendre garde au code PHP a l'intérieur j'ai virer le debut et la fin de chaque ligne PHP mais l'intérieur est encore présent car c'est générer automatiquement par ma classe faite maison. Donc j'ai juste virer le nom de la variable et la fermeture par le point virgule de facon a faire plus lisible mais la structure HTML est la en gros
<div class="fenster" id="'.$this->idFen.'" style="top:'.$this->posXFen.';left:'.$this->posYFen.';height:'.$this->heightFen.';width:'.$this->widthFen.';display:'.$this->displayFen.';">
<input type="hidden" value="" id="'.$this->idFen.'_width"></input>
<input type="hidden" value="" id="'.$this->idFen.'_height"></input>
<input type="hidden" value="" id="'.$this->idFen.'_top"></input>
<input type="hidden" value="" id="'.$this->idFen.'_left"></input>
<div class="optionFen">
<div onclick="reduce(\''.$this->idFen.'\')" class="optReduc"></div>
<div onclick="agr(\''.$this->idFen.'\')" class="optAgr"></div>
<div onclick="closeFen(\''.$this->idFen.'\')" class="optClose"></div>
</div>
<h4 class="title" id="'. $this->idTitle.'">'. $this->titleFen.'</h4>
/*
*Ajout Corp de la fenetre
*/
<div class="inhalt">'
<div class="contentFen" id="'. $this->idCorpFen.'"></div>
//Fin DIV inhalt
</div>
//Fin DIV Fenster
</div>
Message édité par hyptnos le 18-06-2012 à 10:53:49