Pilgrim: Footer umgestalten. Statt vertikaler, zwei horizontale Liste

Claudia18

Unten eingefügter Auszug aus der css für die Widgets vom Footer möchte ich gerne so unmschreiben, dass zwei Seitenwidgets mit horizontaler Ausrichtung über den gesamten Bereich entstehen. Als Trennung hätte ich gerne | .
Also so

Thema 1

Seite | Seite | Seite

Thema 2

Seite | Seite | Seite

Wer weiß Rat? Danke

/* Footer widgets */

#bottom{
margin:0px;
padding:0px;
background:#477667;
}

#bottom ul{
margin:0px;
padding:0px;
}

h3.bothead{
font-size: 16px;
margin-bottom: 10px;
padding-bottom:10px;
color:#fff;
font-weight: bold;

}

.botwid{
padding:30px 0px;
font-size:12px;
color:#aaa;
list-style:none;
width:280px;
float:left;
margin-left:30px;
}

.botwid ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 0px ;

}
.botwid li{
list-style-type: none;
margin: 0 ;
padding: 0px 0px;
border-bottom: 1px solid #4F7F6F;
}
.botwid ul ul {
list-style-type: none;
margin: 0;
padding: 0px 0px 0px 0px;
background-repeat:no-repeat;
}

.botwid ul ul ul{
list-style-type: none;
margin: 0;
padding: 0;
border:0;
}

.botwid ul ul ul ul{
list-style-type: none;
margin: 0;
padding: 0;
border:0;

}

.botwid ul li {
height:100%;
line-height:18px;
clear: left;
list-style-type: none;
}

.botwid ul li a:link, .botwid ul li a:visited {

color: #eee;
text-decoration: none;
padding: 7px 0px 7px 0px;
display:block;

}

.botwid ul li a:hover{

color: #fff;
}

.botwid p{
padding: 7px 0px;
margin:0;
line-height:150%;
}

.botwid table {
width:100%;
text-align:center;
color:#787d7f;
}

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Hallo Claudia

gibt es auch einen Link zu deiner Seite?

LG, pixselig

Claudia18

http://www.geburt-ev.de

pixselig

Ok
jetzt füge bitte noch die zwei Widgets samt den gewünschten Links ein.
Erst dann kann man richtig formatieren.

Claudia18

Das sind zwei Seitenwidgets. Die der Hebammen samt momentan 10 Unterseiten ist dort schon zu sehen. Dann kommt noch die Rubrik Ärzte dazu, dass sind 9 - 11, die habe ich noch nicht erstellt. Ich kann die Widgets nachher aber über das Dashboard einziehen. Oder ist das nicht gut?

pixselig

Achso, dachte du meinst den Footer und nicht die bottom-Area ;)

http://www.geburt-ev.de/wordpress/word…0.css?ver=3.5.1
Zeile 75:

Code

.container_12 .grid_3 {
[COLOR=#ff0000]    width: 250px;[/COLOR]






}

hier die rote Zeile löschen -> oder gleich die ganze Angabe

und http://www.geburt-ev.de/wordpress/word…e.css?ver=3.5.1
Zeile 943 ff

Code

.botwid {
    color: #666666;
    display: inline;
    float: right;
    font-size: 16px;
    list-style: square outside none;
    margin-left: 30px;
    padding: 30px 0;
[COLOR=#ff0000]    width: 1010px;[/COLOR]






}

Alles anzeigen

hier ebenfalls die rote Zeile löschen.

Claudia18

Ja, das hat geklappt =D , aber die Artikel hat es auch mitgerissen, was machen wir da denn gegen?

pixselig

Na das ist aber garnicht gut :(

Mache bitte die änderungen wieder rückgängig und füge folgendes in deine style.css ein:

CSS

#bottom .botwid {width: 1170px!important;}
#bottom .container_12 .grid_3 {width: 1170px!important;}

Mir ist heute einfach zu heiss (34°)

Claudia18

Beides so in style.css, oder den container in 960.css?

pixselig

beides in die style.css sollte passen.

Claudia18

Hat geklappt, habe es so zusammen reingestellt. Letztes Problem, der Trennstrich | wird noch nicht angezeigt.

pixselig

Du hast ja Wünsche ;)
Normalerweise macht man sowas in der entsprechenden php-Datei. Da ich diese aber nicht kenne und du dich selber (noch) nicht so gut auskennst können wir da nur einen Umweg über css gehe:

Code

.botwid ul li a:after {
content: "|";
margin-left: 10px;
margin-right: 10px;
color: green;
}

in deine style.css einfügen.
Ich weiss allerdings nicht in wieweit das jetzt mit alten Browsern kompatibel ist.

ps: margin und color kannst du selber wählen!

Claudia18

Ist ja toll! Vielen Dank! Im Namen des gesamten Vereins: DANKE! Du hast uns sehr geholfen. Und das bei der Hitze, wir schicken ein wenig frische Seeluft rüber. :razz:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Pilgrim: Footer umgestalten. Statt vertikaler, zwei horizontale Liste

Jetzt mitmachen!

Benutzer online in diesem Thema