Footer: Anordnung der Links untereinander

[chanlu]

Ich möchte gern den Footer wie in diesem Bild annordnen:

http://kitevalley.de/bilder/sonstiges/Footer.jpg

Welche Dateien müsste ich ändern, dass es so oder ähnlich aussehen könnte.

 

[chef1568]

AW: Footer: Anordnung der Links untereinander

Die Datei: /templates/JTL-Shop3-Tiny/tpl_inc/footer.tpl

 

[chanlu]

AW: Footer: Anordnung der Links untereinander

Da hast du vollkommen recht 🙂

Anders ausgedrückt wollte ich näheres zum Code wissen, aber ich hab mal selbst gebaut:

<div class="footerHolder">



<div class="footer">

                <div style="float: left;"class="footer_content">
                        <span class="headline">Rechtliches</span>

                        <ul>
                            <li><a href="http://domain.de/AGB">AGB</a></li> 
                            <li><a href="http://domain.de/Impressum">Impressum</a></li>
                            <li><a href="http://domain.de/Datenschutz">Datenschutz</a></li>
                            <li><a href="http://domain.de/Widerrufsrecht">Widerrufsbelehrung</a></li>
                        </ul>
                    </div>

                    
                <div style="float: left;" class="footer_content">
                        <span class="headline">Hilfe</span>
                        <ul>
                            <li><a href="http://domain.de/Zahlungsarten">Zahlungsarten</a></li>
                            <li><a href="http://domain.de/Versandkosten">Versandkosten</a></li>
                            <li><a href="http://domain.de/Ruecksendungen">Rücksendungen</a></li>
                            <li><a href="http://domain.de/Sicherheit">Sicherheit</a></li>
                            <li><a href="http://domain.de/Support">Support</a></li>
                        </ul>
                    </div>
              
                    
                    <div style="float: left;" class="footer_content">  
                        <span class="headline">Informationen</span>
                           <ul>
                            <li><a href="http://domain.de/Wir-ueber-uns">Über uns</a></li>
                            <li><a href="http://domain.de/kontakt.php">Kontakt</a></li>
                            <li><a href="http://domain.de/Abholungen">Abholungen</a></li>
                            <li><a href="http://domain.de/Haendler">Händler</a></li>
                            <li><a href="http://domain.de/Sitemap">Sitemap</a></li>
                            <li><a href="http://domain.de/Livesuche">Livesuche</a></li>
                            <li><a href="http://domain.de/Fragen-Antworten">Fragen & Antworten</a></li>
                           </ul>
                    </div>
                   </div>  
     
    <div style="clear: both;"></div>
</div>

   <div id="sidepanel_left">{load_boxes type="left"}</div>
   <div id="sidepanel_right">{load_boxes type="right"}</div>
   </div>

   </div>
   <div class="clear"></div>
   <div id="footer_wrapper">
      <div id="footer" class="page_width">
         <ul class="hlist">
            <li class="p50">
               <p>&copy; {$meta_copyright}
               </p>
            </li>  
            <li class="p50 tright">
               <p class="jtl">
                  {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0}{$Einstellungen.global.global_fusszeilehinweis}{/if}
                  {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0 && $Einstellungen.global.global_zaehler_anzeigen=="Y"}|{/if}
                  {if $Einstellungen.global.global_zaehler_anzeigen=="Y"}{lang key="counter" section="global"}: {$Besucherzaehler}{/if}
               </p>
            </li>
         </ul>
      </div>

Normalerweise kommt doch eine Aufzählung linksbündig untereinander. Bei mir sieht es so aus:

http://kitevalley.de/bilder/testshop/Footerfehler.jpg
Irgendwie benötige ich mal einen Denkanstoss 🙄

 

[Dan]

AW: Footer: Anordnung der Links untereinander

Hi,

Aufzählungslisten, also ul mit li werden immer eingerückt dargestellt - Wie genau, sieht jeder Browser anders.
Dass Deine Links in den divs zentriert sind, liegt wohl daran, dass Du in Deiner CSS einen text-align: center stehen hast - Wahrscheinlich in .footer oder .footer_content. Nimm das raus, oder ersetze es in dieser oder einer zu schaffenden Klasse mit text-align: left.

Viele Grüße
Dan

 

[chanlu]

AW: Footer: Anordnung der Links untereinander

Danke für Deine Antwort. Gleich auf die Suche gemacht, jedoch finde ich nur das...

ab Zeile 106 in der page.css ist folgendes änderbar:

#content_footer {
   margin-top: 15px;
   border-top: 1px solid #ddd;
   text-align: right;
}

#content_footer a {
   font-size: .88em;
}

#footer_wrapper {
   margin: 1em auto 0 auto;
   text-align: center;
   background-color: #f6f6f6;
   clear: both;
}

#footer {
   margin: 0 auto;
   text-align: left;
   padding: 1.5em 0;
   font-size: 0.9em;

Auch wenn ich alles auf Left stelle, bleiben die Links gecentered. 😕

 

[Dan]

AW: Footer: Anordnung der Links untereinander

Also ganz allgemein ist es sinnvoller Änderungen nicht in der page.css sondern der custom.css vorzunehmen - Am Besten in einem separaten (custom) theme oder sogar template.
Hast Du vielleicht solche Angaben schon in Deiner custom.css? Wenn da schon Definitionen für den footer sind, überschreiben die die Werte in der page.css.

Hilfreich für solche Fälle ist übrigens der Firefox mit dem Add-on Firebug https://addons.mozilla.org/de/firefox/addon/1843/. Beim Überfahren des jeweiligen Elementes zeigt er Dir alle involvierten CSS Definitionen an.

Ansonsten könnte ich es mir auch anschauen, wenn Du mir einen Link schickst.

 

[Dan]

AW: Footer: Anordnung der Links untereinander

Ok, also ich bin auch ein wenig blind... Also erstens hast Du Deinen divs die Klasse footer_content mitgegeben, definiert wird in der CSS aber content_footer. Zweitens ist in der CSS eine ID definiert und keine Klasse - Deine Zeilen müssten also so aussehen:

<div style="float: left; margin: 0 auto;" id="content_footer">

wobei Du das float aus Gründen der Sauberkeit auch besser in die CSS packst.

 

[chanlu]

AW: Footer: Anordnung der Links untereinander

ohman! ja, vielen dank... 🙄

Es sieht jetzt auch fast perfekt aus, alle drei Aufzählungen stehen untereinander. Was ich jetzt nicht hinbekomme ist, dass die drei Aufzählungen auch center im footer stehen.

Mit der Angabe in der footer.tpl

<div style="float: left; width: 20%">

stehen die 3 "linkgruppen" perfekt nebeneinander angeordnet, wie ich es möchte. Jedoch sollen diese 3 Gruppen im Footer in der Mitte stehen - quasi eingerückt in die Mitte. Ich kriegs net hin :-/

 

[Dan]

AW: Footer: Anordnung der Links untereinander

Du kannst, wenn Du eine feste Breite zuweist, den Abstand links und rechts gleichsetzen, also z.B. so:

width: soundsovielPixel; margin:0 auto;

 

[chanlu]

AW: Footer: Anordnung der Links untereinander

Da ich das absolute Halbwissen in CSS habe und mich von Ast zu Ast hangele, versuch ich´s anders:

Das steht nun in meinem Footer.

<div id="content_footer">
                <div>
                        <span">Rechtliches</span>

                                                <ul>
                            <li><a href="http://domain.de/AGB">AGB</a></li> 
                            <li><a href="http://domain.de/Impressum">Impressum</a></li>
                            <li><a href="http://domain.de/Datenschutz">Datenschutz</a></li>
                            <li><a href="http://domain.de/Widerrufsrecht">Widerrufsbelehrung</a></li>
                        </ul>
                    </div>

                    
                <div>
                        <span>Hilfe</span>

<ul>
                            <li><a href="http://domain.de/Zahlungsarten">Zahlungsarten</a></li>
                            <li><a href="http://domain.de/Versandkosten">Versandkosten</a></li>
                            <li><a href="http://domain.de/Ruecksendungen">Rücksendungen</a></li>
                            <li><a href="http://domain.de/Sicherheit">Sicherheit</a></li>
                            <li><a href="http://domain.de/Support">Support</a></li>
                        </ul>
                    </div>
              
                    
                <div>
                        <span>Informationen</span>
                           <ul>
                            <li><a href="http://domain.de/Wir-ueber-uns">Über uns</a></li>
                            <li><a href="http://domain.de/kontakt.php">Kontakt</a></li>
                            <li><a href="http://domain.de/Abholungen">Abholungen</a></li>
                            <li><a href="http://domain.de/Haendler">Händler</a></li>
                            <li><a href="http://domain.de/Sitemap">Sitemap</a></li>
                            <li><a href="http://domain.de/Livesuche">Livesuche</a></li>
                            <li><a href="http://domain.de/Fragen-Antworten">Fragen & Antworten</a></li>
                           </ul>
                    </div>

    </div>

Mit den Einstellungen in der page.css ab Zeile 106...

#content_footer {
   margin-top: 15px;
   border-top: 1px solid #ddd;
   text-align: left;
   margin: 0 auto
}

#content_footer a {
   font-size: .88em;
}

#footer_wrapper {
   margin: 1em auto 0 auto;
   text-align: center;
   background-color: #f6f6f6;
   clear: both;
}

#footer {
   margin: 0 auto;
   text-align: left;
   padding: 1.5em 0;
   font-size: 0.9em;
}

#footer > ul.hlist {
    width: auto;
}

#footer p.jtl {
   background:url("./images/jtl.png") no-repeat scroll right center transparent;
    min-height:20px;
    min-width:100px;
   padding-right: 75px;
}

...sieht das ganze so aus:

http://kitevalley.de/bilder/testshop/Footerfehler1.jpg

Welche Werte müssen in der page.css eingetragen werden, damit diese 3 Linkgruppen in einem Abstand von 200px zueinander zentriert im Footer stehen? Google, selfhtml etc. schon versucht - ich komm nicht weiter :frown:

 

[Free-Dragon]

AW: Footer: Anordnung der Links untereinander

Hallo, Poste hier mal mein Überarbeitetes vielicht nicht gerade super css habe das von euch etwas angepasst was mir noch fehlt ist der platz zwischen den einzelnen zeilen!
PHP: footer.tpl

{**
 * @copyright (c) 2006-2010 JTL-Software-GmbH, all rights reserved
 * @author JTL-Software-GmbH (www.jtl-software.de)
 *
 * use is subject to license terms
 * http://jtl-software.de/jtlshop3license.html
 *}



   </div>

   <div id="sidepanel_left">{load_boxes type="left"}</div>

   <div id="sidepanel_right">{load_boxes type="right"}</div>

   </div>

 

   </div>

   <div class="clear"></div>

   <div id="footer_wrapper">

      <div id="footer" class="page_width">


<div class="footerHolder">



<div class="footer">

                <div style="float: left;"class="footer_content">
                        <span class="headline">Rechtliches</span><br>
                        <ul><br>
                            <li><a href="http://www.free-dragon.de/AGB">AGB</a></li> 
                            <li><a href="http://www.free-dragon.de/Impressum-Datenschutz">Impressum</a></li>
                            <li><a href="http://www.free-dragon.de/Impressum-Datenschutz">Datenschutz</a></li>
                            <li><a href="http://www.free-dragon.de/Widerrufsbelehrung-Widerrufsrecht">Widerrufsbelehrung</a></li>
                        </ul>
                    </div>

                    
                <div style="float: left;" class="footer_content">
                        <span class="headline">Hilfe</span><br>
                        <ul><br>
                            <li><a href="http://www.free-dragon.de/So-bezahlen-Sie">Zahlungsarten</a></li>
                            <li><a href="http://www.free-dragon.de/Liefer-und-Versandkosten-">Versandkosten</a></li>
                        </ul>
                    </div>
              
                    
                    <div style="float: left;" class="footer_content">  
                        <span class="headline">Informationen</span><br>
                           <ul><br>
                            <li><a href="http://www.free-dragon.de/ueber-uns-unser-lebenslauf">Über uns</a></li>
                            <li><a href="http://www.free-dragon.de/kontakt.php">Kontakt</a></li>
                            <li><a href="http://www.free-dragon.de/Haendlerzugang">Händler</a></li>
                            <li><a href="http://www.free-dragon.de/Sitemap">Sitemap</a></li>
                            <li><a href="http://www.free-dragon.de/Livesuche">Livesuche</a></li>
                           </ul>
              </div>

                    <div style="float: left;" class="footer_content">  
                        <span class="headline">Links</span><br>
                           <ul><br>
                            <li><a href="http://www.Rolandsfutterkiste.de">Hunde & Katzenfutter</a></li>
                            <li><a href="http://www.Westcoast-band.de">Liveband</a></li>
                            <li><a href="http://www.kanzlei-endingen.de">Anwalt für alle Fälle</a></li>
                            <li><a href="http://www.kreditexperte.net">Kreditvergleich</a></li>
                <li><a href="http://www.dmoz.ch">Suchmaschine und Verzeichnis</a></li>
                <li><a href="http://www.stadtbranchenbuch.com">Branchenbuch</a></li>
                <li><a href="http://www.raw.to">Linkliste</a></li>
                           </ul>

                    </div>
                   </div>  
     
    <div style="clear: both;"></div>
</div>

   <div id="sidepanel_left">{load_boxes type="left"}</div>
   <div id="sidepanel_right">{load_boxes type="right"}</div>
   </div>

   </div>
   <div class="clear"></div>
   <div id="footer_wrapper">
      <div id="footer" class="page_width">
         <ul class="hlist">
            <li class="p50">
               <p>&copy; {$meta_copyright}
               </p>
            </li>  
            <li class="p50 tright">

               <p class="jtl">

                  {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0}{$Einstellungen.global.global_fusszeilehinweis}{/if}

                  {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0 && $Einstellungen.global.global_zaehler_anzeigen=="Y"}|{/if}

                  {if $Einstellungen.global.global_zaehler_anzeigen=="Y"}{lang key="counter" section="global"}: {$Besucherzaehler}{/if}

               </p>

            </li>

         </ul>

      </div>

      

      {if $Einstellungen.global.global_google_analytics_id}

         {if $Bestellung->kBestellung>0 && $Einstellungen.global.global_google_ecommerce==1}

         <script type="text/javascript"> 

         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 

         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 



         var pageTracker = _gat._getTracker("{$Einstellungen.global.global_google_analytics_id}");

         _gat._anonymizeIp();

         pageTracker._initData(); 

         pageTracker._trackPageview(); 

         

         pageTracker._addTrans( 

         "{$Bestellung->cBestellNr}", 

         "{if $Einstellungen.global.global_shopname}{$Einstellungen.global.global_shopname}{else}{$Firma->cName}{/if}", 

         "{$Bestellung->fWarensummeNetto}", 

         "{$Bestellung->fSteuern}", 

         "{$Bestellung->fVersandNetto}", 

         "{$smarty.session.Kunde->cOrt}",

         "{$smarty.session.Kunde->cBundesland}",

         "{$smarty.session.Kunde->cLand}"

         ); 

         {foreach name=Bestell item=order from=$Bestellung->Positionen} 

         {if $order->nPosTyp!=2 && $order->nPosTyp!=8 && $order->nPosTyp!=6} 

         pageTracker._addItem( 

         "{$Bestellung->cBestellNr}",

         "{$order->cArtNr}",

         "{$order->cName}",

         "{$order->Category}",

         "{$order->fPreis}",

         "{$order->nAnzahl|replace:",":"."}"

         ); 

         {/if} 

         {/foreach} 

         pageTracker._trackTrans(); 

         </script>    

         {else}

         <script type="text/javascript">

         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

         </script>

         <script type="text/javascript">

         var pageTracker = _gat._getTracker("{$Einstellungen.global.global_google_analytics_id}");

         _gat._anonymizeIp();

         pageTracker._initData();

         pageTracker._trackPageview();

         </script>

         {/if}

      {/if}

      {if $smarty.now % 1 == 0}

          <img src="includes/cron_inc.php" width="0" height="0" alt="" />

      {/if}

   </div>

</div>

<!-- time: {$nZeitGebraucht|truncate:6:''} seconds -->

</body>

</html>

und
page.css ab zeile 106

#content_footer {
   margin-top: 15px;
   border-top: 1px solid #ddd;
   text-align: left;
   margin: 0 auto
}

#content_footer a {
   font-size: .88em;
}

#footer_wrapper {
   margin: 1em auto 0 auto;
   text-align: center;
   background-color: #f6f6f6;
   clear: both;
}

#footer {
   margin: 0 auto;
   text-align: left;
   padding: 1.5em 0;
   font-size: 0.9em;
}

#footer > ul.hlist {
    width: auto;
}

#footer p.jtl {
   background:url("./images/jtl.png") no-repeat scroll right center transparent;
    min-height:20px;
    min-width:100px;
   padding-right: 75px;
}

So sieht es dann aus:

http://www.Free-Dragon.de/bilder/footer.gif

MFG Basti

 

[chanlu]

AW: Footer: Anordnung der Links untereinander

Versuchs mal hiermit:

footer.tpl:

{**
 * @copyright (c) 2006-2010 JTL-Software-GmbH, all rights reserved
 * @author JTL-Software-GmbH (www.jtl-software.de)
 *
 * use is subject to license terms
 * http://jtl-software.de/jtlshop3license.html
 *}

   </div>
   <div id="sidepanel_left">{load_boxes type="left"}</div>
   <div id="sidepanel_right">{load_boxes type="right"}</div>
   </div>
 




<div id="content_footer">
                <div>
                        <span">Rechtliches</span>

                        <ul>
                            <li><a href="http://domain.de/AGB">AGB</a></li> 
                            <li><a href="http://domain.de/Impressum">Impressum</a></li>
                            <li><a href="http://domain.de/Datenschutz">Datenschutz</a></li>
                            <li><a href="http://domain.de/Widerrufsrecht">Widerrufsbelehrung</a></li>
                        </ul>
                    </div>

                    
                <div>
                        <span>Hilfe</span>
                        <ul>
                            <li><a href="http://domain.de/Zahlungsarten">Zahlungsarten</a></li>
                            <li><a href="http://domain.de/Versandkosten">Versandkosten</a></li>
                            <li><a href="http://domain.de/uecksendungen">Rücksendungen</a></li>
                            <li><a href="http://domain.de/Sicherheit">Sicherheit</a></li>
                <li><a href="http://domain.de/Support">Support</a></li>

                        </ul>
                    </div>
              
                    
                <div>
                        <span>Informationen</span>
                           <ul>
                            <li><a href="http://domain.de/Wir-ueber-uns">Über uns</a></li>
                            <li><a href="http://domain.de/kontakt.php">Kontakt</a></li>
                            <li><a href="http://domain.de/Abholungen">Abholungen</a></li>
                            <li><a href="http://domain.de/Haendler">Händler</a></li>
                            <li><a href="http://domain.de/Sitemap">Sitemap</a></li>
                            <li><a href="http://domain.de/Livesuche">Livesuche</a></li>
                            <li><a href="http://domain.de/Fragen-Antworten">Fragen & Antworten</a></li>
                           </ul>
                    </div>

    </div>

   <div id="sidepanel_left">{load_boxes type="left"}</div>
   <div id="sidepanel_right">{load_boxes type="right"}</div>
   </div>

page.css:

#content_footer {

   margin-top: 15px;
   border-top: 1px solid #ddd;
   text-align: left;
   margin: auto;
   width: 860px;
      
}




#content_footer div{

    margin-top: 15px;
    margin-left: 125px;
    float: left;

}



#content_footer span{

    padding-bottom: 5px;

    display: block;

}



#content_footer ul{

    list-style-image: url('http://domain.de/AufzählungszeichenDeinerWahl');

    padding-left: 15px;

    margin: 0;

}



#content_footer ul li{

    padding: 0;

    margin: 0;

}



#content_footer a, #content_footer a:visited {

   font-size: .88em;

   text-decoration: none;

   color: #6d6d6d;

}



#content_footer a:hover, #content_footer a:visited:hover {

    color: #000;

}



#footer_wrapper {

   margin: 1em auto 0 auto;

   text-align: center;

   background-color: #f6f6f6;

   clear: both;

}



#footer {

   margin: 0 auto;

   text-align: center;

   padding: 4em 0;

   font-size: 0.65em;

}



#footer > ul.hlist {

    width: auto;

}



#footer p.jtl {

   background:url("./images/jtl.png") no-repeat scroll right center transparent;

    min-height:20px;

    min-width:100px;

   padding-right: 75px;

}

Am Ende sieht es dann so aus:

http://kitevalley.de/bilder/testshop/footer.png

Das Problem was ich momentan noch habe ist, dass Produktbilder durch diese Einstellungen irgendwie beim Anklicken ganz unten auf der Seite in voller Auflösung angezeigt werden und nicht wie sonst seperat größer werden.

 

[Free-Dragon]

AW: Footer: Anordnung der Links untereinander

Hi also da gibt ein Konflikt in wie genau habe ich noch nicht herausgefunden aber ändere mal die

#content_footer {

um in

#content_footer1 {

in der page.css und footer.tpl


dann sollte es funktionieren!


was muss ich genau abändern wenn ich 4 blöcke nebeneinander haben will ?

MFG Basti

 

[dihegroup]

AW: Footer: Anordnung der Links untereinander

Hi also da gibt ein Konflikt in wie genau habe ich noch nicht herausgefunden aber ändere mal die

#content_footer {

um in

#content_footer1 {

in der page.css und footer.tpl


dann sollte es funktionieren!


was muss ich genau abändern wenn ich 4 blöcke nebeneinander haben will ?

MFG Basti

Hast es nun gelöst oder brauchst Hilfe?!

 

[Free-Dragon]

AW: Footer: Anordnung der Links untereinander

Hi
ich wollte gerne noch das alle 4 boxen nebeneinander stehen das ich bis jetzt noch nicht hinbekommen habe! der Rest funktioniert!

MFG Basti

 

[dihegroup]

AW: Footer: Anordnung der Links untereinander

suche die Datei "page.css" raus, dort finde die Stelle:

#content_footer1 ul {
list-style-image: url("http://www.free-dragon.de/bilder/footer.png"); margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-left: 0;
}


Und einfach dies hinzufügen width: 100px;

Also nach dem padding-left: 0; obwohl die wo es genau in diesem Block steht ist irrelevant.