Jump to content

background #page


 Share

Recommended Posts

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 by dfx (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More