CSS Containeer verrutscht bei Skalierung

Begonnen von Shapeir, 28 Apr 2012, 12:29

« vorheriges - nächstes »
Nach unten

Shapeir

28 Apr 2012, 12:29 Last Edit: 28 Apr 2012, 12:30 by Shapeir
Hallo.
Ich habe ein kleines Problem.
Es geht um Prestashop.
Ich habe nun eine dritte Spalte (rechts) hinzugefügt und alles ist soweit gut...... .
Das Problem entsteht erst wenn ich das Browserfenster verkleinere oder eine kleine Auflösung verwendet wir.
Die rechts Spalte verrutscht unter das center.

Ich habe nun gemerkt das es an der Programierung des Header.tpl liegt, da hier die "class:page" nicht eingegrenzt wurde.

siehe BILD1 & Bild2

<!-- 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">
               <a href="/cms.php?id_cms=16">
<img class="herz" src="/img/bilder/Herz.GIF" width="95" height="100"/>
                     </a>
                         <a href="/cms.php?id_cms=20">
<img class="herz" src="/img/bilder/Rezepte.PNG"/>
                     </a>
                            <a href="/69-grill-zeit">
<img class="headlink" src="/img/bilder/grill.gif" />
                     </a>
                     <a href="/cms.php?id_cms=71">
<img class="headlink" src="/img/bilder/wasist.PNG"/>
                     </a>
                         <a href="/127-spezial">
<img class="headlink" src="/img/bilder/spezial.PNG"/>
                     </a>
        {$HOOK_TOP}
</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}


Dies ist auch gut so denn dadurch geht die gezackte Linie oben und unten bis zum Brwoserfenster ende.

Ich habe versucht das <div class="page"> einzugrenzen, was auch funktioniert hat, die 3te Spalte verrutscht nicht mehr, nur jetzt geht meine schöne gezackte Linie nur noch soweit wie die page width in der global.css eigestellt ist ;(. siehe Bild 3

Ich habe auch schon versucht die #right_columnin der global.css per
   
  #right_column {
   float: left;
   position:absolute; left:70%;right:30%;
 


an diese position zu bekommen, das geht, nur beim kleiner ziehen fließt die rechte column in das center was wieder unschön ist.

Ist es irgendwie sonst noch möglich zu verhindern das die rechte Spalte bei einer verkleinerung nach unten rutsch?

Vielen DANK!

pat

Hallo,

Ist es irgendwie sonst noch möglich zu verhindern das die rechte Spalte bei einer verkleinerung nach unten rutsch?


Ich glaube mit position absoulte wird das nichts da fliegt dir die Postion ja  immer um die Ohren wenn sich die Grösse ändert.
Versuche mal position relative damit sollte es funken.

Pat

Shapeir

Danke für den Tipp.
Ich hatte schon alle unterschiedlichen Positionswerte versucht :(

Nach oben