Änderung Hintergrundfarbe für GANZE Spalte ?

Schnullerbacke

Hallo Leute,

ich würde in meinem Blog gerne testweise mal versuchen, die ganze mittlere Spalte (da, wo Suche, Social Bookmarks, Meta, etc. sind) mit grauem Hintergrund (#EEEEEE) zu hinterlegen, analog der Farbe der Navigationsleisten oben und unten. Das habe ich auch geschafft (siehe Blog), aber leider nicht für die GANZE Spalte. Was ich will:

Die Spalte soll von oberer Navigationsleiste (header) bis zur unteren Navigationsleiste (footer) durchgehend grau sein - wie ein Balken, quasi als kleine optische Abgrenzung !
Der Hintergrund soll etwas breiter als der Spalteninhalt sein (links und rechts), da die Schrift so am linken Rand drangeklatscht ist (siehe Stand jetzt).
Der Hintergrund soll grau bleiben, egal wieviel Inhalt noch kommt...

Wie könnte ich das realisieren ? Ich zeige Euch mal den Auszug aus der style.css:

PHP

/* main - middle content and columns */
#mid{}#mainCol{float:left;margin:26px 0 0 0;width:435px;}
/* style individual sidebars */
#midCol a{font-weight:bold;}
#midCol{background:#EEEEEE;color:#444;float:left;margin:25px 0 0 33px;width:250px;line-height:1.3em;}
#midCol p{color:#777;}
#searchWrap,
.middle_links{margin-bottom:20px;}
#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}
.middle_links h3{margin-bottom:7px;}
#midCol ul{list-style:none;margin:8px 0 4px;}
.middle_links ul li{background:url(images/li.gif) no-repeat 0 3px;color:#7F7F7F;line-height:1.2em;border-top:1px solid #BBB;padding:4px 0 4px 16px;}
#tertCol{float:left;width:214px;margin:23px 0 0 33px;}
#tertCol p{color:#777;}
#elseWhere{margin:0 0 20px 0;}
#elseWhere h3{margin-bottom:7px;}
ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:132px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}

Alles anzeigen

Freue mich auf Tips.
Danke vorab und viele Grüsse,

Chris

P.S.: Marcus: Jetzt aber :D !

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

marX

Zitat von Schnullerbacke

P.S.: Marcus: Jetzt aber :D !

*gg* Na klar, kein Thema:

Code

/* style.css (line 56) */
#midCol {
background:#EEEEEE none repeat scroll 0 0;
color:#444444;
float:left;
line-height:1.3em;
margin:[color=red]0[/color] 0 0 [color=red]12px[/color];
width:250px;
[color=blue]padding:25px 10px 0;[/color]
}

Nur die Höhe bis hinunter zum Footer wirst du so nicht hinbekommen. Das ist einfach nicht drin, ohne größere Änderungen am HTML-Gerüst. Die einfachste Lösung hier wäre, nimm ne Grafik für den Hintergrund. 1px hoch, 965px breit, Hauptfarbe weiß/transparent, Pixel 447 (width #maincol + margin #midcol) bis Pixel 697 hellgrau. Die Hintergrundgrafik weist du #mid zu, in y-Richtung (d.h. nach unten) wiederholend.

Schnullerbacke

Marcus,

danke für den ersten Tip - hat funktioniert.

Beim zweiten Tip mit der Hintergrundgrafik steige ich gerade aus...

marX

Das klingt vielleicht kompliziert, ist aber eigentlich überhaupt nicht. Ich würde dir die Grafik ja anhängen, aber da macht die Forensoftware leider Unsinn ;)

Schnullerbacke

Danke, Marcus - hab's bekommen.
Aber irgendwie check ich's grad nicht, wie das dann mit der Einbindung klappen soll...

marX

Code

[COLOR="Gray"]/* style.css (line 52) */[/COLOR]
#mid {
[COLOR="Blue"]background:url([B]images/mid_bg.gif[/B]) left top repeat-y;[/COLOR]
}

bei URL (fett) muss der Pfad zur Grafik hin, relativ zur style.css

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Änderung Hintergrundfarbe für GANZE Spalte ?

Jetzt mitmachen!