Sidebar Linien

wdmfs

Hallo.

Ich möchte gerne, dass meine Sidebar etwas strukturierter aussieht. Dafür hab ich mir folgenes vorgestellt.
Also quasi senkrechte Linien im inneren des Blocks.

So siehts jetzt aus.

Wie kann ich das machen?

Vielen Dank :).

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

Marius

Möchtest du einen durchgehenden Strich haben, oder nur in den Kategorieeinträgen?

ciao, Marius

kinjin

Moin Moin,

<hr /> ist dein Freund, nun musste nur noch in deinem Template schauen, wo du es einsetzt, und evtl. in deinem Stylesheet formatieren...

Timo

ratterobert

nur ist so ein <hr /> eher waagerecht...

besser wäre eine

Code

border-left: 1px solid #farbe;

für die [*]´s in der sidebar.

wdmfs

@ Marius: so ganz verstehe ich nicht. Ich möchte es genau so, wie bei dem Blog, den ich da verlinkt habe.

@ ratterobert und kinjin: muss ich jetzt bei der css was ändern, oder in der sidebar.php?
Entschuldigt mich, ich friemel mich immer nur so durch, und habe daher nur von den Dingen Ahnung, die ich bisher brauchte. Man lernt ja aber nie aus, deswegen frag ich lieber 2 Mal.
Und was genau muss ich ändern?

Vielen Dank, und eine gute Nacht.

Carla

ratterobert

nur ein versuch:

öffne die style.css im editor und such nach folgender zeile:

Code

#sidebar ul ul li, #sidebar ul ol li {

dort fügst du jetzt ein:

Code

border-left: 1px solid #000; /* farbangabe an das layout anpassen */

das sollte dann schon alles sein.

wdmfs

Hallo.

Wenn ich aus

Code

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}

Code

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	border-left: 1px solid #000;
}

mache, ändert sich gar nichts. :(

ratterobert

ok, dann füg das mal hier ein:

Code

#sidebar ul ul, #sidebar ul ol {

wdmfs

Großartig. Das sieht schon besser aus. Danke.

Jetzt müsste noch die ">>" weg.

Und ich hätte den STrich auch gerne vor dem Kalender und der Suche.

ratterobert

um den doppelpfeil weg zu bekommen musst du einfach hier

Code

.entry ul li:before, #sidebar ul ul li:before {


	content: "\00BB \0020";


	}

das

Code

, #sidebar ul ul li:before

rauslöschen:

was den kalender angeht, kannst du mal probieren wie es aussieht, wenn du in der sidebar.php das

PHP

<h2>davor</h2>
<?php wp_get_calendar(); ?>

in

PHP

[*]<h2>davor</h2>
<ul>
<?php get_calendar(); ?>
[/list]

änderst.

bei der suche ersetzt du deinen code mit dem:

PHP

<ul>[*]
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
[/list]

ich denke, dass sollte so funktionieren.

ratterobert

wie ich sehe, sind die pfeile weg. aber ändere das mal noch wie folgt:

Code

#sidebar ul ul, #sidebar ul ol {
   margin: 3px 0 0 0;
   padding: 0 0 0 3px;
   border-left: 1px solid #000;
}

(ich hab dem ganzen noch einen tick mehr luft auf der linken seite gegeben)
und setz mal das

Code

<h2>suche</h2>

vor

PHP

<ul>[*]
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
[/list]

wdmfs

Suppi... hätt ich auch selber drauf kommen können, aber naja.

Eins noch, die Linie klebt mir etwas zu nah am Rest. Wo kann ich das einstellen?

Viiiielen lieben Dank.

ratterobert

siehe oben ;)

wdmfs

ui, da warst du aber schnell :).

So richtig zufrieden bin ich noch nicht. Jetzt ist das innere Menü nicht mehr so schön.
Die Linie und der Titel sind auf einer Höhe.

wdmfs

Hat sich erledigt. Konnts selbst lösen.

Danke.

wdmfs

Oh, hab noch was gefunden.

Hab mal den blöden IE geöffnet, um zu schaun, ob alles passt, und siehe da, im IE kreuzt die Linie von "visuell" doch tatsächlich "kuerzlich"... *grummel*

ratterobert

nur eine idee, aber mach mal aus

Code

#sidebar h2 {


	margin: 5px 0 0;


	padding: 0;


	}

folgendes:

Code

#sidebar h2 {


	margin: 5px 0 0 0;


	padding: 0 0 0 0;


	}

ratterobert

du hast in dem link zum bild zwei mal 'border="1"' stehen. evtl. ist es das schon, was den IE durcheinander bringt.

EDIT:
wenn die thumbnails aus folderblog alle ein format haben, wäre es auch ratsam, dem bild in der sidebar width- und height-attribute zu geben.

EDIT 2:
hinter dem link zur galerie schliesst du ein center-tag. es geht aber vorher keins auf. auch solche sachen können dem IE schluckauf bringen.

wdmfs

Alles zu beanstandene geändert und auch der blöde IE muckt nicht mehr.

Dankeschön, werd euch weiterempfehlen :P.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar Linien

Jetzt mitmachen!