ilch Forum » Ilch CMS 2.X » Design und Templates » Footer Ausrichtung ändern

Geschlossen
  1. #1
    User Pic
    [GNC]Lord-MDB Mitglied
    Registriert seit
    02.02.2015
    Beiträge
    81
    Beitragswertungen
    2 Beitragspunkte
    Ich würde gerne den Footer so abändern das er mittig auf der HP ist. Und das er bei der Mobil Ansicht dann trotzdem noch dargestellt wird.
    Der Footer ist jetzt Links angeordnet das sieht etwas komisch aus.

    index.php
        <div class="footer">
                <div class="container">
                    <div class="gaming">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 nav" >
    			 <div class="panel-body_unt">
                                <ul>
                                    <li><a href="/">Home</a></li>
                                    <li><a href="/Ilch2/index.php/contact/index/index">Kontakt</a></li>
                                    <li><a href="/Ilch2/index.php/imprint/index/index">Impressum</a></li>
                                    <li><a href="/Ilch2/index.php/privacy/index/index">Datenschutz</a></li>
                                </ul>
    		         </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



    Style,css
    .panel-body_unt {
    
        padding: 5px 0px 0px 5px;
    	background-image:        url('img/navbox_bg_unt.jpg');
    	color: #baac4f;
    	background-color: #171717;
    	text-align: center;
    	width:                                456px;
    }


    gesperrtes Bild


    verwendete ilch Version: 2.1.x

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Ich würde die breite in % angeben .
    Zum zentrieren füge einfach hinzu

    margin: 0 auto 0 auto;


    Oder

    margin-left: auto;
    margin-right:auto;


    Und

    width:100%;


    Die 100% ist für die mobile Ansicht. Damit es aber in der Desktop Version die Ansicht hat wie in deinem screen, müsstest du dies in der style.css hinzufügen.

    @media (min-width:768px) { .panel-body_unt { width:20% }}


    Dadurch hat dein footer bis zur mobilen Ansicht eine breite von 20% und ab der mobilen Ansicht 100%


    Zuletzt modifiziert von Slipi am 08.11.2018 - 15:48:13
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    [GNC]Lord-MDB Mitglied
    Registriert seit
    02.02.2015
    Beiträge
    81
    Beitragswertungen
    2 Beitragspunkte
    nein das hat nicht so ganz geklappt das sieht nun so aus

    gesperrtes Bild


    Zuletzt modifiziert von [GNC]Lord-MDB am 08.11.2018 - 15:51:18
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Probier es mit

    @media (min-width:768px) { .footer. container {width:20%;}}


    Und die breite von 100% fügst in der style.csd unter .footer.container { width:100%}

    Hab erst jetzt gesehen das du nicht den Container im footer ansprichst sondern panel-body.


    Zuletzt modifiziert von Slipi am 08.11.2018 - 15:58:11
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    [GNC]Lord-MDB Mitglied
    Registriert seit
    02.02.2015
    Beiträge
    81
    Beitragswertungen
    2 Beitragspunkte
    ich habe da 86% eingestellt und das sieht nun so aus wie am Anfang
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Welche breite hat dein container im Footer?



    Der Container im footer hat zb im Standart Design 85% (Bin mir nicht sicher) und die Klassen im Container haben auch eine breiten Vorgabe.

    Die Klassen im Container sollten eine breite von 100% haben und die breite vom Container zb 20%.

    Die .footer.container findest du in der style.css und die .col-.... findest du in der bootstrap.css und die .panel-body findest du ebenfalls in der style.css ( bin leider nicht am PC, sonst würd ich dir die Zeilen hinzufügen). Hoffe du verstehst was ich meine.

    Slipi


    Zuletzt modifiziert von Slipi am 08.11.2018 - 16:12:16
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    [GNC]Lord-MDB Mitglied
    Registriert seit
    02.02.2015
    Beiträge
    81
    Beitragswertungen
    2 Beitragspunkte
    .footer .container {
        margin-top: 15px;
    }
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Bin am PC und hab mir dein Layout angesehen und einen Vorschlag der dir hilft.

    Durch das löschen der

    <div class="col-xs-12 col-sm-6">


    passen die werte nicht mehr, .col-ms-6 hat eine breite von 50%. Daher müsstest du etwas in der Index ändern.

    anstatt

    <div class="col-xs-12 col-sm-6 nav">


    ersetze es mit diesem

    <div class="col-xs-12 col-sm-12 nav">


    Die .col-sm-12 ist in bootstrap vorhanden (bootstrap.min.css), und ist mit einer Breite von 100% definiert.

    Den code aus der style.css zeile 297
    @media (min-width:768px) { .footer. container {width:20%;}}
    löschen

    .panel-body_unt bitte width:480px; dadurch du eine Grafik verwendest, sollte man eher eine feste breite angeben (sry), deine Grafik ist zwar nur 456px breit aber mit 480px sieht es besser aus (mein geschmack) .



    Damiet sollte es funktioniern.

    Slipi


    Zuletzt modifiziert von Slipi am 08.11.2018 - 18:22:06
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    [GNC]Lord-MDB Mitglied
    Registriert seit
    02.02.2015
    Beiträge
    81
    Beitragswertungen
    2 Beitragspunkte
    Super das klappt, danke
    1 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten