Footer Ausrichtung ändern

Gehe zu Seite:

Geschlossen

Do. 08.11.2018 15:23 Uhr #1

[GNC]Lord-MDB Mitglied

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;
}

verwendete ilch Version: 2.1.x

betroffene Homepage: externer Link

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 08.11.2018 15:40 Uhr #2

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen
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
slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 15:50 Uhr #3

[GNC]Lord-MDB Mitglied

Registriert seit
02.02.2015

Beiträge
81

Beitragswertungen

nein das hat nicht so ganz geklappt das sieht nun so aus

Zuletzt modifiziert von [GNC]Lord-MDB am 08.11.2018 - 15:51:18
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 15:52 Uhr #4

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen
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
slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 15:53 Uhr #5

[GNC]Lord-MDB Mitglied

Registriert seit
02.02.2015

Beiträge
81

Beitragswertungen

ich habe da 86% eingestellt und das sieht nun so aus wie am Anfang
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 16:02 Uhr #6

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen

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

slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 16:31 Uhr #7

[GNC]Lord-MDB Mitglied

Registriert seit
02.02.2015

Beiträge
81

Beitragswertungen
```
.footer .container {
    margin-top: 15px;
}
```
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 18:07 Uhr #8

Slipi Hall Of Fame

Registriert seit
19.01.2018

Beiträge
954

Beitragswertungen
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
slipi.at/
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 08.11.2018 18:41 Uhr #9

[GNC]Lord-MDB Mitglied

Registriert seit
02.02.2015

Beiträge
81

Beitragswertungen

Super das klappt, danke
1 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

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