Sidebar CSS

Hallo an alle,

allmählich steige ich immer mehr mit Wordpress durch und langsam aber sicher komm ich hinter das Potential von CSS. Jedoch find ich die CSS Definitionen für den Sidebar Bereich so umständlich und etwas kompliziert, daß ich nicht mehr weiter komme.

Hier mal der Link zu meinem Blog:

http://www.rookiestripes.com/webstripes/blog/

Und hier mal der Teil aus meiner CSS Datei:

/***  ---------------------------------Definition Sidebar Container ------***/
#menu {
	background:#CCCCCC;
	width:150px;
        height: 100%;
        float:right;
}
/***  ---------------------------------Ende Sidebar Container --------------------------------***/






/***  ---------------------------Definition Sidebar Menü------------------------------------***/
#menu ul li {
	color: 			#3399FF;
	font-weight:		bold;
	list-style-type:	none;
        text-align:             left;
	margin: 		2px;
	padding-left:		3px;
        letter-spacing:         0;
        border:                 solid red 1px;
	text-transform:		uppercase;
}


#menu ul li ul {
        text-align:             left;
        letter-spacing:         0;
}


/* Style Definition für Überschrift (h2) URL Pool*/
#menu ul h2 {
        font-size: 12px;
        color: green;
        background-color: #FFF;
        border-bottom: dashed black 1px;


        font-weight: bold;
}
        


/***  sidebar links  ***/
#menu ul li a {
        font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration:none;
        margin-top:0;
	padding-left:12px;
        letter-spacing:0;
}


#menu ul li a:hover {
	border-bottom:1px solid #000;
}




#menu form {
	margin:0 0 0 13px;
}


/***  the search field  ***/
#menu input#s {
	width:80%;
	background:#FFFFFF;
	border:1px solid #000000;
	color:#000;
}




/***  ---------------------------Ende Sidebar Menü------------------------------------***/

Wäre nett,w enn mir mal jemand genau die CSS Style erklärt, die den Sidebar Bereich bestimmen.

Cool, mal wieder danke für die prompte Hilfe Monika. Hab mich zu aller erst über die Sache mit dem Flash Banner hergemacht und folgende Lösung gefunden:

In der Header.php habe ich zwischen das Header <div>,also das Teil mit der ID header, folgendes Code Schnipsel gepackt:

<object type="application/x-shockwave-flash" data="http://www.deineurl.com/banner.swf"
width="600" height="129" id="Taler" title="Banner">
<param name="movie" value="http://www.deineadresse.com/banner.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<div>[Blockierte Grafik: http://www.deineadresse.com/banner.jpg]</div>
</object>

In der style.css muß man bei den Definitionen für den Header Bereich nix einfügen, da das Flash Teil ja schon in der header.php mit drin steht.
Wenn man jetzt die Seite über den W3.org Validator laufen läßt, dann erscheinen auch keine Fehler mehr in Verbindung mit Flash.

Ok, das einzige Problem das noch bleibt, ist die Geschichte mit den CSS Definitionen für den Sidebar Bereich.

Der DIV Container, welcher den Sidebar enthält, trägt die ID #menu (also jetzt hier in meinem Fall).

Wenn ich mir nun den Quellcode anschaue, dann schaut es wie folgt aus:

<div id="menu">
[img]bilder/nav_top.jpg[/img]




<ul>
<li id="search">
<span id="sbheader">


Suchen:


</span>
<form action="/webstripes/blog/index.php" method="get" id="searchform">
<div>
<input type="text" size="15" id="s" name="s">




<input type="submit" value="Suchen" name="submit">
</div>
</form>


[/list]
[img]bilder/dullthings_right.jpg[/img]
<ul>
<li id="linkcat-1">
<h2>


URL Pool


</h2>
<ul>
[*]
<a title="Tutorial Seite" href="http://www.pixel2life.com">


Pixel2Life


</a>


[*]
<a title="Tutorial Seite" href="http://www.good-tutorials.com">


Good Tutorials


</a>

Jetzt müßte ja eigentlich das Wort "Suchen", welches oben die Class "sbheader" zugewiesen bekommt, den Style übernehmen,w elcher in der style.css definiert wurde. Also wenn ich jetzt schreibe

.sbheader {
color: blue;
font-weight: bold;
text-decoration: underline;
}

müßte ja eigentlich, wenn man von der Kaskade ausgeht, dieser Style als erstes gerendert werden, weil er ja näher am Element dran ist. Oder muß ich schreiben:

#menu .sbheader ??????

Ich weiß in diesem Fall nicht genau, wie ich ein Element gezielt ansprechen kann, welches sich in einem div Container befindet, der die ID #menu trägt. Es muß ja irgendwie möglich sein, zu bestimmen, daß beispielsweise alle <ul> und [*] Tags, die sich innerhalb von #menu befinden, eine Klasse zugewiesen bekommen, oder?

Danke, hat geklappt. Hab mir den ganzen #menu Teil noch mal genau angeschaut und überschüssige Definitionen einfach gelöscht, damit es übersichtlicher wird.