Hauteur qui s'adapte à la taille de l'écran

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Dim 26 Aoû 2012 - 15:32

Bonjour,
Je suis en train d’installer une colonne (rétractable) à gauche de mon forum, visible sur toutes les pages.
Je voudrais que la hauteur s’adapte pour occupé tout l’écran (en hauteur seulement, la largeur elle, resterait fixe.)

Si je ne suis pas très clair, je pourrais essayer de trouver des exemples!

J'ai essayé de mettre un
Code:
height:100%; display:block;
dans ma class "colonne"
mais ça n'a pas fonctionné... J'ignore s'il faut l'associer avec un autre élément...

Code:
<div id="contain">
    <div class="borderCol"><div class="imagedragon"><div class="colonne">
    Contenu de ma colonneeeee
     
 </div></div>  </div>
   <div onclick="togglePanel(this);" class="divider"> </div>   
   
   <div class="centerCol">   
<table style="position: fixed; top: 0px; right: -2px; text-align:center;  z-index:1000; width: 100%;"><tr><td><center>
   
   
<div class="fond_couleur_progresive"><font color:#fff;>{GENERATED_NAV_BAR}</font></div>
 
 
   
   
   
    </center>  </td></tr></table>
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="20" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                                          <!-- END switch_logo_left --></tr><tr>
                  
                                         
                                          <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
                                  </tr><tr><td><div class="citation1style"><div class="citation1"></div></div></td></tr>
            </table>

            

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
    </div>
 
  </div>
</body>
</html>
<!-- END html_validation -->
 


et le CSS :
Code:


.colonne {
 
  background-color: rgba(73, 37, 25, 0.7);
  color:#fff;
 padding-left:10px;
  padding-top:20px;
  padding-bottom:20px;
  width:240px;
 text-shadow:0px 0px 2px #FBDEBA;
  font-family:andalus;
}


/*une image de fond qui prend toute la taille de l'écran et qui doit toujours rester fixe*/
.imagedragon {
  background-image:url("http://img15.hostingpics.net/pics/333921kazumasauchioucchiey002.png");
  background-attachment:fixed;
 background-repeat:no-repeat;
 
 
}


div.borderCol, div.divider {
float:left;
border:none;
}

.borderCol {
width:240px;
margin-left:-8px;
 }

.centerCol { /*correspond à toute la partie "forum"*/
position:relative;
width:790px;
left:0px;
}

div.centerCol {float:left;}

/*barre où il faut cliquer pour fermer*/
.divider {
width:8px;
background-color:#2B160F!important;
cursor:pointer;
margin-bottom:-10px;
}


Merci d'avance à ceux qui m'aideront ♥


Dernière édition par Ayael le Sam 8 Sep 2012 - 14:28, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Lun 27 Aoû 2012 - 13:17

toujours d'actualité bien sûre..

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ea le Lun 27 Aoû 2012 - 13:37

Bonjour,


Style comme la chatbox déroulante, mais sur toute la hauteur de l'écran ?

Si c'est cela j'imagine que si l'élément à une classe colgauche on peut mettre soit quelque chose du style :

Code:
.colgauche {
  position: fixed;
  width: 50px;
  top: 0;
  bottom: 0;
  left: 0;
  background: red;
}
( donc dire que c'est à 0 du bas et 0 du haut )

Ou bien quelque chose comme ceci :

Code:
.colgauche {
  position: fixed;
  width: 50px;
  top: 0;
  height: 100%;
  left: 0;
  background: red;
}
( donc dire que c'est à 0 du haut et que ça a une hauteur de 100% )

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Lun 27 Aoû 2012 - 14:47

Bonjour, merci de vous intéresser à mon problème : La colonne elle doit défiler, de plus j'ai essayé d'autre propriété à position et rien n'a marché..; (Absolute, relative...)
Je voudrais donc que quand on scroll tout en bas du forum, la colonne continue (mais on verrait un espace vide, puisque le contenu resterait en haut du forum, comme pour une bannière de fond par exemple)
Je ne sais pas si je suis très clair?

J'ai fais un exemple tout bête : http://version5.lebonforum.com/h2-page-vierge

Comme vous le voyez avec ce code:
Code:
float:left;
height: 100%; height: 100%;
bottom:0px;
left:0px;
position:absolute;
top:0px;
width:240px;
background-color:#000;
La colonne prend bien toute la hauteur de l'écran, mais quand on scroll on voit qu'elle ne va pas tout en bas de l'écran

Moi je voudrais qu'elle aille tout en ba,s qu'on puisse scroller autant qu'on veut, la colonne s'adapte qu'elle soit collé en haut et bas !

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ea le Lun 27 Aoû 2012 - 15:28

Apparemment, il faut ajouter :

Code:
body { position: relative; }
Ensuite vous devriez pouvoir utiliser le top et bottom à 0 ou le top à 0 et le width à 100%.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Lun 27 Aoû 2012 - 17:00

Il se trouve que ça marche sur le schéma simplifié, mais pas sur la version normal >.< J'ai pourtant essayé de créé une nouvelle classe, de le mettre dans bordercol div.bordercol et colonne ^^"

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ea le Mer 29 Aoû 2012 - 21:19

Un lien pour voir le problème quelque part ?


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Mer 29 Aoû 2012 - 21:27

Bien sûre : http://version5.lebonforum.com/ (là c'est avec le code dans la class "colonne"

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ea le Mer 29 Aoû 2012 - 22:11

Si vous mettez un bloc en position absolute, il sort du flux des éléments normaux ( donc il ne prend plus la place qu'il prenait sur la page ) et vous le mettez à la position que vous souhaitez.

Et c'est à votre code css de faire de l'espace en dessous si nécessaire.

Donc là vous devriez probablement mettre une marge négative à gauche de l'élément parent, donc dans votre cas ( en regardant un peu vous semblez plutôt être en float mais ça marche quand même ) :

Code:
#contain {
  padding-left: 240px;
}
Voilà quelques tutoriels sur le positionnement css qui pourraient aider :

- http://openweb.eu.org/articles/initiation_flux/
- http://openweb.eu.org/articles/initiation_float/
- http://openweb.eu.org/articles/initiation_absolue

- http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
- http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
- http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Mer 29 Aoû 2012 - 22:13

Oui, je m'en doutais pour le pading, mais c'est surtout qu'il n'y a pas de fond le problème... (Enfin si, il y en a un morceau tout en haut qui s'arrête avant le texte)
Merci à toi en tout cas de m'aider!

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Mar 4 Sep 2012 - 10:11

toujours d'actualité^^

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Ven 7 Sep 2012 - 20:41

toujours d'actualité... Je suppose que ça simplifierais les choses si je supprimer l'effet rétractable qui ne sert pas à grand chose

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Sam 8 Sep 2012 - 14:12

Je me suis débrouillé pour la hauteur, mais du coup le dragon n'apparait plus!

Edit: j'ai réussi, problème résolu donc!


Dernière édition par Ayael le Sam 8 Sep 2012 - 14:27, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ea le Sam 8 Sep 2012 - 14:23

Bonjour,


Là : http://version5.lebonforum.com/# je vois bien en fond un dragon à gauche.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur qui s'adapte à la taille de l'écran

Message par Ayael le Sam 8 Sep 2012 - 14:28

Oui je viens d'éditer pour signaler que j'avais réussis finalement!
Merci pour votre aide!

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum