Hallo.
Ich möchte bei meinem Prestashop Template eine rechte Spalte einfügen.
Soweit geht das auch, nur leider springt der Container wenn ich den Browser verkleinere ganz anch unten.
Ich habe 2 Bilder meines Problems beigefügt.
Hier ist der Code der header.tpl
<!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>
<meta http-equiv="content-language" content="de"/>
<meta name="alexaVerifyID" content="OB3Xd71u9sjwM_cb9CKtcGynrd4"/>
{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}
<!-- Header -->
<div id="header">
<div class="page">
<a id="header_logo" href="{$base_dir}" 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'}"/></a>
<div id="header_right">
<div id="header_right4"><a href="/content/93-wirueberuns">
<img src="/img/bilder/hf/1.png" style="padding-bottom:15px; "title="{l s='Wir über uns'}" alt="Wir über uns"/></a>
</div>
<div id="header_right4"><a href="/content/4-wer-ist-karl-muller">
<img src="/img/bilder/hf/2.png" style="margin-left: 0%;" title="{l s='Wer ist Karl?'}" alt="Wer ist Karl?" /></a>
</div>
<div id="header_right4"><div> <a href="/content/96-das-sagen-unsere-kunden">
<img src="/img/bilder/hf/3.png" title="{l s='Das sagen unser Kunden'}" alt="Das sagen unsere Kunden"/></a>
</div>
<div><a href="/content/97-philosophie">
<img src="/img/bilder/hf/4.png" title="{l s='Unsere Philosophie'}" alt="Unsere Philosophie"/></a>
</div></div>
<div id="header_right4">
<div><img src="/img/bilder/hf/5.png" style="padding-top: 24px;" title="{l s='Täglich frisch gemischt'}" alt="Frisch"/>
</div><div>
<a href="/content/1-versand-lieferbedingungen">
<img src="/img/bilder/hf/6.png" title="{l s='Infos zum Versand'}" alt="Versand"/>
</div></div>
<div id="header_right4" style="width:60px" ><a target="_blank" href="https://www.facebook.com/KarlMuellerCo">
<img src="/img/bilder/hf/7.png" style="" title="{l s='Besuche Sie uns auf Facebook'}" alt="Facebook"/></a>
<a href="/content/92-neugierig">
<img src="/img/bilder/hf/8.png" style=""title="{l s='Neugierig?'}" alt="Neugierig"/></a>
</div>
{$HOOK_TOP}
</div></div></div></div>
<div class="page">
<div id="columns">
<!-- Left -->
<div id="left_column" class="column">
{$HOOK_LEFT_COLUMN}
</div>
<!-- Center -->
<div id="center_column">
{/if}
Hier teile der Golbal.css
#left_column, #center_column, #right_column { float: left }
#left_column {
clear: left;
width: 191px;
margin-right: 21px;
overflow: hidden
}
#center_column {
width: 680px;
margin: 0 0 5px 0;
overflow: hidden
}
.page {
width: 980px;
margin: auto;
text-align: left
}
Leider kenne ich mich zu wenig damit aus um zu erkennen woran das liegt.
Ich würde mich sehr freuen wenn ich dieses Problem abhacken kann.
Vielen Dank schon einmal und ein schönes Wochenende.