WordPress.org

Ready to get started?Download WordPress

Forums

Right sidebar is moved under the content (2 posts)

  1. Startingdays
    Member
    Posted 1 year ago #

    Hello everybody. Now I´m working on my first 3 column layout. I have a left and a right sidebar. The right one is on the bottom of the content.
    Here is a link to the screenshot, because its still on my PC

    http://i22.photobucket.com/albums/b346/Phelpsaholics/rightsidebar.jpg

    Here is the code for the index.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-->

    and here for the css style

    /*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: 910px;
     }	
    
    .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;
    }

    I´ve trying to solve the problem since yesterday and I couldn´t find something. Thank you in advance

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    try to ask at a css forum like http://csscreator.com/forum

    or try working with a browser inspection tool such as Firebug to find out what is formatting the sidebar.

Topic Closed

This topic has been closed to new replies.

About this Topic