Problem mit CSS

Hallo Zusammen

Ich bin momentan gerade dabei, ein eigenes WordPress-Theme für meinen Blog zu designen, jedoch bin ich bei der CSS-Datei auf einige Probleme gestossen.

Leider habe ich es bisher nicht geschafft, dass die Sidebar so angezeigt wird, wie ich es mir eigentlich vorstelle. Das Problem ist dabei, dass entweder alles inklusive Titel mit der Hintergrundgrafik (z.B.) 15 Pixel vom Rand entfernt ist oder gar nichts. Ich möchhte eigentlich, dass nur der Text/Bilder usw. vom Rand der Sidebar entfernt sind.

Weiterhin wird das Plugin Featplug im Firefox komplett falsch angezeigt. Mit dem Google Chrome hingegen sieht es einigermassen normal aus, jedoch wird dort auch die Titel-Hintergrundgrafik der Sidebar angezeigt.

/* +++++++++++++++++++++ Sidebar +++++++++++++++++++++ */


#featplug {
float: left;
font-size:10px;
padding:0px 15px 15px 15px;
background:none;}


#sidebar {
float: right;
width:328px;
padding:15px 1px 15px 1px;}


#sidebar h2 {
margin-top:15px;
font-size:12px;
color:#000000;
background:url(images/sidebar.png) no-repeat left;}


#sidebar ul {
font-size:10px;
list-style:none;}


#sidebar ul li{
padding:2px 0px 2px 0px;
list-style-image:none;
margin:4px 15px 4px 15px;}

Ausschnitt der Sidebar.php:


<div id="sidebar">


<div id="featplug">
<?php 
if (function_exists('featplug_wp_render_slideshow')): 
 featplug_wp_render_slideshow(300,200,False,5,'numberposts=5');
endif; 
?>
</div>


<ul>
<?php   /* Widgetized sidebar, if you have the plugin installed. */

Hier noch ein Bild, wie die Sidebar ungefähr aussehen sollte (oben) und wie sie momentan aussieht (unten):

http://img3.imagebanana.com/img/qa3780kh/sidebar1.png
http://img3.imagebanana.com/img/cdeqxowz/sidebar2.png

Zum Schluss noch eine andere Frage: Wo genau in der CSS-Datei kann man den Abstand zwischen den einzelnen Einträgen auf der Hauptseite verändern?

Ich würde mich sehr freuen, falls mir jemand bei meinem Problem helfen könnte.

Gruss
Linus

Sorry, das habe ich vergessen. Hier noch der Link zu meinem Blog.

Gruss
Linus

So, das Problem mit dem Abstand zwischen den einzelnen Beiträgen konnte ich mittlerweile lösen (eigentlich hatte ich es bereits am Anfang beim Abschnitt[FONT=monospace] #entry[/FONT] versucht, jedoch wurde in der Vorschau komischerweise nichts anders dargestellt).
Wie ich nun ausserdem herausgefunden habe, wird Featplug auch beim Google Chrome nicht immer korrekt angezeigt.

Falls mir jemand bei der Sidebar helfen könnte wäre ich sehr dankbar. :)

Nein, aktuell ist noch das alte Theme online, das neue ist ja noch nicht ganz fertig ;)

Vielen Dank erstmal für deine Hilfe! :)

Damit ihr die Änderungen sehen könnt, werde ich jedes mal einen Screenshot posten:
http://img3.imagebanana.com/img/44t7c6nb/sidebar.png

#sidebar {
float: right;
width:328px;
padding:15px 1px 15px 1px;}


#sidebar h2 {
margin-top:20px;
font-size:12px;
[COLOR=Red]margin-left: 2px;[/COLOR]
color:#000000;
background:url(images/sidebar.png) no-repeat left;
[COLOR=SeaGreen]margin-left: -15px;[/COLOR]}


#sidebar ul {
font-size:12px;
list-style:none;
[COLOR=SeaGreen]margin: 6px 0px 0px 15px;[/COLOR]}


#sidebar ul li{
padding:2px 0px 2px 0px;
list-style-image:none;}

Jetzt wird neben Featplug einfach noch die oberste Hintergrundgrafik falsch angezeigt. Wie kann ich zudem den Titel um einige Pixel nach rechts verschieben? So wie ich es oben rot markiert habe, funktioniert es leider nicht.

Nun habe ich es auch geschafft, dass Featplug richtig funktioniert. Das Problem war, dass ich den Code des Plugins innerhalb anstatt oberhalb des "Sidebar-Anfangs" eingefügt habe. Dadurch konnte ich auch das Problem mit der ersten Titel-Hintergrundgrafik beheben, welche viel zu weit oben war.

<div id="featplug">
<?php 
if (function_exists('featplug_wp_render_slideshow')): 
 featplug_wp_render_slideshow(300,200,True,5,'numberposts=5');
endif; 
?>
</div>


<div id="sidebar">


<ul>
<?php   /* Widgetized sidebar, if you have the plugin installed. */

Jetzt hätte ich noch eine Frage dazu: Wo genau kann ich die Schriftgrösse/Schriftart usw. von Featplug anpassen? Muss ich dies in der CSS-Datei des Plugins erledigen?

Zudem habe ich auch herausgefunden, weshalb der Abstand bei den HTML-Bereichen kleiner ist als bei den Widgets (siehe Screenshot unten). Das Problem dabei ist, dass immer noch der Platz für eine kleine Grafik wie z.B. ein Punkt "freigehalten" wird. Wie kann ich dies beheben?

/* +++++++++++++++++++++ Sidebar +++++++++++++++++++++ */


#featplug {
float: left;
font-size:10px;
padding:10px 15px 0px 15px;}


#sidebar {
float: right;
width:328px;
padding:0px 1px 15px 1px;}


#sidebar h2 {
margin-top:20px;
font-size:12px;
color:#000000;
background:url(images/sidebar.png) no-repeat left;
margin-left: -15px;}


#sidebar ul {
font-size:12px;
list-style:none;
margin: 6px 0px 0px 15px;}


#sidebar ul li{
padding:2px 0px 2px 0px;}

Noch genausoweit wie vorher bin ich jedoch beim Abstand der Titel vom Rand. Wenn ich es mit margin-left oder so versuche, verschiebt sich leider auch die Hintergrundgrafik um z.B. 2 Pixel nach rechts. (Das zweite margin-left habe ich kurz danach wieder rausgenommen, das habe ich wohl übersehen)

Hier noch der aktuelle Screenshot: http://img3.imagebanana.com/img/wf9j5qrg/sidebar2.png

(Ich weiss, dass der Screenshot nicht viel hilft, aber so könnt ihr wenigstens die Änderungen erkennen. Falls jemand weitere Informationen benötigt, kann ich diese gerne hochladen ;))

Danke noch für den Tipp wegen Firebug, das Addon ist wirklich praktisch.

Gruss
Linus

So, das Design ist jetzt fertig und ist online. Vielen Dank nochmals an maxe für die Hilfe :smile:.

Ein kleines Problem hätte ich allerdings noch: Leider wird die Suchleiste im IE in der Sidebar anstatt auf der Navigationsleiste angezeigt - Wie kann ich dies beheben?

Danke für den Hinweis, sobald ich Zeit habe werde ich versuchen die Probleme zu beheben.

Jetzt wird die Suche zwar auf der Navigationsleiste angezeigt, aber im IE leider am falschen Ort - alle anderen Browser zeigen sie korrekt an. Woran könnte dies liegen?

Gruss
Linus

:lol:

Also bei mir sieht es im IE7 so aus:
http://img3.imagebanana.com/img/o6miyqg/suche.png

Als ich das Suchformular nach oben verschoben habe, musste ich in der style.css das margin anpassen, da es im ff sonst zu weit rechts war.