Forums

Add second side bar (5 posts)

  1. nmknmk
    Member
    Posted 2 months ago #

    I moved the sidebar of my theme from right to left, but i now wish to add a 2nd sidebar on the right. I am currently stuck with the side bar at the bottom of the page. Could anyone tell me what I'm doing wrong? Thanks in advance.

    site - http://cruxof.it/blog/

    I tried adding margin-left: to right side bar to push it over, as i did with orginal move, but it still stays at bottom.

    Style sheet

    * {
    	margin: 0 auto;
    }
    body {
    	background: #ffffff;
    	color: #000000;
    	font-family: Georgia, Helvetica, sans-serif;
    	font-size: .75em;
    
    }
    a {
    	color: #000000;
    	text-decoration: none;
    }
    cite {
    	font-style: normal;
    }
    cite a {
    	color: #ffffff;
    	font-style: normal;
    }
    code {
    	background: #efefef;
    	border: 1px solid #dfdfdf;
    	display: block;
    	font-size: 1.1em;
    	line-height: 1.3em;
    	padding: 10px; */
    }
    h2 {
    	font-size: 1.5em;
    	font-weight: normal;
    }
    p {
    	line-height: 1.5em;
    	margin: 1.2em auto;
    	text-align: left;
    }
    pre {
    	background: #efefef;
    	border: 1px solid #dfdfdf;
    	display: block;
    	font-size: 1.1em;
    	line-height: 1.3em;
    	overflow: auto;
    	padding: 10px;
    
    }
    textarea {
    	font-family: "Georgia, Helvetica, sans-serif;"
    	font-size: 1.2em;
    }
    
    /* -header- */
    
    #headerwrap {
    	margin: 20px 0 20px 0;
    	width: 100%;
            border: 0;
    }
    #header {
    	clear: both;
    	width: 800px;
    }
    .bloginfo {
    	width: 700px;
            border: 0;
    }
    .bloginfo a {
            background-color: transparent;
            border: 0;
    }
    .searchform {
    	width: 220px;
    }
    
    /* -content- */
    
    }
    #content {
    	float: left;
    	width: 500px;
    }
    /* -adjust to page content width- */
    #contentwrap {
    	width: 880px;
    }
    
    /* -post and entries- */
    
    .post {
    	margin-bottom: 20px;
            margin-left: 160px;
    
    }
    .post a {
    	color: #000000;
    	text-decoration: none;
    }
    .post a:hover {
    	color: #00ffff;
    }
    .post blockquote {
    	background: #efefef;
    	border: 0;
    	margin: 1.2em auto;
    	padding: 0.1em 1em;
    }
    .post embed, .post img, .post object {
    	display: block;
    	margin: 1em auto;
    	max-width: 500px;
    }
    .post img, .post object {
    	/* background: #efefef;
    	border: 1px solid #dfdfdf;
    	padding: 2px; */
    }
    .post embed.alignleft, .post img.alignleft, .post object.alignleft {
    	margin: 0 10px 10px 0;
    }
    .post embed.alignright, .post img.alignright, .post object.alignright{
    	margin: 0 0 10px 10px;
    }
    .post h2 {
            color: #ffffff;
            /* border-top: 2px solid #000000; */
    	font-size: 1.5em;
    	/* font-weight: bold; */
    
    	text-transform: none;
            background-color: transparent;
    }
    .post h3 {
            color: #acacac;
    }
    .post h2 a {
    	color: #000000;
    }
    .post h2 a:hover {
    	color: #00FFFF;
    }
    .post ul, .post ol {
    	line-height: 0em;
    	margin: 1em auto;
    }
    .post .wp-smiley {
    	border: none;
    	display: inline;
    	margin: 0;
    }
    .postmetadata-top {
    	border-bottom: 1px dotted #dfdfdf;
    	margin-top: 0;
    	padding-bottom: 0em;
            padding-left: 5px;
    	text-transform: uppercase;
    }
    .postmetadata-bottom {
    	margin: 0em;
    	text-transform: uppercase;
    }
    .post .comment-button {
    	margin: 1.2em 0 1.2em 0;
    	text-transform: uppercase;
    }
    .post .comment-button a {
    	background: #000000;
    	color: #ffffff;
    	padding: 3px 10px 3px 10px;
    }
    .post .comment-button a:hover {
    	color: #00FFFF;
    }
    
    /* -post tables- */
    
    .post table {
    	background-color: transparent;
    	line-height: 1.5em;
    	margin: 0em auto;
            border-collapse: collapse;
            width: 100%;
    }
    .post th, .post td {
            border-top: 1px solid #000000;
    	background: transparent;
    
    }
    
    /* -sidebar- */
    
    #sidebar1wrap,
    #sidebar2wrap {
    	float: left;
    	margin-bottom: 20px;
    
    }
    #sidebar1 {
    	width: 140px;
                float: left;
    }
    
    #sidebar2 {
    	width: 140px;
            margin-left: 680px;
            float: left;
    }
    
    #sidebar1 a, #sidebar1 li.recentcomments, #sidebar1 .textwidget,
    #sidebar2 a, #sidebar2 li.recentcomments, #sidebar2 .textwidget {
    	border-bottom: 1px dotted #dfdfdf;
    	color: #000000;
    	display: block;
    	padding: 2px 2px 2px 10px;
    }
    #sidebar1 a:hover,
    #sidebar2 a:hover {
    	background: #000000;
    	color: #00ffff;
    }
    #sidebar1 h2,
    #sidebar2 h2 {
    	/ *background: #dfdfdf;
            display: block; */
            color: #000000;
            border-bottom: 1px solid #000000;
    	font-size: 1em;
    	/* font-weight: bold; */
    	padding-left:10px;
    	text-transform: none;
    }
    #sidebar1 h2.small,
    #sidebar2 h2.small {
    	margin: 10px 0 10px 0;
    }
    #sidebar1 li,
    #sidebar2 li {
    	list-style: none;
    }
    #sidebar1 li.recentcomments:hover,
    #sidebar2 li.recentcomments:hover {
    	background: #000000;
    	color: #ffffff;
    }
    #sidebar1 li.recentcomments:hover a,
    #sidebar2 li.recentcomments:hover a {
    	color: #ffffff;
    }
    #sidebar1 li.recentcomments a,
    #sidebar2 li.recentcomments a {
    	border: none;
    }
    #sidebar1 li.widget_categories ul li,
    #sidebar2 li.widget_categories ul li {
    	border-bottom: 1px dotted #dfdfdf;
    	display: block;
    	padding: 3px 3px 3px 10px;
            font-size: 0em;
    }
    #sidebar1 li.widget_categories ul li a,
    #sidebar2 li.widget_categories ul li a {
    	border-bottom: none;
    	display: inline;
    	padding: 0;
    }
    #sidebar1 li.widget_categories ul li:hover, #sidebar1 li.widget_categories ul li:hover a,
    #sidebar2 li.widget_categories ul li:hover, #sidebar2 li.widget_categories ul li:hover a {
    	background: #000000;
    	color: #ffffff;
    }
    #sidebar1 select,
    #sidebar2 select {
    	margin: 3px 0 3px 0;
    	width: 100%;
    }
    #sidebar1 small,
    sidebar2 small {
    	text-transform: uppercase;
    }
    #sidebar1 .textwidget,
    #sidebar2 .textwidget {
    	padding: 3px 0 3px 0;
    }
    #sidebar1 .textwidget img,
    #sidebar2 .textwidget img {
    	display: block;
    }
    #sidebar1 .textwidget a,
    #sidebar2 .textwidget a {
    	display: inline;
    }
    #sidebar1 ul,
    #sidebar2 ul {
    	margin: 0;
    	padding: 0;
    }
    #sidebar1 ul.children a, #sidebar1 li.page_item ul li.page_item a,
    #sidebar2 ul.children a, #sidebar2 li.page_item ul li.page_item a {
    	padding-left: 20px;
    }
    #sidebar1 ul.children ul.children a, #sidebar1 li.page_item ul li.page_item ul li.page_item a,
    #sidebar2 ul.children ul.children a, #sidebar2 li.page_item ul li.page_item ul li.page_item a {
    	padding-left: 30px;
    }
    #sidebar1 ul.children ul.children ul.children a, #sidebar1 li.page_item ul li.page_item ul li.page_item ul li.page_item a,
    #sidebar2 ul.children ul.children ul.children a, #sidebar2 li.page_item ul li.page_item ul li.page_item ul li.page_item a {
    	padding-left: 40px;
    }
    #sidebar1 .widget_text a, #sidebar1 .widget_text a img,
    #sidebar2 .widget_text a, #sidebar2 .widget_text a img {
    	border: none;
    	padding: 0;
    }
    #sidebar1 .widget_tag_cloud,
    #sidebar2 .widget_text a, #sidebar2 .widget_text a img {
    	border-bottom: 1px dotted #dfdfdf;
    	margin-bottom: 10px;
    	padding-bottom: 3px;
    }
    #sidebar1 .widget_tag_cloud a,
    #sidebar2 .widget_tag_cloud a {
    	border: none;
    	display: inline;
    	padding: 0 3px 0 3px;
    }
    #sidebar1 .widget_tag_cloud h2,
    #sidebar2 .widget_tag_cloud a {
    	margin-bottom: 10px;
    }
    #sidebar1 .widget_rss h2.small a,
    #sidebar2 .widget_rss h2.small a {
    	border: none;
    	display: inline;
    	color: #ffffff;
    	padding: 0;
    }
    #sidebar1 .widget_rss h2.small a img,
    #sidebar2 .widget_rss h2.small a img {
    	display: none;
    }
    #sidebar1 .widget_rss ul li {
    #sidebar2 .widget_rss h2.small a img {
    	border-bottom: 1px dotted #dfdfdf;
    	display: block;
    }
    #sidebar1 .widget_rss ul li a.rsswidget,
    #sidebar2 .widget_rss ul li a.rsswidget {
    	border: none;
    	display: block;
    	padding: 3px 3px 3px 10px;
    }
    #sidebar1 .widget_rss ul li cite,
    #sidebar2 .widget_rss ul li cite {
    	color: #00FFFF;
    	font-size: .75em;
    	text-transform: uppercase;
    	padding-bottom: 3px;
    }
    #sidebar1 .widget_rss ul li .rss-date,
    #sidebar2 .widget_rss ul li .rss-date {
    	color: #00FFFF;
    	display: block;
    	font-size: .75em;
    	text-transform: uppercase;
    }
    #sidebar1 .widget_rss ul li .rssSummary,
    #sidebar2 .widget_rss ul li .rssSummary {
    	padding-bottom: 3px;
    }
    
    /* -sidebar calendar- */
    
    #sidebar1 .widget_calendar h2 {
    	display: none;
    }
    #sidebar1 .widget_calendar caption {
    	background: #000000;
    	color: #ffffff;
    	font-size: 1em;
    	font-weight: bold;
    	margin: 20px 0 10px 0;
    	padding: 10px;
    	text-align: left;
    }
    #sidebar1 .widget_calendar table {
    	border: 1px dotted #dfdfdf;
    	width: 100%;
    }
    #sidebar1 .widget_calendar table a {
    	border: none;
    	color: #000000;
    	display: block;
    	padding: 3px;
    }
    #sidebar1 .widget_calendar table a:hover {
    	background: #000000;
    	color: #ffffff;
    }
    #sidebar1 .widget_calendar table td {
    	color: #dfdfdf;
    	text-align: center;
    }
    #sidebar1 .widget_calendar table th {
    	color: #000000;
    	text-align: center;
    }
    
    /* -comments- */
    
    #comments, #respond {
    	background: #ffffff;
    	width: 510px;
    }
    #commentpages {
    	margin-bottom: 20px;
    }
    ul#commentlist {
    	list-style: none;
    	margin-bottom: 20px;
    	padding: 0;
    }
    ul#commentlist li.comment {
    	border-top: 1px dotted #dfdfdf;
    	padding: 20px 0 20px 0;
    }
    ul#commentlist ul.children {
    	list-style: none;
    	padding: 0 0 0 20px;
    }
    ul#commentlist ul.children li {
    	border-top: 1px dotted #dfdfdf;
    	margin: 10px 0 0 0;
    	padding: 10px 0 0 0;
    }
    ul#commentlist li blockquote {
    	background: #efefef;
    	border: 1px solid #dfdfdf;
    	margin: 1.2em auto;
    	padding: 0.1em 1em;
    }
    /*ul#commentlist a {
    	color: #00FFFF;
    }*/
    h2.comments {
    	background: #000000;
    	color: #ffffff;
    	display: block;
    	font-size: 1em;
    	font-weight: bold;
    	margin-bottom: 20px;
    	padding: 10px;
    	text-transform: uppercase;
    }
    h2.respond {
    	background: #000000;
    	color: #ffffff;
    	display: block;
    	font-size: 1em;
    	font-weight: bold;
    	margin-bottom: 20px;
            margin-left: 110px;
    	padding: 10px;
    	text-transform: uppercase;
    }
    h2.commentpages {
    	background: #000000;
    	color: #ffffff;
    	display: block;
    	font-size: 1em;
    	font-weight: bold;
    	margin-bottom: 20px;
    	padding: 10px;
    	text-transform: uppercase;
    }
    small a.comment-edit-link {
    	color: #00FFFF;
    	text-transform: uppercase;
    }
    #commentlist div .avatar {
    	background: #efefef;
    	border: 1px solid #dfdfdf;
    	float: left;
    	margin: 0 10px 10px 0;
    	padding: 3px;
    }
    .vcard .fn, .vcard .says {
    	font-weight: bold;
    }
    .comment-meta {
    	font-size: .8em;
    	margin-bottom: 40px;
    	text-transform: uppercase;
    }
    .comment-meta a {
    	color: #000000;
    }
    .comment-meta a.comment-edit-link {
    	color: #00FFFF;
    }
    .reply {
    	margin-top: 20px;
    	text-align: left;
    }
    li.depth-1 #respond {
    	margin: 0 0 -20px 0;
    }
    li.depth-2 #respond {
    	margin: 0 0 -20px -20px;
    }
    li.depth-3 #respond {
    	margin: 0 0 -20px -40px;
    }
    li.depth-4 #respond {
    	margin: 0 0 -20px -60px;
    }
    li.depth-5 #respond {
    	margin: 0 0 -20px -80px;
    }
    #commentform {
    	padding-bottom: 20px;
    	width: 550px;
    }
    #commentform a {
    	color: #00FFFF;
    }
    #commentform input, #commentform textarea {
    	background: #efefef;
    	border: 1px solid #dfdfdf;
    	color: #000000;
    	padding: 3px;
    }
    #commentform #commentbox {
    	height: 100px;
    	width: 510px;
    }
    #commentform #submit {
    	color: #000000;
    	margin-top: 20px;
    }
    #commentform small {
    	text-transform: normal;
    }
    .commentlinks a {
    	color: #000000;
    	padding: 5px 10px 5px 10px;
    }
    .commentlinks a:hover {
    	background: #000000;
    	color: #ffffff;
    }
    .commentlinks .current {
    	background: #000000;
    	color: #ffffff;
    	padding: 5px 10px 5px 10px;
    }
    
    /* -search form- */
    
    #s {
    	background: #ffffff url("images/mag.png") top left no-repeat;
            border: 1px solid #000000;
    	color: #000000;
    	padding: 3px 3px 3px 22px;
    	width: 150px;
    }
    #searchsubmit {
    	display: none;
    }
    
    /* -footer- */
    
    #footer {
    	border-top: 1px solid #000000;
    	clear: both;
    	padding: 20px 0 20px 0;
    	text-align: right;
    	width: 880px;
    }
    #footer a {
    	color: #000000;
    }
    #footer small {
    	text-transform: uppercase;
    }
    
    /* -misc and universal- */
    
    .navlink {
    	background: #ffffff;
    	color: #000000;
    	display: block;
    	margin: 20px 0 20px 0;
    	padding: 10px;
    	text-align: right;
    }
    .navlink a:hover {
    	color: #00FFFF;
    }
    .uppercase {
    	text-transform: uppercase;
    }
    .wp-smiley {
    	border: none;
    	display: inline;
    	margin: 0;
    }
    
    /* -floats - */
    
    .aligncenter, div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    .alignleft {
    	float: left;
    }
    .alignright {
    	float: right;
    }

    Main index

    <?php get_header();?>
    <?php include ('sidebar1.php'); ?>
    <div id="content">
    		<?php if (have_posts()) : ?>
    		<?php while (have_posts()) : the_post(); ?>
    		<div class="post" id="post-<?php the_ID(); ?>">
    			<TABLE border="0" valign="bottom"><tr><td align="left"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php edit_post_link('- Edit Post'); ?></h2></td>
                             <td align="right">
                              <h3><font size="-2"><?php the_date('d.M.Y'); ?></font></h3></td></tr>
                             </TABLE>
    			<div class="postmetadata-top"><small>Filed In: <?php the_category(', '); ?></small></div>
    			<?php the_content('Read more &rsaquo;'); ?>
    
                          <div class="postmetadata-bottom"><small>Tags: <?php the_tags('', ', '); ?><br />
                          Written by: <?php the_author_posts_link(); ?></small></div>
    
                          <div align="right" class="comment-button">
                          <small><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></small></div>
    
    		</div>
    		<?php endwhile; ?>
    		<?php endif; ?>
    		<div class="navlink">
    			<?php posts_nav_link(' <font color="#a5a5a5">&mdash;</font> ', '&lsaquo; Newer Posts', 'Older Posts <font color="#a5a5a5">&rsaquo;</font>'); ?>
    		</div>
    	</div>
    	<?php include ('sidebar2.php'); ?>
    <?php get_footer();?>
  2. nmknmk
    Member
    Posted 2 months ago #

    Sorry, link is actually http://cruxof.it/blogtest/ moved to test area

  3. nmknmk
    Member
    Posted 2 months ago #

    Anyone?

  4. aianta03
    Member
    Posted 2 months ago #

  5. krembo99
    Member
    Posted 2 months ago #

    what you are doing wrong is basically 2 things :
    1. you have 2 (yes, two) content divs nested one inside the other, but same id)
    2. your css code is full of errors, which makes it very difficult for the browser to understand what you want, mainly because you have a lot of not closed rules, one of which , at line 339 more or less, regards also your sidebar (among others)

Reply

You must log in to post.

About this Topic