Theme Perso, décalage

height : auto !important; marche pas ? Créations de Thèmes

ElenWii Membre non connecté

Le 04/05/2010 à 17h43

Bonjour tout le monde,

Je travail actuellement sur mon thème et je rencontre un petit soucis.

Comme une image vaut parfois mieux que des mots :

bug_1e3e8

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">&nbsp;
            <div id="links">
                &nbsp;&nbsp;<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>
            &nbsp;|&nbsp;        
            {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

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

ElenWii Membre non connecté

KONA Membre non connecté

ElenWii Membre non connecté

KONA Membre non connecté

ElenWii Membre non connecté

KONA Membre non connecté