background #page

dfx · June 25, 2012

salut à tous

Bon voilà, ce n'est pas dans mes habitudes de faire perdre du temps à la communauté avec des questions à deux balles déjà posées un bon millier de fois... Mais là, je fais appel à vous, car je patauge carrément...

J'ai de bonnes connaissances en (x)html, css et php. Je n'ai (pour l'instant) aucune connaissances en 'smarty'

Je suis en plein développement de mon site de vente en ligne (en local pour l'instant)

J'aimerais faire en sorte que mon footer soit en pleine largeur... Jusque là, pas trop de problèmes, il suffit de sortir <div id="footer">{$HOOK_FOOTER}</div> de la div #page...

Mais, lorsque j'applique un background-color:white; à #page, il ne s'applique pas... #page se retrouve avec une hauteur de 0px, coincé au dessus la fenetre, alors que son contenu s'affiche normalement...

J'ai fait plusieurs tests, avec une version 'fraiche' de prestashop sans modifications... Le résultat est toujours le même...

Voici mon code :

HEADER :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}

 <div id="page">[/color]
[color=#000000]   <!-- Header -->
  <div id="header">
<a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right">
 {$HOOK_TOP}
</div>
  </div>[/color]
[color=#000000]   <div id="columns">
[/color]

[color=#000000]  
<div id="center_column">
{/if}[/color]
[color=#000000]

FOOTER :

{if !$content_only}
</div><!--center_column-->
</div><!--columns-->
</div><!--page-->
<div id="footer">{$HOOK_FOOTER}</div>
{/if}
</body>
</html>

CSS :

#page {
width: 1000px;
border:1px solid red;
margin: 0 auto 2px auto;
text-align: left;
background-color:white;
}
#footer {
border-top: 1px solid #d0d3d8;
padding: 0.5em 0;
clear: both;
min-height:250px;
background-color:#404040;
color:#c0c0c0;
background-image:url('../img/bg_footer.jpg');
}

A l'aiiiiidde...

Merci d'avance...

David

ps : petit edit :

En rajoutant <div style="clear:both;"></div> avant de fermer la balise #page, mon background s'applique correctement à #page...

Ca fonctionne, mais ce n'est pas une solution très correcte... Est ce que quelqu'un à une petite idée ?

Edited June 25, 2012 by dfx (see edit history)

Sign In

background #page

Recommended Posts

dfx

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com