Positionierung und Abstände in der Sidebar

Levare Patria

Moin,

gibt mal wieder zu tun. ;-)
Die Titelseite unseres Satiremagazins sieht jetzt schon mal ganz gut aus: QWERTZwerk.de

Nur die Sidebar bereitet dort Kummer. Die Abstände zwischen den Textblöcken sind zu groß. Ich schaff es zwar über diese Einträge

.narrowcolumn {
float: left;
padding: 0 0 20px 40px;
margin: 140px 0 0;
width: 340px;
}

den Abstand der Sidebar zum Header zu verändern, aber je höher der Wert wird, desto größer auch der Abstand zwischen den Blöcken. Sollte ich den Abstand zum oberen Bildrand evtl woanders einstellen?

Außerdem finde ich den Eintrag für die Font-Größe des Sidebar-Texts (jetzt grau) nicht mehr. Seltsam.

Dann noch ein weiteres wichtiges Problem:
Klickt man auf einen Beitrag, sollte auf der Folgeseite der Text auf weißem oder schwarzen Hintergrund laufen (steht noch nich ganz fest), d.h. die Hintergrundgrafik sollte verdeckt werden oder sogar ganz ausgeschaltet sein. Aber eben nur auf den Unterseiten. Geht das? Evtl. ne schwarze Kastengrafik drunterlegen? Ist es möglich, auf der Titelseite noch mit weißer Schrift zu arbeiten und auf der Unterseite wird die dann schwarz dargestellt? Sind die Angaben für die "Unterseiten" im CSS eigentlich unter "Page" definiert oder wo?

Hilfe wäre - wie immer - ziemlich toll. Danksagungen an die Helfenden folgen dann auf der Seite, sobald sie mal fertig ist. Eure Chance, Berühmtheit zu erlangen. ;-)

Ich habs ja weiter unten in einem anderen Thread schon mal gesagt: Ich glaube es wäre für alle Benutzer von Wordpress und/oder Kubrick und auch für die Moderatoren hier hilfreich, wenn die CSS mal in einer Übersicht aufgeschlüsselt wird. Evtl. eine Grafik oder eine PDF, wo rechts neben den CSS-Einträgen genauer beschrieben wird, was der Eintrag beeinflusst. Nur mal so als Idee ...

Grüße
lev

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

telekommander

ganz schön viel .... (uff)

Zitat

den Abstand der Sidebar zum Header zu verändern, aber je höher der Wert wird, desto größer auch der Abstand zwischen den Blöcken. Sollte ich den Abstand zum oberen Bildrand evtl woanders einstellen?

Du definierst in der style.css ( Zeile 310 ) diesen Abstand mit den <h2> Tag.

Code

#sidebar h2 {
	padding-top: 80px;
	margin: 30px 0 0;
	/* padding: 0; */
	}

Sidebar Font-Grösse definiert in Zeile 163. Trage dort deine Grösse ein, like this:

Code

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
        font-size: 12px;
	}

... weitersuch ...

Levare Patria

Thx, Telekommander. Tatsächlich beeinflusst der Padding-Wert dort den Abstand nach oben zum Header. Dennoch lässt sich am Zwischenraum der Textblöcke in der Sidebar gar nichts ändern. Es könnte sein, dass ich mit dem ganzen Trial and Error irgendwo anders mal einen Wert geändert habe, der das beeinflusst. Aber alles Suchen hat nichts geholfen. :-(

Wo könnte das also zu finden sein? MUSS es zwangsläufig ein "Padding-Wert" sein?

Hier ist mal die aktuelle Stylecss als Txtdatei: http://www.qwertzwerk.de/download/stylecssLevare.txt
(mit Wordpad öffnen)

Desweiteren hätte ich gerne noch einen Hinweis auf mein anderes Problem, wie es oben geschildert steht. Also die Sache mit dem Textfarbenwechsel auf der ARtikelseite plus einfarbiger Hintergrundfläche dort ...

thx.

telekommander

Nee nee, der padding Wert bei #sidebar h2 ist schon richtig, je höher der Wert um so grösser auch der Abstand zwischen den Blöcken, ist auch logisch weil jeder Textblock auch eine Überschrift mit <h2> besitzt. Also entspricht der Abstand zum nächsten Textblock auch dem definierten px-Wert.

Wenn du nur die Sidebar hoch bzw. runter setzen willst dann mach das hier unter Zeile 171 und 535 (soll heissen fasse diese zwei Def. zusammen, dann wirds auch übersichtlicher, das Betrifft auch andere Def.)

Code

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 13px;        /* definiert die Font-Groesse in der Sidebar */
	font-weight: bold;
	}

Code

#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 670px;		/* hm. Abstand Sidebar von links oder so */
	width: 180px;
	}

Zitat

... anderes Problem...

Schwierig ... überleg noch !

Levare Patria

Feine Sache - funktioniert. Danke Dir ...

... so, und nun zum anderen Problem. ;-)

telekommander

Gern geschehen,
Zum Thema:

Zitat

Klickt man auf einen Beitrag, sollte auf der Folgeseite der Text auf weißem oder schwarzen Hintergrund laufen

Als Vorbereitung sozusagen, würde ich erstmal alle Styleshhetdefinitionen aus der header.php in die style.css packen, also alles ab Zeile 18 was nicht auskommentiert ist.

( weiter grübel )

Monika

index.php =Startseite

zB gelber Hintergrund grüne Schrift

Artikel= single.php
roter Hintergrund, weiße Schrift

single.php öffnen

style.css öffnen

#single{background-image:none; background-color:red; color:white;}

und
wie oben erwähnt die Angaben aus der header.php in die style.css packen.

sidebar

Du magst, dass die ganze sidebar einen anderen Abstand zum header Bild hat,
dann gib der ganzen sidebar diesen Abstand

#sidebar{margin-top:50px;}
weiß nicht, ob das reicht ist ja egal...

aber diese margin-top Angabe tät sich auf alle anderen Elemente innerhalb von
#sidebar vererben, also unterbinden wir diese Vererbung,

bei allen Angaben die mit
#sidebar beginnen
{margin-top:4px;}
und dann natürlich die anderen Angaben, die nötig sind.

margin ist der Abstand zwischen zwei Elementen
padding der Abstand innerhalb eines Elementes.

mit #sidebar {padding:50px;}
hast Du nicht die sidebar runtergerutscht, sondern nur die Elemente wie ul li h2 etc...
und auch dies vererbt sich,

Du kannst Dir vorstellen,
#sidebar ist der Boss der sidebar.php
und alle drunter haben sich nach seine Angaben zu richten,
AUßEr
sie bekommen eine extra Anweisung ;)

die Fragen, die Du hast beziehen sich nicht auf die style.css des Kubrickthemes,
sondern sind generelle Fragen der CSS Technik,

die style.css des Kubrickthemes ist ein wenig chaotisch geordnet keine Frage,
aber dennoch eindeutig.

ich probier ja schon diese Erklärung,
nur wie packt man sooooooooooooooooooooooo ein Wissen in sowenigWorte...

da feile ich noch und lösche und bebildere und dies dauert ebend...;)

lg

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Positionierung und Abstände in der Sidebar

Jetzt mitmachen!