Container verutscht bei Browser größe ändern

Begonnen von Shapeir, 28 Feb 2015, 13:50

« vorheriges - nächstes »
Nach unten

Shapeir

28 Feb 2015, 13:50 Last Edit: 28 Feb 2015, 13:51 by Shapeir
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.

Luca

Hi,
um das Problem zu sehen, muß man Deine Seite besuchen. Schau Dir mal den div Container id right_column an. Der steht außerhalb des div Container id colums und auch außerhalb des div Container class page. Darum, weil er direkt unter dem body-tag steht und gleichberechtigt zum div Container mit der class page, wird er unter diesen geschoben.  ;)
Viele Grüße

Shapeir

Ja vielen Dank. Genau das habe ich schon versucht zu ändern, leider ohne Erfolg.
Die Herstellerfirma hat dies so gesetzt.
Hast du evtl. eine Tipp für mich wo ich die Header.tpl ändern muss um diesen Fehler zu beheben?
Vielen Dank

Shapeir

Komischerweise ist der Code ja ab

<div class="page">
        <div id="columns">

und die Footer.tpl der selbe wie in der Original Prestashop Standart .tpl.
Mir ist aufgefallen, das hier <div class="page"> verwendet wird, im Original aber <div id="page"> .
Leider knenne ich mich nicht aus, daher bin ich über jede Hilfe sehr dankbar :)

Shapeir

Hat sich erledigt.
Es hat einige Zeit gedauert, da ich viele Module zusätzlich anpassen musste.

Es war so wie du schon erwähntest.

Ich habe den div im footer schoben und somit die "right_column" integriert.

{*
* 2007-2011 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 1.4 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if !$content_only}
</div>
</div>
</div>
            <!-- Right -->
<div id="right_column" class="column">
{$HOOK_RIGHT_COLUMN}
</div>
<!-- Footer -->
   <div id="footer">
<div class="page">{$HOOK_FOOTER}
</div>
</div>
{/if}
</body>
</html>


Vielen Dank nochmal.

Migrator

Versuch auch mediaQueries in der CSS-Datei zu benutzen, damit die Seite auch wirklich responsive ist.

Browserwerk

Denke auch, dass Du mit Media Queries am weitesten kommst. Hier ein Beispiel:

@media all and (max-width: 699px) and (min-width: 520px) {
  #deineID {
    padding-left: 25px;
  }
}

Nach oben