Footer zentrieren

[Lecaffee24]

Hallo liebe Leute,

ich weiß das es hier schonmal besprochen wurde Texte im Footer zu zentrieren. Aber das Problem was ich habe ( wie im Anhang ). Ich habe den Footer vom Content gelöst und ihn mit 100% durchgängig gemacht. So weit so gut, jedoch verzweifle ich beim Versuch den Inhalt zentriert unter dem Content anzeigen zu lassen, derzeit ist die Ausrichting Linksbündig. Wie bekomme ich die div Boxen dazu in die Mitte zu gehen. Könnt Ihr mir helfen? Bitte! Hier noch der Quelltext

Code: PHP  [Auswählen]

        {$main_content}</div>
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
{/if}<img src="{$tpl_path}img/spacer.gif" width="1"/><div id="contenunten">{if $BOX_products_treadmill}{$BOX_products_treadmill}{/if}</div>
</div><div id="abstand"></div></div><div id="bottom"><div id="bottom-divs"><!-- Bottom Left --><div id="bottom-left">{$box_CONTENT}</div><!-- Bottom Mid --><div id="bottom-mid">{$box_INFORMATION}</div><!-- Bottom Right --><div id="bottom-right"><a class="thickbox" href="{php} echo xtc_href_link(FILENAME_POPUP_CONTENT, 'coID=25&KeepThis=true&TB_iframe=true&height=480&width=640'){/php}" title="EP:Loevenich Jülich"><img src="{$tpl_path}img/googlemap.gif" width="46"/></a><br><br></div></div>
<p class="footer">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

Linkback: https://www.modified-shop.org/forum/index.php?topic=22547.0

[hedon02]

Wenn Du mal bitte den Code ordentlich mit Einzuegen formatierst, dann geht das Helfen wesentlich schneller. 

Viele Gruesse

[Lecaffee24]

Sorry dieser Code stand so zur Verfügung, damit konnte ich aus dem Standart Template was ja nur einzeilig war, ein drei zeiligen machen. Wie und was ich da genau positioniren muss, weiß ich leider nicht.

Viele Grüße

[Lecaffee24]

Hallo liebe Leute,

ich weiß das es hier schonmal besprochen wurde Texte im Footer zu zentrieren. Aber das Problem was ich habe ( wie im Anhang ). Ich habe den Footer vom Content gelöst und ihn mit 100% durchgängig gemacht. So weit so gut, jedoch verzweifle ich beim Versuch den Inhalt zentriert unter dem Content anzeigen zu lassen, derzeit ist die Ausrichting Linksbündig. Wie bekomme ich die div Boxen dazu in die Mitte zu gehen. Könnt Ihr mir helfen? Bitte! Hier noch der Quelltext

Code: PHP  [Auswählen]

        {$main_content}</div>
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
{/if}<img src="{$tpl_path}img/spacer.gif" width="1"/><div id="contenunten">{if $BOX_products_treadmill}{$BOX_products_treadmill}{/if}</div>
</div><div id="abstand"></div></div><div id="bottom"><div id="bottom-divs"><!-- Bottom Left --><div id="bottom-left">{$box_CONTENT}</div><!-- Bottom Mid --><div id="bottom-mid">{$box_INFORMATION}</div><!-- Bottom Right --><div id="bottom-right"><a class="thickbox" href="{php} echo xtc_href_link(FILENAME_POPUP_CONTENT, 'coID=25&KeepThis=true&TB_iframe=true&height=480&width=640'){/php}" title="EP:Loevenich Jülich"><img src="{$tpl_path}img/googlemap.gif" width="46"/></a><br><br></div></div>
<p class="footer">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

[xeron]

Hallo Lecaffee24,

probier mal in der css diese stelle:

Code: CSS  [Auswählen]

 #bottom-right {
            width: 27%;
            padding: 10px 0 20px 60px;
            float: left;

Grüße
André

[Lecaffee24]

Hallo Andre,

danke für deine schnelle Antwort, hat leider nicht funktioniert.

Viele Grüße

Andreas

[xeron]

welche Werte hast Du geändert?

Grüße
André

[Lecaffee24]

Code: PHP  [Auswählen]

 #bottom-right {
           width: 27%; # Hier hatte ich vorher 14 stehen
           padding: 10px 0 20px 60px; # Hier hatte ich bei der 60 vorher 100 stehen
           float: left;[/

Viele Grüße

Andreas

p.s. Leider ist der Code nicht sehr Leselich, so hatte ich Ihn von hier.

Code: PHP  [Auswählen]

abstand { background:#f7f7f7 none repeat scroll 0 0;  clear:both;     height:15px;}  #bottom {  

background:url(img/hintergrundfooter.gif) repeat-x;      border-color:#aeaeae;       border-style:solid;      

border-width:1px 0px 0px;      clear: both;      float: left;       width: 100%;       height: 100%;       font-size: 0.9em;

  text-align: left;1      color: #383838;}#bottom-divs {    float: left;      clear: both;       padding: 0px;     width:

100%;}#bottom-left,#bottom-mid,#bottom-right{       width: 14%;       padding: 10px 0 20px 100px;       float: left;
}#bottom h2 {       margin: 0 0 10px 0;       padding: 0 0px;       font-size: 1.6em;       color: #575757;}#bottom h2 span

{      color: #1474b4;}#bottom ul {       margin: 0;       padding: 0;        list-style-type: none;      border-top: 1px

solid #ccc;}#bottom ul li {       line-height: 26px;        border-bottom: 1px solid #ccc;}#bottom ul li a {          

display: block;    padding: 0 10px;       color: #383838;       text-decoration: none;      outline: none;}#bottom ul li

a:hover {      background: #cccccc;       outline: none;}#bottom-sep {       clear: both;}div#bottom h2.boxheader {      

background: none;}div#bottom .boxbody {       border: none;      padding: 0px;       margin: 0px;}div#bottom .boxbody

ul.contentlist {      margin: 0px;} div#bottom .contentlist a {      border: none; }

[xeron]

ändert sich denn gar nicht wenn Du mit den Werten spielst? Ich habe das gerade bei mir probiert und das funktioniert.
Hier mal meine CSS.

Code: CSS  [Auswählen]

#bottom {
       background:url(img/footer.png) no-repeat;
       width:960px;
       height:200px;
       text-align:left;
       font-size:11px;
       padding:0px;
       margin:0 auto;
    }
    #bottom-divs {
            float: left;
            clear: both;
            margin: 0;
            padding: 0px;
            width: 100%;
    }
    #bottom-left,
    #bottom-mid,
    #bottom-right {
            width: 27%;
            padding: 10px 0 20px 60px;
            float: left;
    }
    #bottom h2 {
            margin: 0 0 10px 0;
            padding: 0 0px;
            font-size: 1.6em;
            color: #ff9412;
    }
    #bottom h2 span {
            color: #1474b4;
    }
    #bottom ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
    }
    #bottom ul li {
            line-height: 22px;
    }
    #bottom ul li a {
            display: block;
            padding: 0 0px;
            color: #646464;
            text-decoration: none;
            outline: none;
    }
    #bottom ul li a:hover, a:active {
            outline: none;
            color: #ff9412;
    }
    #bottom-sep {
            clear: both;
    }
    div#bottom h2.boxheader {
            background: none;
    }
    div#bottom .boxbody {
            border: none;
            padding: 0px;
            margin: 0px;
    }
    div#bottom .boxbody ul.contentlist {
            margin: 0px;
    }
     
    div#bottom .contentlist a {
            border: none;
    }

[Lecaffee24]

Doch es ändert sich schon einiges. Die divboxen kann ich von links nach rechts schieben und es mittig machen, doch nun kommt der Hacken. Gehe ich mit einem größeren Monitor auf den Shop bzw. verkleiner ich in der Zoomfunktion im Browser auf 75% verschiebt sich alles nach links. Es geht eigentlich nur darum das Mittige auch mittig zu lassen.

Viele Grüße

Andreas

[hedon02]

Das ist Dein html-Code:

Code: XML  [Auswählen]

    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
    {/if}
    <img src="{$tpl_path}img/spacer.gif" width="1"/>
    <div id="contenunten">{if $BOX_products_treadmill}{$BOX_products_treadmill}{/if}</div>
  </div>
  <div id="abstand"></div>
</div>
<div id="bottom">
  <div id="bottom-divs">
    <!-- Bottom Left -->
    <div id="bottom-left">{$box_CONTENT}</div>
    <!-- Bottom Mid -->
    <div id="bottom-mid">{$box_INFORMATION}</div>
    <!-- Bottom Right -->
    <div id="bottom-right">
      <a class="thickbox" href="{php} echo xtc_href_link(FILENAME_POPUP_CONTENT, 'coID=25&KeepThis=true&TB_iframe=true&height=480&width=640'){/php}" title="EP:Loevenich Jülich">
        <img src="{$tpl_path}img/googlemap.gif" width="46"/>
      </a>
      <br>
      <br>
    </div>
  </div>
  <p class="footer">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

darauf basierend  koennte Dein Footer folgendermassen aussehen:

Code: CSS  [Auswählen]

#bottom {  
        width: 100%;
        min-width:980px;
        clear: both;
        background:url(img/hintergrundfooter.gif) repeat-x;
        border-top:1px solid #aeaeae;
        font-size: 0.9em;
        text-align: left;
        color: #383838;
}
#bottom-divs {    
        width:980px;
        margin:0 auto;
        overflow:hidden;
        clear:both;
}
#bottom-left, #bottom-mid, #bottom-right {
        float: left;
        width: 33%;      
        padding: 10px 0 20px 0; /* wo eine fixe Weite, da kein padding-left oder padding-right */  
}

  ohne Shoplink.

Gruesse

P.S.: bei flexiblem 100% Footer gibst Du dem #bottom-left{text-align:left;}, #bottom-mid{text-align:center;}, #bottom-right{text-align:right;} und entfernst die "width:980px" aus der "#bottom_divs"

[Lecaffee24]

Danke für die schnelle Antwort, jedoch ohne Erfolg Irgendwie ist da der Wurm drin. Leider darf der Shop nicht Online sein, electroluxe.de, aber für 10 - 15 Minuten würde es gehen.

Viele Grüße

Andreas

[hedon02]

... ohne Erfolg ist sehr hilfreich. Irgendwas wird ja passieren. Hast Du den Code ausprobiert und wie ist das Ergebnis?

Gruesse

[Lecaffee24]

Ich schalte den Shop mal Frei, für 20 Minuten, ich hoffe sehr das du mir helfen kannst.

electroluxe.de

Viele Grüße

Andreas

[hedon02]

Ja okay reicht schon  . Vielleicht setzt Du den Code mal so um wie ich es beschrieben habe? Denn Du hast ja ueberhaupt nichts geaendert.

Gruesse