Sidebar links verändern

hewi

Habe jetzt sowohl die Suchfunktion - als auch 25 Seiten durchgelesen. Leider ohne Erfolg.

Mein kleines Problem: Ich will meine Sidebar ca. 5 px nach links verschieben.

Siehe hier Blog

Die linke Sidebar soll so wie die rechte von außen anfangen. (vgl. graue Balken rechts / bei den linken ist ungefähr 5px Abstand).

Falls dies nur dann geht, wenn an der rechten Sidebar innen auch 5px entfernt werden müssen, dann bitte.

Bitte, bitte helft mir. Sitze seit 3 Std. dran und habe alles schon versucht...

Zitat

/************************************************
* Leftt Sidebar *
************************************************/
#l_sidebar {
background: #E8E8E8;
float: left;
width: 220px;
margin: 0px;
padding: 5px 0px 0px 0px;
}
#l_sidebar h2 {
background: #999999;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 10px 0px 5px 10px;
margin: 0px;
text-transform: uppercase;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 10px;
}

#l_sidebar ul li {
list-style: none;
background: url(images/sidelink.gif) no-repeat;
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #333333;
text-decoration: none;
padding: 5px 0px 10px 20px;
margin: 0px 0px 5px 0px;
}
#l_sidebar ul li a:hover {
color: #800000;
text-decoration: underline;
}

Alles anzeigen

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

Alphawolf

Mein obligatorischer Schuss ins Blaue:

Code

#l_sidebar {
background: #E8E8E8;
float: left;
width: 220px;
margin: 0px;
padding: 5px 0px 0px 0px;
}

ersetzen durch:

Code

#l_sidebar {
background: #E8E8E8;
float: left;
width: 220px;
margin: 0px;
padding: 5px 5px 0px 0px;
}

Die einfache Angabe padding: mit vier Werten setzt diese im Uhrzeigersinn (hier also: 5px von oben, 5px von rechts, 0px von unten und 0px von links)

hewi

nee, das hatte ich auch schon...
Trotzdem Danke

Alphawolf

Ich seh's gerade. Das sind aber die Definitionen für die linke Sidebar, du willst die rechte Sidebar ändern, richtig?

hewi

Nein, schau mal kurz bitte hier BLOG

Rechts fangen die graue Topic-Balken außen perfekt für das Layout an nach innen zu wandern.

Als Perfektionist hätte ich gerne, dass dies Spiegelverkehrt links genauso ist.
Da anscheinend die Tabellen der Sidebars gleich definiert sind, fangen die graue Topic-Balken natürlich 5 oder 10px später an.

Als Bsp. kleiner Screenshot angehangen

Alphawolf

Achso, na dann. :)

Code

#l_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 10px;
}

ersetzen durch

Code

#l_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 10px 20px 0px;
}

hewi

Vielen, vielen Dank Alphawolf.

Das war es jetzt fast. Habe die Grafik des Pfeils noch um 2px verschoben und jetzt stimmt es fast.

Jetzt habe ich nämlich das Problem, das das Layout perfekt ist aber
wenn in der Sidebar die Schrift über die 2te Zeile rausgeht sieht das so aus

-> blblablblab
blblblblb

Wo ändere ich dass den?
Gruss
hewi

Alphawolf

Aufgrund des unsauberen Codes des von dir benutzten Themes ist das nicht ganz einfach...

Folgende CSS-Änderungen sind nötig:

Code

#l_sidebar ul li {
	list-style: none;
	background: url(images/sidelink2.gif) no-repeat;
	margin: 0px;
	padding: 5px 0px 0px 0px;
}

ersetzen mit:

Code

#l_sidebar ul li {
	list-style: none;
	background: url(images/sidelink2.gif) no-repeat;
	margin: 0px;
	padding: 5px 0px 0px 20px;
}

---

Code

#l_sidebar ul li a {
	color: #333333;
	text-decoration: none;
	padding: 5px 0px 10px 20px;
	margin: 0px 0px 5px 0px;
}

ersetzen mit:

Code

#l_sidebar ul li a {
	color: #333333;
	text-decoration: none;
	padding: 5px 0px 10px 0px;
	margin: 0px 0px 5px 0px;
}

Wenn du jetzt die Änderungen am Blog ansiehst, weißt du was ich mit unsauber meine, denn die <h2>-Überschriften sind in die die Liste integriert.

Daher am Besten alle <h2>-Tags in der Sidebar VOR die Liste setzen, also quasi:

Code

<div id="l_sidebar">


	<ul id="l_sidebarwidgeted">
			<li id="recent-posts" class="widget widget_recent_entries">			
			[COLOR="DarkGreen"]<h2 class="widgettitle">Letzte Beiträge</h2>[/COLOR]
			<ul>
						<li><a href="http://www.witterstaetter.de/blog/2007/06/05/event-calendar/">Event Calendar </a></li>


...

Alles anzeigen

ändern in:

Code

<div id="l_sidebar">
[COLOR="DarkGreen"]<h2 class="widgettitle">Letzte Beiträge</h2>[/COLOR]
	<ul id="l_sidebarwidgeted">
						<li><a href="http://www.witterstaetter.de/blog/2007/06/05/event-calendar/">Event Calendar </a></li>


...

Schwer zu erklären, mache aber vorher unbedingt ein Backup, da ein paar Änderungen notwendig sind, so wie du es willst.

hewi

In welcher Datei soll ich die h2 vor die Liste setzen?

Habe nämlich die ganzen Codes gelöscht (da durch Widget überflüssig)

P.S.: Wenn das klappt sind ALLE meine Probleme erledigt. Denn der Kalender ist jetzt auch in Ordnung - somit hat sich dann ein weiteres Problem erledigt.

Alphawolf

Du hast eine PN.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar links verändern

Jetzt mitmachen!