Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1101 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] problème CSS : faire un 100% et soustraire des PX

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Resolu] problème CSS : faire un 100% et soustraire des PX

n°2146184
hyptnos
GT : Gui iom
Posté le 18-06-2012 à 10:20:59  profilanswer
 

Bonjour.
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 :( j'espère que j'ai été clair pas facile a expliquer.
 
Merci par avance pour vos précieuse futur aide car la je suis vraiment bloqué :( 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
 
http://img3.imageshack.us/img3/1626/problemejr.jpg
 
 
Le CSS

Citation :

* {
 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

Citation :


 
        <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 cité 1 fois
Message édité par hyptnos le 18-06-2012 à 10:53:49
mood
Publicité
Posté le 18-06-2012 à 10:20:59  profilanswer
 

n°2146192
David Bori​ng
Posté le 18-06-2012 à 10:41:01  profilanswer
 

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

n°2146194
hyptnos
GT : Gui iom
Posté le 18-06-2012 à 10:48:21  profilanswer
 

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

n°2146197
hyptnos
GT : Gui iom
Posté le 18-06-2012 à 10:53:29  profilanswer
 

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é


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Resolu] problème CSS : faire un 100% et soustraire des PX

 

Sujets relatifs
Problème d'accents formulaireProblème d'espacement avec IE7
[Résolu] Problème privilège oracleCSS pas toujours prise en compte par IE ?
problème attributsprobleme 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.jsProblème d'accès dll VBA/Excel
Plus de sujets relatifs à : [Resolu] problème CSS : faire un 100% et soustraire des PX


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR