Theme Perso, décalage
height : auto !important; marche pas ?
Créations de Thèmes
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Je travail actuellement sur mon thème et je rencontre un petit soucis.
Comme une image vaut parfois mieux que des mots :

Je suis obliger d'ajouter un "min-height" dans le "div#main" pour ne que mon image se prolonge correctement.
Le truc c'est que je préfèrerais que le "height:auto !important;" fasse son travail.
Il y a un décalage uniquement lorsque le menu gauche est plus grand que le contenu.
Voici mon fichier design.css :
Code CSS :
/* -------------------------------------- design.css Contient les conteneur, fortement dépendant du design. --------------------------------------*/ /* Corps du site --------------------------------------*/ * { margin:0; padding:0; font-size:100%; } body { /*background:#efefef url(images/body.png) no-repeat top center ;/*Modif ElenWii : Ancienne valeur : background:#E9ECEF url(images/global.png) repeat-x;*/*/ font-size:12px; font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif; color:#0E2A48; margin:0; padding:0; } /* Conteneurs --------------------------------------*/ /* ##### Conteneur global du site ###### */ div#background_global{ background:#efefef url(images/body.png) no-repeat top center ;/*Modif ElenWii : Ancienne valeur : background:#E9ECEF url(images/global.png) repeat-x;*/ margin:auto; } div#global { /* Extensible margin:auto 5px; margin-bottom:15px; */ width:900px; margin:auto; } div#global_image { background: url(images/global.png) no-repeat top center ; margin:auto; } /* ##### Entéte de la page ###### */ div#header_container { /*Modif ElenWii : Ancienne valeur : div#header_container,div#header_admin_container {*/ background: url(images/header.png) no-repeat; /*background-position:20px 0px;*/ margin-bottom:8px; } /* ##### Entéte de la page ###### */ div#header { /*Modif ElenWii : Ancienne valeur : div#header,div#header_admin {*/ height:200px; /*Modif ElenWii : Ancienne valeur : height:90px;*/ } /* ##### Conteneur en dessous de l'entéte ###### */ div#sub_header{ /*Modif ElenWii : Ancienne valeur : div#sub_header,div#sub_header_admin {*/ height:27px; /*Modif ElenWii : Ancienne valeur : height:27px;*/ /*Supp ElenWii : Ancienne valeur : padding:0;*/ /*Supp ElenWii : Ancienne valeur : padding-top:10px;*/ /*Supp ElenWii : Ancienne valeur : padding-left:5px;*/ } div#sub_header p a { color:#FFF; } /* Lien du subheader */ div#header .dynamic_menu h5.links { background:none; border:none; color:#edfff0; width:134px; background:url(images/button.png) no-repeat; padding:5px 0px; font-size:11px; margin-right:1px; } div#header .dynamic_menu h5.links:hover { color:#edfff0; cursor:default; background:url(images/button_click.png) no-repeat; } div#header .dynamic_menu h5 a { color:#FFFFFF; text-decoration:none; } /* ##### Compteur de visites ###### */ div#compteur { color:#E9ECD9; position:absolute; top:50px; right:0; font-size:11px; margin-right:15px; text-align:right; } /* ##### Menu de gauche ###### */ div#left_menu { float:left; width:200px; margin:0; margin-top:10px; margin-right:2px !important; height:auto !important; margin-right:-1px; padding:0; } /* ##### Menu droit ###### */ div#right_menu { float:right; width:190px; margin:0; margin-top:10px; margin-left:10px !important; margin-left:7px; } div#background_container{ background:url("images/background.png") repeat-y ; /*margin-top:62px;*/ } /* ##### Contenu de la page ###### */ div#main { width:auto; min-width:450px; min-height:450px; overflow:hidden !important; height:auto !important; overflow:visible; height:1%; padding:0; margin:0; float:none; } /* ##### Contenu central ###### */ div#main_content { width:auto; margin-top:10px; padding:20px 10px; padding-top:5px; /*border-spacing:1px; border:1px #cccccc solid; background:#F7F8F5 url(images/contentbg.png) repeat-x; -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;*/ } /* ##### Barre de lien rapide ###### */ div#links { /*width:96%;*/ text-indent:10px; margin-bottom:20px; } /* ##### Emplacement au dessus de contenu de la page ###### */ div#top_contents { margin-top:8px; margin-bottom:8px; } /* ##### Emplacement en dessous de contenu de la page ###### */ div#bottom_contents { margin-top:8px; margin-bottom:8px; } /* ##### Bloc au dessus du pied de page ###### */ div#top_footer { clear:both; /*Ajout ElenWii */ height:140 px; margin:auto; width:900px; height:200px; /*Fin Ajout ElenWii */ background: #EFEFEF url(images/background_top_footer.png) repeat-y center ; } div#top_footer-image{ /*background: #EFEFEF url(images/background.png) repeat-y center ; margin:auto;*/ } div#background_footer{ /*background:#efefef url(images/body.png) no-repeat top center ;/*Modif ElenWii : Ancienne valeur : background:#E9ECEF url(images/global.png) repeat-x;*/ margin:auto; } /* ##### Pied de page ###### */ div#footer { height:30px; clear:both; margin:auto; /*margin-top:0px; padding:0px; padding-top:36px;*/ padding-right:20px;!important; text-align:right; background:#F5F4ED url(images/footer.png) repeat-x; } div#footer span { color:#000000; font-size:10px; } div#footer span a { color:#000000; font-size:10px; } /* ##### Liens rapides ###### */ div#links_vertical { display:block !important; display:none; position:fixed; background:url(images/vertical_menu_repeat.png) repeat-y; top:45%; margin-left:989px; width:27px; text-align:center; padding-left:2px; } div#links_vertical_top { width:29px; background:url(images/vertical_menu_top.png) no-repeat; text-align:center; margin-left:-2px; padding-top:8px; } div#links_vertical_central { width:27px; text-align:center; margin-left:-2px; padding:4px 0px; } div#links_vertical_bottom { width:29px; background:url(images/vertical_menu_bottom.png) no-repeat; text-align:center; height:32px; margin-left:-2px; } .bglinks { background:url(images/bgmenu_links.jpg) no-repeat bottom right; margin:0px; padding:0px; list-style-type:none; padding-bottom:7px; margin-bottom:5px; } /*Ajout ElenWii : */ /*Partie SlideShow*/ #slide-images{ position:relative; display:block; margin:0px; width:850px; height:120px;/*194px;*/ overflow:hidden; } #slide-images li{ position:absolute; display:block; list-style-type:none; margin:0px; padding:0px; } #slide-images li img{ display:block; } div#slide-show { width:850px; height:120px; margin:auto; padding-top:40px; } /*Fin Partie SlideShow*/ /*Fin Ajout ElenWii : */ /* #####################*/ /* Vertical Accordions */ /* #####################*/ div#test-accordion{ margin-left:2px; /*<== A débloquer si vous passez par l'administration/Contenu/Menu/Ajout menu de contenu */ width:180px; /* A modifier celon la largeur de vos menus dans les colonnes droite ou gauche */ margin-bottom:10px; } div.accordion { position: relative; width:150px; /* A modifier celon la largeur de vos menus dans les colonnes droite ou gauche */ } div.accordion-toggle{ background: url(images/accordeon_off.png) center center; /*border-bottom:1px solid #bfced7;*/ color:#403A3E; cursor:pointer; padding-top:9px; position:relative; z-index:10; text-align : center; font-size:12px; vertical-align : top; } div.accordion-toggle:hover{ background:url(images/accordeon_over.png) center center; font-size:13px; font-weight:bold; } div.accordion-toggle-active{ background:url(images/accordeon_on.png) center center; /*border-bottom:1px solid #bfced7;*/ font-size:13px; font-weight:bold; padding-left:2px; } div.accordion-content{ /*border-bottom:1px solid #CCCCCC;*/ color:#000000; overflow:hidden; padding:5px 3px 15px 15px; }
Et voici mon header.tpl / footer.tpl
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" > <head> <title>{SITE_NAME} : {TITLE}</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="{SITE_DESCRIPTION} {TITLE}" /> <meta name="keywords" content="{SITE_KEYWORD}" /> <meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" /> <!-- Default CSS --> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/framework/content/syndication/syndication.css" type="text/css" media="screen, print, handheld" /> <!-- Theme CSS --> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" /> <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" /> <!-- Alternative CSS --> {ALTERNATIVE_CSS} <link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" /> <link rel="alternate" href="{PATH_TO_ROOT}/syndication.php?m=news" type="application/rss+xml" title="RSS {SITE_NAME}" /> <script type="text/javascript"> <!-- var PATH_TO_ROOT = "{PATH_TO_ROOT}"; var TOKEN = "{TOKEN}"; --> </script> # IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script> <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script> <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script> <!-- Ajout ElenWii : SlideShow Grenouille --> <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script> <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/accordion.js"></script> <!-- Fin Ajout ElenWii : SlideShow Grenouille --> </head> <body> # IF C_MAINTAIN_DELAY # # IF C_ALERT_MAINTAIN # <div style="position:absolute;top:5px;width:99%;"> <div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning"> {L_MAINTAIN_DELAY} <script type="text/javascript"> document.write('<div id="release">{L_LOADING}...</div>'); </script> <noscript> <strong>{DELAY}</strong> </noscript> </div> </div> # ENDIF # <script type="text/javascript"> <!-- var release_timeout_seconds = 0; function release(year, month, day, hour, minute, second) { if (document.getElementById('release')) { var sp_day = 86400; var sp_hour = 3600; var sp_minute = 60; now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++); end = new Date(year, month, day, hour, minute, second); release_time = (end.getTime() - now.getTime())/1000; if( release_time <= 0 ) { document.location.reload(); release_time = '0'; } else timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000); release_days = Math.floor(release_time/sp_day); release_time -= (release_days * sp_day); release_hours = Math.floor(release_time/sp_hour); release_time -= (release_hours * sp_hour); release_minutes = Math.floor(release_time/sp_minute); release_time -= (release_minutes * sp_minute); release_seconds = Math.floor(release_time); release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds; document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}'; } } if ({UNSPECIFIED}) release({MAINTAIN_RELEASE_FORMAT}); else { if (document.getElementById('release')) document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>'; } --> </script> # ENDIF # <div id="background_global"> <div id="global_image"> <div id="global"> <div id="header_container"> <div id="header"> <h1 style="display:none;font-size:9px;">{SITE_NAME}</h1> # IF C_MENUS_HEADER_CONTENT # {MENUS_HEADER_CONTENT} # ENDIF # </div> <div id="sub_header"> # IF C_MENUS_SUB_HEADER_CONTENT # {MENUS_SUB_HEADER_CONTENT} # ENDIF # </div> <div class="spacer"></div> </div> # IF C_COMPTEUR # <div id="compteur"> <span class="text_strong">{L_VISIT}:</span> {COMPTEUR_TOTAL} <span class="text_strong">{L_TODAY}:</span> {COMPTEUR_DAY} </div> # ENDIF # <div id="background_container"> # IF C_MENUS_LEFT_CONTENT # <div id="left_menu"> {MENUS_LEFT_CONTENT} </div> # ENDIF # # IF C_MENUS_RIGHT_CONTENT # <div id="right_menu"> {MENUS_RIGHT_CONTENT} </div> # ENDIF # <div id="main"> # IF C_MENUS_TOPCENTRAL_CONTENT # <div id="top_contents"> {MENUS_TOPCENTRAL_CONTENT} </div> # ENDIF # <div id="main_content"> <div id="links"> <a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a> # START link_bread_crumb # <img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a> # END link_bread_crumb # </div>
Code HTML :
</div> # IF C_MENUS_BOTTOM_CENTRAL_CONTENT # <div id="bottom_contents"> {MENUS_BOTTOMCENTRAL_CONTENT} </div> # ENDIF # </div> </div> </div> </div> </div> <div id="background_footer"> <div id="top_footer"> <!-- Ajout ElenWii : SlideShow Grenouille --> <div id="slide-show"> <ul id="slide-images"> <li><img src="{PATH_TO_ROOT}/upload/SlideShow_Subheader/1.png" alt="1" title="1" /></li> <li><img src="{PATH_TO_ROOT}/upload/SlideShow_Subheader/2.png" alt="2" title="2" /></li> </ul> </div> <!-- Fin Ajout ElenWii : SlideShow Grenouille --> # IF C_MENUS_TOP_FOOTER_CONTENT # {MENUS_TOP_FOOTER_CONTENT} <div class="spacer"></div> # ENDIF # </div> </div> <div id="footer"> # IF C_MENUS_FOOTER_CONTENT # {MENUS_FOOTER_CONTENT} # ENDIF # <span> {L_POWERED_BY} <a style="font-size:10px" href="http://www.phpboost.com" title="PHPBoost">PHPBoost {PHPBOOST_VERSION}</a> {L_PHPBOOST_RIGHT} </span> # IF C_DISPLAY_BENCH # <span> | {L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} </span> # ENDIF # # IF C_DISPLAY_AUTHOR_THEME # <span> | {L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}" style="font-size:10px;">{L_THEME_AUTHOR}</a> </span> # ENDIF # </div> </body> </html>
je m'excuse de ne pouvoir montrer le site directement, mais il est en local pour l'instant.
Si quelqu'un sais comment régler ce petit problème ? Merki
Édité par ElenWii Le 04/05/2010 à 18h00
KONA Membre non connecté
Booster Fusée
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
Quel code as-tu ajouté ? ou modifier ? montre nous juste les lignes .
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
donc tu as :
<div id="background_global">
<div id="global_image">
<div id="background_container">
<div id="background_footer">
J'ai reussi (enfin je crois a corriger ce probleme en ajoutant :
<div style="clear:both"></div>
derrière le main :
Code HTML :
Seulement, je ne suis pas trop sur de l'impact que cela va avoir sur la totalité du site. (pour l'instant je n'ai pas remarqué de bug).
KONA Membre non connecté
Booster Fusée
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
- un header <div id="header">
- un bandeau d'entete <div id="global_image">
- un fond principal <div id="background_global">
- un bandeau menu/contenu <div id="background_container">
- un bandeau top footer <div id="top-footer">
- un fond top footer <div id="background_footer">
- un footer <div id="footer">
En fait je galérais pour que le fond couvre tout ce que je voulais et qu'il ne bouge pas lorsque l'on redimensionne la fenêtre.
KONA Membre non connecté
Booster Fusée
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
et avec ça passe ?
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
