(Sidebar) Rahmen wird nicht korrekt angezeigt

Moin!

In meiner Sidebar wird der Rahmen nicht korrekt angezeigt, leider finde ich einfach den Fehler nicht.

Rechts zu sehen: http://forum.wordpress-deutschland.org/www.exthdd.de

Hier die index.php:

Zitat

<?php get_header(); ?>
<div class="left">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="left_articles">
<div class="buttons"><a href="<?php comments_link('', FALSE); ?>" class="greenbtn" title="<?php comments_number('0 comments','1 comment','% comments'); ?>"><?php comments_number('0 comments','1 comment','% comments'); ?></a> <a href="<?php the_permalink() ?>" class="bluebtn" title="Read">Read</a></div>

<h2 class="title"><a id="post-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="description">Autor <?php the_author() ?> | <?php the_time('d.m.Y'); ?> | Category <?php the_category(', ') ?><?php edit_post_link('Edit',' | ',''); ?></p>
<?php the_content(''); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
<div>
<div class="alignleft"><?php next_posts_link('&laquo; next') ?></div>
<div class="alignright"><?php previous_posts_link('previous &raquo;') ?></div>
</div>
</div>
<div id="right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : ?>

<div class="boxtop"></div>
<div class="box">

<h2><?php _e('Categories'); ?></h2>
<ul class="contentright">
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>
</ul>
</div>
</div>
<?php endif; ?>
<?php get_footer(); ?>

Alles anzeigen

Ich vermute hier irgendwo den Fehler:

Zitat

<div class="boxtop"></div>
<div class="box">

Hier die Style.css dazu:

Zitat

body { padding: 0 0 0 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.3em; background: #fff; color: #454545; }

blockquote {

margin: 10px 0 0 25px;

padding: 0 20px;

border-left: 3px solid #9ec068;

color: #666;

}

/* links */

a { color: #003B6E; background: inherit; }

a:hover { color: #9EC068; background: inherit; }

/* headings */

h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }

h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }

h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }

h1 a:hover, h2 a:hover { color: #87C154; background: #FFF; }

.title { color: #808080; background: #fff; }

/* lists and form elements */

form { margin: 0; }

input.search { width: 279px; border: none; background: #fff url(images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }

input.button { padding: 3px; }

/* content holder */

#content { margin: 10px auto; width: 960px; }

/* header */

#header { height: 75px; }

#logo { padding: 15px 0 0 8px; }

#logo p { margin: 0; padding: 0 0 0 10px; color: #808080; background: #fff; }

#top_info { float: right; width: 570px; margin: 20px 5px 0 0; text-align: right; }

/* horizontal tabbed menu */

#tabs { background: #fff url(images/tabmenu.gif) no-repeat top left; color: #000; height: 39px; width:inherit;text-align: center; padding: 0; margin: 0; }

#tabs ul {margin:0 auto 0 auto; padding:0; width:inherit; }

#tabs li { display: inline; height: 39px; }

#tabs li a { float: left; background: #fff url(images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }

#tabs li a:hover { background: #fff url(images/barcurrent.gif) no-repeat; color: #000; }

#tabs .current a{ background: #fff url(images/barcurrent.gif) no-repeat; color: #2C71AE; }

#tabs .current_page_item a{ background: #fff url(images/barcurrent.gif) no-repeat; color: #2C71AE; }

.key { text-decoration: underline; }

/* search form */

#search {

color: #000;

clear: both;

background: #fff url(images/searchbg.gif) no-repeat;

padding: 0px 0 25px 5px;

width: 960px;

margin: 0;

}

#search p { padding: 10px 0 0 0; margin: 0; text-align:center;}

/* grey subheader */

.gboxtop { clear: both; height: 8px; background: #dedede url(images/gboxtop.gif) no-repeat; color: #000; }

.gbox { background: #dedede url(images/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }

.gbox p { padding: 7px 0; margin: 0;}

/* left side */

.left { float: left; width: 650px; margin: 0 0 10px 0; }

.left_articles {

margin: 0 20px 50px 10px;

padding: 10px 0 0 0;

border-bottom: 1px dotted #ccc;

color: #000;

background: #fff;

}

.left_articles img, left img {

margin: 0px;

padding: 12px;

background-image: url(images/shadow.gif);

background-repeat: no-repeat;

background-position: left bottom;

}

.left_page { float: left; width: 100%; margin: 0 0 10px 0; }

.left_articles_page {

margin: 0 20px 50px 10px;

padding: 10px 0 0 0;

color: #000;

background: #fff;

}

.calendar { height: 50px; float: left; background: #fff url(images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 9px; color: #808080; }

.calendar p { padding: 0; margin: 0; }

.description { padding: 0 0 2px 0; margin: 0 10px 5px 5px; border-bottom: 1px dotted #ccc; }

.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }

.title { width: 380px; margin-left: 10px; }

.alignright {

float: right;

}

.alignleft {

float: left

}

/* comments*/

.commentlist li.alt {

background-color:#FFFFE7;

}

.commentlist {

padding: 0;

text-align: justify;

}

.commentlist li {

margin: 15px 0 3px;

padding: 5px 10px 3px;

list-style: none;

background: #f3f3f3;

}

.commentlist p {

margin: 10px 5px 10px 0;

}

#commentform p {

margin: 5px 0;

}

.nocomments {

text-align: center;

margin: 0;

padding: 0;

}

.commentmetadata {

margin: 0;

}

/* comments */

/* sidebar */

#sidebar { }

.sidebar { float: left; width: 230px; margin: 0 12px 15px 15px; color: #5d5d5d; text-align:left; padding-left:50px; }

.smallboxtop { height: 14px; background: #fff url(images/smallboxtop.gif) no-repeat; color: #000; }

.smallbox { background: #f00 url(images/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; }

.smallbox p { padding: 0; margin: 0; }

.sidebar ul { margin: 0; padding : 0; list-style : none; }

.sidebar li { margin: 0 0 0 0; padding : 0; list-style : none; }

.sidebar li ul li{ margin: 0 0 0 10px; padding : 0; list-style : none; }

/* right side */

#right {

float: right;

width: 295px;

margin: 0 0 10px 0;

}

.boxtop { height: 19px; background: #fff url(images/boxtop.gif) no-repeat; color: #000; }

.box { background: #fff url(images/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }

.box p { padding: 0; margin: 0;}

.image { float: left; margin: 0 9px 3px 0; }

#right ul {

padding: 0.1em;

margin: 1.5em 0px;

border-top: 1px solid #88C354;

}

#right ul li {

border-bottom: 1px solid #88C354;

list-style-type: none;

margin: 0px;

padding: 0.5em;

}

#right ul li ul {

padding: 0;

margin: 0 0 0 20px;

border: 0;

}

#right ul li ul li {

list-style-type: none;

margin: 0;

padding: 0;

border: 0;

}

#right a {

color: #003B6E;

text-decoration: none;

}

#right a:hover {

color: #9EC068;

}

ul.contentright {

font-size: 1em;

background-color:#fff;

border-top: 1px solid #88C354;

list-style-type: none;

margin: 1.5em 0px;

padding:5px;

}

ul.contentright li {

border-bottom: 1px solid #88C354;

list-style-type: none;

margin: 0px;

padding: 0.5em;

}

ul.contentright a {

color: #003B6E;

text-decoration: none;

}

ul.contentright a:hover {

color: #9EC068;

}

ul.contentright .datea{

color: #666;

padding: 0px 1.5em 0px 10px;

}

/* misc */

.buttons { text-align: right; padding: 4px 3px 0 0; width:160px; }

.left_articles .buttons { float: right; height: 20px; }

.bluebtn { background: #488EB2 url(images/bluebtn.gif) no-repeat; padding: 0; margin: 0; color: #fff; text-decoration: none; display:block; float:left; width:57px; height:19px; text-align: center; line-height:15px;}

.greenbtn { background: #87BF55 url(images/greenbtn.gif) no-repeat; padding: 0; margin: 0; color: #fff; text-decoration: none; display:block; float:right; width:100px; height:19px; text-align: center; line-height:15px; }

.bluebtn:hover { background: #D0D0D0 url(images/hoverbtn.gif) no-repeat; color: #fff; }

.greenbtn:hover { background: #D0D0D0 url(images/hoverbtnlong.gif) no-repeat; color: #fff; }

/* footer */

.footer { clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #efefef; }

#site_content {position: absolute;left: -10000px;};

Alles anzeigen

Ich hoffe ihr könnt mir helfen.

Beste Grüße aus Hamburg,
Kai

Zitat von Whoppy

Das liegt daran, das für den Rahmen eine Grafik mit einer festen Größe von 292*800px festgelegt ist. Deine Vielzahl an Kategorien sprent nun diesen Rahmen von 800px.

*schluck* ok, das mit dem CSS3 sieht SUPER aus, da ich aber mal so gar keine Ahnung davon habe, muss ich mir das erst noch mal anschauen :)

Kannst Du mir sagen, wo ich die 800px festgelegt habe? Irgendwie finde ich die nicht. :(
Oder magst Du mir verraten, wie das geht, wie dann meine index.php aussehen müsste?

<div class="boxtop"></div>
<div class="box"></div>
<div class="boxbottom"></div>

WoW, das ist ja echt SUPER, dass Du das herausgefunden hast :)

Danke dafür!

*jubel*

Vielen Dank!