Layout versetzt bei Wordpress Blog

Leola13

Erfahrenes Mitglied
Hai,

ich habe seit kurzem WordPress installiert und versuche derzeit die Optik ein wenig anzupassen.

Leider ist der Header Bereich oben links nicht "gross" genug und die Sidebar ist unten zu "kurz".

Anbei einmal der Code der meiner Meinung nach dafür verantwortlich ist. Ich werde irgendwie nicht schlau daraus.


CSS

HTML:
**************** Body *********************/
body {background:#1d1d1d; font:12px Georgia, "Times New Roman", Times, serif;}
#wrapper {width:980px; margin:auto;}
#left {width:710px; float:left; position:relative;}

/**************** Links *********************/
a:link, a:visited {text-decoration:none; color: #900;}
a:hover {color:#000;}

/**************** Header *********************/
#header h1 {font-weight:normal; text-align:center; padding:10px 0 10px 0;}
#header h1 a{color:#FFF; text-transform:uppercase;}
#header h2 {font-size:12px; font-style:italic; font-weight:normal; color:#CCC; text-align:center; background-color:#1d1d1d; padding:6px 0 6px 0;}

/**************** Sidebar *********************/
.sidebar {padding:60px 15px;}
.sidebar h2 {color:#FFF; font-size:15px; padding-bottom:10px; text-transform:uppercase; font-weight:normal;}
.sidebar ul {padding-bottom:20px;}
.sidebar ul li a {display:block; padding:3px; color:#FFF; text-decoration:underline; font-style:italic;}

/**************** Blog *********************/
#blog {background:url(images/bg.jpg) repeat-y; margin-top:160px; min-height:700px;}
.entry { padding:10px 10px 10px 210px;}
.post { padding-bottom:10px; margin-bottom:20px;}
.post h2 { margin-bottom:15px; border-bottom:3px solid #0d0d0d; font-weight:normal;}
.post h2 a {font-style:italic; color:#0d0d0d;}
.post h2 a:hover {color:#ccc;}
.imgpost {float:left; width:150px; height:150px; border:5px solid #f2f2f2;}
.imgpost:hover { filter: alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}
.content { line-height:22px; width:320px; float:left; margin-left:10px;}
.singlecontent h1, .singlecontent h2, .singlecontent h3, .singlecontent h4, .singlecontent h5, .singlecontent h6 {padding:10px 0 10px 0; font-weight:normal; font-style:italic; border:none; margin:0;}
.singlecontent p {margin-bottom:15px;}
.singlecontent ul {margin:10px;}
.singlecontent ul li {padding-left:20px; line-height:22px; background:url(images/bullet.jpg) 0px 6px no-repeat;}
.singlecontent ol li {padding-left:0px; line-height:22px; margin-left:20px; list-style:decimal;}
blockquote {padding-left:10px; margin:20px; border-left:3px solid #841212;}
cite {padding:10px 0 10px 0;}
.meta { border-top:3px solid #841212; padding-top:5px; margin-top:15px; line-height:20px; font-size:11px;}
.meta a:hover {text-decoration: underline;}
.date {color:#999;}
.singlecontent { line-height:22px;}
#ad468 {width:468px; height:60px; position:absolute; top:80px; right:20px;}
#sidebar {width:185px; position:absolute; background-color:#393939; top:30px; left:10px;}
.rmore {padding-top:10px;}
.rmore a {width:300px; background-color:#841212; color:#FFF; padding:5px;}
h2.search {font-size:14px; color:#999; font-weight:normal; padding-bottom:5px; font-style:italic; margin-bottom:20px;}
#right {float:left; width:270px;}

Datei :

HTML:
<div id="header">
<h1><a href="http://www.leola13.de/">leola13</a></h1>
<h2>Fotos, Bildbearbeitung und mehr</h2>
</div><!--header-->
	<ul class="sidebar">

	<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Kategorien</h2>
		<ul>
	<li class="cat-item cat-item-1"><a href="http://www.leola13.de/?cat=1" title="Alle unter Allgemein abgelegten Artikel ansehen">Allgemein</a>
</li>
	<li class="cat-item cat-item-3"><a href="http://www.leola13.de/?cat=3" title="Geschichten die das Leben schreibt">Alltagsgeschichten</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.leola13.de/?cat=5" title="Meine kleinen Spielereien">Bildbearbeitung</a>
</li>

	<li class="cat-item cat-item-4"><a href="http://www.leola13.de/?cat=4" title="Wie der Name schon sagt : Fotos und ihre Geschichten">Foto</a>
</li>
		</ul>
</li>

Bin für jeden Tipp dankbar. Anzusehen unter : http://www.leola13.de/

Danke.

Ciao Stefan
 
Hallo, warum ist om Footer diese class?
Code:
.base { line-height:30px; background-color:#FFF; height:10px;}

Diese macht nämlich den weißen Balken am unteren Ende.

Änder die class einfach so um:

Code:
.base { line-height:30px; background-color:#1d1d1d; height:10px;}

Jetzt müsste der weiße Balken weg sein.

Und wegen der linken Sidebar:

änder diese die Hintergrundgrafik:
http://www.leola13.de/wp-content/themes/impress/images/bg.jpg

in diese:
 

Anhänge

  • bg.jpg
    bg.jpg
    1,2 KB · Aufrufe: 3
Zuletzt bearbeitet:
Hai,

vielen Dank auf den Footer bin ich gar nicht gekommen. Die Farbangabe hab ich beim kontrollieren glatt übersehen.

Die Grafik habe ich selbst geändert (schäm), die vorher weiss - rot - weiss.

Ciao Stefan
 
Zurück