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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU]Affichage DIV sur place dispo avec ascensseur

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU]Affichage DIV sur place dispo avec ascensseur

n°1874953
NaMoUr
Posté le 19-04-2009 à 19:36:20  profilanswer
 

Bonjour,
 
Je rencontre un soucis dans la mise en page de mon site :
 
Je dispose de 3 blocs DIV les uns en dessous des autres
Le premier (entete) contient une image de hauteur fixe (100px)
Le second (corps) 3 autres blocs DIV les uns à gauches des autres
 - left
 - centre
 - droite
Le dernier (footer) une autre image de hauteur fixe (15px)
 
Je voudrais savoir si il est possible que mon bloc de corps puisse prendre toute la hauteur qu'il lui reste et que si le contenu d'un des 3 blocs intérieures dépasse cette hauteur un ascenseur vertical s'affiche sur ce bloc interrieur.
 
J'en suis arrivé à bien disposer mes blocs mais seulement avec une hauteur définie pour mon corps et centre (le seul bloc qui risque de déborder)
 
Mon code HTML :

<div class="entete">
    <img src ....>
</div>
 
<div class="corps">
    <div class="left">
        Blablabla gauche
    </div>
 
    <div class="centre">
        gros Blablabla
        ....
    </div>
 
    <div class="right">
        Blablabla droite
    </div>
</div>
 
<div class="footer">
    <img src ....>
</div>


 
Le CSS

.page{
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 900px;
}
 
.entete{
height: 100px;
width: 900px;
text-align : justify;
}
 
.corps{
width: 900px;
height: 445px;
text-align : justify;
}
 
.left{
height: 100%;
width: 100px;
float: left;
text-align : justify;
}
 
.centre{
height: 435px;
width: 690px;
float: left;
overflow:auto;
valign: top;
text-align : justify;
margin: 5px 5px 5px 5px;
}
 
.right{
height: 100%;
width: 100px;
float: left;
valign: top;
text-align : justify;
}
 
.footer{
height: 15px;
width: 900px;
text-align : justify;
}


 
J'ai essayé de mettre la hauteur à 100% pour le corps, BODY et HTML sans succès...
 
Need help please.


Message édité par NaMoUr le 20-04-2009 à 20:02:42
mood
Publicité
Posté le 19-04-2009 à 19:36:20  profilanswer
 

n°1875262
abais
Posté le 20-04-2009 à 13:55:14  profilanswer
 

J'ai pas vraiment compris ce que tu cherchais...

 

1) Pour que ta div "corps" prenne bien en compte l'encombrement de ses div qu'elle contient, il faut que tu mettes une 4ème div (après right) :
<div style="clear:both"></div>...
(par defaut, une div affiche son contenu qui est en float mais "ignore" leur encombrement (vu qu'ils sont en float...))
Il faut donc mettre un factice qui sera prit en compte par ce parent, mais qui ignore le float de ces frères, d'où l'utilisation de cette 4eme div...

 

2) Libre à toi de définir la taille de ton "corps" maintenant qu'elle connait l'encombrement de son contenu... Si tu ne met rien, elle s'adaptera, si tu lui impose, tu peux faire un overflow:scroll pour être sure de pouvoir tout atteindre avec un scroll (ou ascenseur comme tu dis)...


Message édité par abais le 20-04-2009 à 13:59:31

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875298
NaMoUr
Posté le 20-04-2009 à 14:16:22  profilanswer
 

Pour être un peu plus clair :
En fait je ne veux pas que ma div "corps" prennent en compte l'encombrement de ses fils mais que ma div "corps" (et ces fils) prenne la place (la hauteur) qui lui reste entre ma div "entete" (qui est tout en haut) et "footer" (qui est tout en bas de la page visible sans scroll) (et que les fils aient un scroll si la hauteur ne suffit pas).
 
dans tout les cas je vais tenté la 4ème div invisible.

n°1875327
abais
Posté le 20-04-2009 à 14:40:25  profilanswer
 

Dans tous les cas, tu dois faire mon 1)...  
Sinon, tes float pourront dépasser sur ton footer...
 
Vu qu'en div, on ne peut pas mélanger % et px pour découper l'espace, j'ai bien peur que tu doives passer par JS (mettre en page par rapport à la taille de la fenêtre coté client)... (enfin, juste pour declarer la taille de "corps", qu'il faudra nommé par ID et non par class, pour plus de simplicité d'accès par JS)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875331
abais
Posté le 20-04-2009 à 14:45:17  profilanswer
 

Sinon, tu envisage la possibilité de perdre de l'espace, en mettant la taille du corps en pourcentage, à 70% par exemple, à toi de jouer pour trouvé une valeur, qui additioné à la taille en pixel de la bannière + footer ne soit pas supérieur à la taille de la fenêtre...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875340
NaMoUr
Posté le 20-04-2009 à 14:52:43  profilanswer
 

Ok, merci.
 
Pour le premier post :
Même avec JS, je sais déterminer la résolution de l'écran mais comment savoir la taille que prend le navigateur dans le haut (Barre d'adresse, menu, onglet... ) ?
Pour faire taille corps = hauteur de la résolution - hauteur du navigateur - hauteur d'entete - hauteur footer.
 
 
Pour le second :
Pour moi et dans mon cas autant mettre une hauteur en dur, 70% ne va pas représenter la même chose suivant la résolution...

Message cité 1 fois
Message édité par NaMoUr le 20-04-2009 à 14:55:54
n°1875374
abais
Posté le 20-04-2009 à 15:29:54  profilanswer
 

NaMoUr a écrit :

Même avec JS, je sais déterminer la résolution de l'écran mais comment savoir la taille que prend le navigateur dans le haut (Barre d'adresse, menu, onglet... ) ?
Pour faire taille corps = hauteur de la résolution - hauteur du navigateur - hauteur d'entete - hauteur footer.


Non, bien entendu, il ne faut pas se baser sur la resolution, mais bien de la taille de la fenetre "active".
Comment ? l'astuce est de placer un élément qui fait une hauteur de 100% en CSS (une div masqué par exemple) et de recupérer via JS, sa hauteur en px...
=> Un link magique !
 
Sinon, j'ai une soluce pur HTML/CSS en tête (quand on me lance des défis, on me trouve), j'essayerais quand j'aurais le temps ;)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875391
NaMoUr
Posté le 20-04-2009 à 15:51:44  profilanswer
 

Comme ça je vois mieux. J'implémenterai le JS ce soir mais si ta soluce HTML/CSS fonctionne je suis preneur.
 
Encore merci.

n°1875519
abais
Posté le 20-04-2009 à 19:12:49  profilanswer
 

Bon bah, ça marche pas, le centre est bien comme il faut, mais le scroll est aussi grand que la fenêtre (même si il agit bien sur le corp seulement...)

 

Sinon, avec JS, j'arrive à ça :
http://urfman.free.fr/fhw/testFullHeight.html


Message édité par abais le 20-04-2009 à 19:13:16

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875529
NaMoUr
Posté le 20-04-2009 à 19:37:44  profilanswer
 

Impec, merci beaucoup.

mood
Publicité
Posté le 20-04-2009 à 19:37:44  profilanswer
 

n°1875586
NaMoUr
Posté le 20-04-2009 à 21:13:41  profilanswer
 

J'ai mis ton script en place et je voulais dans le JS prendre la taille de l'entete et du footer au lieu de soustraire en dur :

 

<script type="text/javascript">
  function construc(){
   var hauteur_total = document.getElementById("test_hauteur" );
   var hauteur_header = document.getElementById("header" );
   var hauteur_footer = document.getElementById("footer" );
   var hauteur_centre = document.getElementById("centre" );
   var gauche = document.getElementById("left" );
   var droite = document.getElementById("right" );
   
   /*alert(hauteur_header.height);
   alert(hauteur_footer.height);*/
   
   //var hauteur_corps = hauteur_total.height - hauteur_header.height - hauteur_footer.height;
   var hauteur_corps = hauteur_total.height - 100 - 15;
   
   hauteur_centre.style.height= hauteur_corps+'px';
   gauche.style.height=hauteur_corps+'px';
   droite.style.height=hauteur_corps+'px';
  }
 </script>

 

Si je decommente les alert, la popup affiche "undefined".

 

Pourquoi ça ne marche pas alors que pour le div invisible de toute la hauteur ça marche ?

 

J'ai triché en allant chercher la taille des images en entete et footer, mais j'aurais voulue savoir...

 

Sinon pour voir ce que ça rend : http://r17734.ovh.net/CrazyDuck/index.php?page=news


Message édité par NaMoUr le 20-04-2009 à 21:26:19
n°1875604
abais
Posté le 20-04-2009 à 21:43:02  profilanswer
 

J'ai moi même été dans l'impossibilité de recupérer la taille d'une Div par exemple, seul le "height" d'une image m'est retourné... le css est traçable seulement quand il est déclaré lui même par JS...

 

Pour l'aperçu, il faut un footeur plus grand en hauteur, car le contenu fait déborder, et donc donne un scroll... (je suppose que c'est pour ça que soustraire "en dure" te gêne...)
T'as un scroll horizontale sur ton div de login qui me perturbe amèrement ! j'en ai des frissons dans le dos...
Bon c'est froid tout ça quand même !


Message édité par abais le 20-04-2009 à 21:44:45

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875701
NaMoUr
Posté le 21-04-2009 à 09:17:01  profilanswer
 

J'avais zapper que tu prenais aussi la taille de l'image pour le div invisible.
 
J'ai seulement testé avec Firefox sous Linux hier et ça s'afficher bien. Ce matin au bureau je lance IE et c'est le drame, sur FF ça passe encore à part le scroll du login et le footer trop petit.
 
Pour le scroll de la partie droite, j'ai dû mal me démerder avec les marges droite, gauche et la taille du centre.
 

n°1875744
abais
Posté le 21-04-2009 à 10:30:28  profilanswer
 

NaMoUr a écrit :

J'avais zapper que tu prenais aussi la taille de l'image pour le div invisible.
 
J'ai seulement testé avec Firefox sous Linux hier et ça s'afficher bien. Ce matin au bureau je lance IE et c'est le drame, sur FF ça passe encore à part le scroll du login et le footer trop petit.
 
Pour le scroll de la partie droite, j'ai dû mal me démerder avec les marges droite, gauche et la taille du centre.
 


Moi j'ai ça sous FF 3.0.8 sur PC aussi, logique d'ailleur, ton footer a 15px de haut, mais son contenu l'agrandi...
Sinon, je ne prend aucune taille de div, je ne prend que celle de l'image (dont je n'ai jamais eu la source entre nous)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875987
NaMoUr
Posté le 21-04-2009 à 19:36:32  profilanswer
 

Sniff sur IE ça marchait toujours pas... L'entete et le footer sont aligné sur la droite du cadre central le plus à droite, alors que sur FF windows et Linux, no soucis...
 
Il fallait rajouter dans la CSS pour l'entête et le footer :

left:50%;
margin-left:-450px;


 
Comme pour le div de l'image invisible.


Message édité par NaMoUr le 21-04-2009 à 19:50:17
n°1875993
NaMoUr
Posté le 21-04-2009 à 19:54:34  profilanswer
 

Par contre pourquoi l'évènement ONRESIZE est considéré comme invalide par le validateur de la W3C ???

n°1876059
abais
Posté le 21-04-2009 à 23:16:47  profilanswer
 

Je sais plus, je l'avais lu, mais je trouve ça dommage... et je comprend pas trop


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876367
bartsword
Posté le 22-04-2009 à 17:17:23  profilanswer
 

je repasse tout à l'heure sur ton post, j'ai ta solution à la maison. J'ai eu exactement le même problème quand j'ai développer mon site, j'ai galérer mais j'ai trouvé (sans javascript ni bordel incompatible w3c) alors je me suis fais un canevas que j'utilise maintenant à chaque fois que je me fais un site.
 
Bon à toute je te post ça tout à l'heure  
 
 :hello:


---------------
_____________________________
n°1876378
NaMoUr
Posté le 22-04-2009 à 17:49:24  profilanswer
 

Merci, ça m'interresse !

n°1876398
bartsword
Posté le 22-04-2009 à 18:15:04  profilanswer
 

re
 
voilà, j'espère que c'est ce que tu cherche à faire (bon dans mon canevas il y a que deux colonnes pas 3 mais le principe est le même si j'ai suivi ce que tu cherches à faire)
 
index.php

Code :
  1. echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <title>Canevas 1.0</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />';
  7. echo '</head>
  8. <body class="body">';
  9. // DIV HEADER
  10. //---------
  11. echo '<div class="header">';
  12. echo '</div>';
  13. //DIV CONTENU
  14. //---------
  15. echo '<div class="contenu">';
  16.  // DIV MENU: partie de droite du div contenu
  17.  //--------------------------------
  18.  echo '<div class="menu">';
  19.  echo '</div>';
  20.  // DIV PAGES: partie de gauche du div contenu
  21.  //-----------------------------------
  22.  echo '<div class="pages">';
  23.  echo '</div>';
  24.    // DIV FOOTER: partie du bas
  25.   // -------------------
  26.  echo '<div class="footer">';
  27.  echo '</div>';
  28. echo '</div>';
  29. echo '</body>
  30. </html>';
  31. ?>


 
design.css

Code :
  1. .body {
  2. background-color: #FFFFFF;
  3. margin-top : 0px;
  4. margin-bottom : 0px;
  5. margin-left : 0px;
  6. margin-right : 0px;
  7. }
  8. .header {
  9. background-color: #CCCCCC;
  10. margin-left: auto;
  11. margin-right: auto;
  12. width:975px;
  13. height:155px;
  14. border: solid 2px black;
  15. }
  16. .contenu {
  17. background-color: #00FF00;
  18. margin-left: auto;
  19. margin-right: auto;
  20. width:975px;
  21. border: solid 2px black;
  22. }
  23. .menu {
  24. float : right;
  25. width : 280px;
  26. border: solid 1px black;
  27. height: 300px;
  28. }
  29. .pages {
  30. float : left;
  31. width : 686px;
  32. margin : 0px;
  33. left : 0px;
  34. border: solid 1px black;
  35. height: 250px;
  36. }
  37. .footer {
  38. background-color: #0000FF;
  39. clear : both;
  40. width : 975px;
  41. height : 203px;
  42. }


 
 [:masekelah]


Message édité par bartsword le 22-04-2009 à 18:15:28

---------------
_____________________________
n°1876407
NaMoUr
Posté le 22-04-2009 à 18:59:44  profilanswer
 

J'ai essayé vite fait, mais cela ne convient pas à ce que je veux faire, en gros dans ton exemple les 2 colonnes ne change pas de taille suivant la résolution de l'utilisateur ou le redimensionnement de la page...

 

En tout cas merci.


Message édité par NaMoUr le 22-04-2009 à 19:07:36
n°1876451
abais
Posté le 22-04-2009 à 20:49:05  profilanswer
 

il n'y a pas que ça, c'est que rien qu'à voir le code, ça ne repond pas au contraintes de NaMoUr...
Seule une TABLE donnerait le même résultat sans JS ...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876610
NaMoUr
Posté le 23-04-2009 à 09:06:30  profilanswer
 

abais a écrit :

il n'y a pas que ça, c'est que rien qu'à voir le code, ça ne repond pas au contraintes de NaMoUr...
Seule une TABLE donnerait le même résultat sans JS ...

Ce dont j'était partit à la base... Mais on ma dit "hoouuuu les tables pour la mise en page c'est le MAL...." depuis je galère à tout transposer avec des DIV... et il faut avouer que ça donne un code plus clair.
 

n°1876731
abais
Posté le 23-04-2009 à 12:37:39  profilanswer
 

Oui, moi même étant graphiste de base, j'ai eu du mal à me debarasser des Tables... Mais depuis, je me régale !
Je pense que tu devrais te debarasser de cette contrainte (sauf si le JS te convient) plutôt que d'essayer de la respecter à tout prix... surtout qu'elle n'as pas grand intérêt...
Je me serai contenté en guise de footer, d'une div qui survolait le contenu du corps, scotché en bas, un peu comme la footbar de facebook...
ça aurait été plus simple que de contraindre la taille du corps en fonction de ce dernier !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
mood
Publicité
Posté le   profilanswer
 


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

  [RESOLU]Affichage DIV sur place dispo avec ascensseur

 

Sujets relatifs
Précharger mes images à l'affichage de mon siteproblème boucle while
affichage XML dans mail[resolu]supprimer un cookie
[résolu] Servlet : impossible de setter la valeur d'un cookie[Résolu] Comment récupérer une variable asp en jscript
affichage XML dans mailquestion sur un tableau[résolu]
Affichage message sur console projet pour développement plugin eclipsePassage d'une fonction sans paramètre en paramètre d'une autre[résolu]
Plus de sujets relatifs à : [RESOLU]Affichage DIV sur place dispo avec ascensseur


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