Hauteur qui s'adapte à la taille de l'écran
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Hauteur qui s'adapte à la taille de l'écran
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
mais ça n'a pas fonctionné... J'ignore s'il faut l'associer avec un autre élément...
et le CSS :
Merci d'avance à ceux qui m'aideront ♥
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;
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
Re: Hauteur qui s'adapte à la taille de l'écran
toujours d'actualité bien sûre..
Re: Hauteur qui s'adapte à la taille de l'écran
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 :
Ou bien quelque chose comme ceci :
Cordialement.
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;
}
Ou bien quelque chose comme ceci :
- Code:
.colgauche {
position: fixed;
width: 50px;
top: 0;
height: 100%;
left: 0;
background: red;
}
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Hauteur qui s'adapte à la taille de l'écran
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:
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 !
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;
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 !
Re: Hauteur qui s'adapte à la taille de l'écran
Apparemment, il faut ajouter :
Cordialement.
- Code:
body { position: relative; }
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Hauteur qui s'adapte à la taille de l'écran
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 ^^"
Re: Hauteur qui s'adapte à la taille de l'écran
Un lien pour voir le problème quelque part ?
Cordialement.
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Hauteur qui s'adapte à la taille de l'écran
Bien sûre : http://version5.lebonforum.com/ (là c'est avec le code dans la class "colonne"
Re: Hauteur qui s'adapte à la taille de l'écran
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 ) :
- 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
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;
}
- 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
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Hauteur qui s'adapte à la taille de l'écran
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!
Merci à toi en tout cas de m'aider!
Re: Hauteur qui s'adapte à la taille de l'écran
toujours d'actualité^^
Re: Hauteur qui s'adapte à la taille de l'écran
toujours d'actualité... Je suppose que ça simplifierais les choses si je supprimer l'effet rétractable qui ne sert pas à grand chose
Re: Hauteur qui s'adapte à la taille de l'écran
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!
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
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Hauteur qui s'adapte à la taille de l'écran
Oui je viens d'éditer pour signaler que j'avais réussis finalement!
Merci pour votre aide!
Merci pour votre aide!
Sujets similaires
» Changer la taille de la police des citations, des spoilers et des codes, sans changer la taille de la police des liens
» Hauteur et taille des liens sur la page d'accueil
» Hauteur (et taille de police) de la barre comprenant "Forums", "Sujets", "Messages" et "derniers messages"
» Comment changer la taille de police du titre principal, sa taille et sa couleur
» Changer la taille du cadre du forum (ne pas changer la taille de la structure)
» Hauteur et taille des liens sur la page d'accueil
» Hauteur (et taille de police) de la barre comprenant "Forums", "Sujets", "Messages" et "derniers messages"
» Comment changer la taille de police du titre principal, sa taille et sa couleur
» Changer la taille du cadre du forum (ne pas changer la taille de la structure)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum