Zurzeit bin ich dran ein Layout mit 2 Sidebars zu entwerfen. Mittlererweile habe ich es auch geschafft beide anzeigen zu lassen. Nur leider verschiebt sich die rechte Sidebar nach unten. Habe ein Screenshot angehängt, da es noch nicht online ist.
hier mein Index.php
PHP
<?php get_header(); ?>
<!--content-->
<div id="page">
<!--left-col-->
<div id="contentwrapper">
<div id="content">
<!--post-->
<?php query_posts($query_string.'&cat=-3&&order=DESC');
while (have_posts()) : the_post(); ?>
<div class="entry" id="post-<?php the_ID(); ?>">
<p class="datum"><span class="content">Posted by: <?php the_author() ?><br />Tag: <?php the_category(', '); ?>
<br />Date: <?php the_time('jS, M, Y') ?></span></p>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div style="clear:both;"></div>
<div class="entry-content">
<?php the_content(''); ?>
</div>
<div class="commentpost"><a href="http://s803.photobucket.com/albums/yy314/chrissy2504/Startingdays/?action=view&current=comments.png" target="_blank"><img src="http://i803.photobucket.com/albums/yy314/chrissy2504/Startingdays/comments.png" border="0" alt="Photobucket"></a> <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?></div>
</div>
<!--post-end-->
<?php endwhile; ?>
<div class="navigation">
<?php if(function_exists('wp_paginate')) {
wp_paginate();
} ?>
</div><!--left-col-end-->
<?php get_sidebar('left'); ?>
<?php get_sidebar('right'); ?>
</div><!--content-end--><?php get_footer(); ?>
</div><!--wrapper-end-->
Alles anzeigen
und mein CSS:
Code
/*Sidebar style*/
.left {
margin-left: 35px;
}
.left .title {
color: #FF9539;
font-family: century gothic ;
font-size: 11pt;
text-transform: uppercase;
text-align: center;
text-shadow: #000 1px 1px;
}
.left .inhalt {
color: #ffffff;
background-color:#4B4B4B;
font-family: verdana;
font-size: 7pt;
text-align: left;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
width: 300px;
}
.left .inhalt ul{
margin: 0;
list-style-type: none;
}
.left .inhalt p {
margin-left: 2px;}
.left h2 {
font-family: Trebuchet MS;
margin: 5px 0px 0px 0px;
color: #949050;
text-align: left;
text-transform: uppercase;
font-size: 8pt;
letter-spacing: 2px;
word-spacing: 1px;
}
.left .clear {
clear: both;
padding: 10px 0 0 0;
}
.left a{
color: #BF5677;
text-transform: uppercase;
font-family: verdana;
font-size: 7pt;
}
.right {
margin-left: 915px;
}
.right .title {
color: #FF9539;
font-family: century gothic ;
font-size: 11pt;
text-transform: uppercase;
text-align: center;
text-shadow: #000 1px 1px;
}
.right .inhalt {
color: #ffffff;
background-color:#4B4B4B;
font-family: verdana;
font-size: 7pt;
text-align: left;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
width: 300px;
padding: 0px 0px 5px 10px;}
.right .inhalt ul{
margin: 0;
list-style-type: none;
}
.right .inhalt p {
margin-left: 2px;}
.right h2 {
font-family: Trebuchet MS;
margin: 5px 0px 0px 0px;
color: #949050;
text-align: left;
text-transform: uppercase;
font-size: 8pt;
letter-spacing: 2px;
word-spacing: 1px;
}
.right .clear {
clear: both;
padding: 10px 0 0 0;
}
.right a{
color: #BF5677;
text-transform: uppercase;
font-family: verdana;
font-size: 7pt;
}
Alles anzeigen
Bin die Suche hier auch schon durchgegangen, konnte aber nichts brauchbares finden. Ich hoffe ihr könnt mir helfen. Vielen lieben Dank schonmal im voraus und ein schönes Wochenende