HTML coding for sidebar

I just ran into this problem the other day and found a fix. The only way to achieve this is through the use of a background image. Some people think if you use the following css: #sidebar {height: 100%;} that it would work but it actually doesn’t. The sidebar after all stretches only as long as the content inside it. So anyway back to the solution.

What you need to do is create a an image that is the same width and color as you sidebar (make it real small in height). I’m not sure how wide your sidebar is but suppose it’s 300px and I just checked and your sidebar’s color seems to be #323636. So what you need to do is use an image editing program like photoshop, fireworks, gimp or even paint and create a rectangle the same width as your sidebar and fill it in with the #323636 color. Then open your stylesheet.css and use the following code:

wrapper {
background-image: url(IMAGE_FOLDER/IMAGE_NAME.IMAGE_EXTENSION);
background-repeat: repeat-y;
float: right;
}

Now I don’t know your div structure so instead of wrapper maybe you need to use this css code on main content, or body, or some other div.

What this does is give the illusion that the sidebar is continuing all the way down the page. It doesn’t actually make the sidebar any longer.

Do take a look at this article on faux columns.

https://www.alistapart.com/articles/fauxcolumns/

I am really looking forward to seeing your posts on your holidays, especially Singapore since I am from there. It is always nice to hear what tourists have to say about our country.

Thanks guys for your input.

I opened the style.css and found:

/***********************
* Sidebar *
***********************/
#sidebar {
font: 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
padding: 10px !important;
margin-left: 720px;
width: 200px;
background: #333 url(‘./images/sidebar.gif’) repeat-y;
color: #fff !important;
}
I tried to add the line in here but it made everything go messed up. I’d created the file and put it in images folder. Basically the sidebar appeared halfway down the page and was really short.

I also read from the page Darrent reccomended. However I think on his side its a different approach in that he uses a body tag. When I tried to modify my body tag I noticed that it just included the fabric textue and nothing else. So couldnt add it there either.

*Darren
I’m going in June so won’t post about the trip in the mean time but hold on till then!

Crusoe21, the solution I posted is the same as the one Darran’s link suggests. That’s where I got it from originally. Anyway I can’t help you unless you post your html code. Open index.php and paste all the code from there. Also paste *all* the code from your style.css.

Also upload the background image that you are using to a website like rapidshare.com and post the link here. I will need that to make the bg.

Here is the style.css:

/*
Theme Name: Crafty
Theme URI: https://itscalledwebdesign.com/theme/crafty/
Description: A crafty look for all of those crafty WP folks out there.
Version: 0.92
Author: Lloyd Armbrust
Author URI: https://lloydmedia.com/
Tags: custom header, fixed width, two columns, widgets, css

Crafty
https://itscalledwebdesign.com/

This theme was designed and built by Lloyd Armbrust,
with many of the graphic elements designed by Rachel
Novek. Most of the CSS was adapted from the “Untheme
two-column” also by Lloyd Armbrust.

You can find Lloyd Armbrust’s sandbox at https://itscalledwebdesign.com/
and his website at https://lloydmedia.com/

The CSS, XHTML and design is released under GPL:
https://www.opensource.org/licenses/gpl-license.php

*/

/***********************
* Style.css *
***********************/
body {
font-size: 62.5%; /* What did one em say to another? Who’s your daddy?! */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
color: #333;
text-align: center;
margin: 0;
padding: 0;
background: #fff url(‘./images/back.jpg’) repeat;
}

#page {
background: transparent url(‘./images/content.png’) repeat-y;
margin: 0 auto;
padding: 0;
padding-top: 113px !important;
width: 960px;
text-align: left;
margin-bottom: -20px;
}

/***********************
* Blocks *
***********************/
hr {
display: none;
}

small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}

.hidden {
display: none;
}

.clear {
clear: both;
}

/***********************
* Alignment *
***********************/
.alignright {
float: right;
}

.alignleft {
float: left
}

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.center {
text-align: center;
}

/***********************
* Headings *
***********************/
h1 {
font-size: 3.3em;
padding-top: 0;
margin: 0;
}

h2 {
font-size: 1.6em;
margin: 30px 0 0;
}

h2.pagetitle {
font-size: 1.6em;
margin-top: 30px;
text-align: center;
}

h3 {
font-size: 1.3em;
padding: 0;
margin: 30px 0 0;
}

h1, h2, h3 {
font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
font-weight: bold;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}

/***********************
* Links *
***********************/
a, h2 a:hover, h3 a:hover {
color: #06c;
text-decoration: none;
}

a:hover {
color: #147;
text-decoration: underline;
}

/***********************
* Lists *
***********************/
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li {
margin: 7px 0 8px 10px;
}

/***********************
* Misc *
***********************/
code {
font: 1.1em ‘Courier New’, Courier, Fixed;
}

acronym, abbr, span.caps {
font-size: 0.9em;
letter-spacing: .07em;
}

acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

/***********************
* Header *
***********************/
#keel {
display: block;
height: 125px;
width: 100%;
background: transparent url(‘./images/header.png’) top center repeat-x;
position: absolute;
top: 0;
left: 0;

}

#headerimg {
float: left;
clear: none;
margin-right: 15px;
}

#headerimg .description {
font-size: 1.2em;
text-align: left;
}

#header {
padding: 10px;
height: 80px;
width: 940px;
margin: 0 auto;
}

/***********************
* Nav bar *
***********************/

#nav {
height: 30px;
padding: 10px 0 0 25px;
}

#nav ul {
list-style: none;
margin: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#nav li {
float: left;
padding: 0 9px;
}

#nav a {
display: block;
font: bold 1.2em Arial, san-serif;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 30px;
vertical-align: middle;
}

#nav a:hover {
line-height: 30px;
vertical-align: middle;
color: #999;
text-decoration: none !important;
}

/***********************
* Content *
***********************/
#content {
font-size: 1.2em;
background: transparent url(‘./images/recycle.png’) 650px 4px no-repeat;
}

/***********************
* Narrow Column *
***********************/
.narrowcolumn {
float: left;
padding: 0 0 20px 65px;
margin: 0px 0 0;
width: 635px;
}

.narrowcolumn .postmetadata {
text-align: center;
padding-top: 5px;
}

.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}

/***********************
* Wide Column *
***********************/
.widecolumn {
line-height: 1.6em;
padding: 10px 20px 20px 0;
margin: 5px 0 0 150px;
width: 630px;
}

.widecolumn .entry p {
font-size: 1.05em;
}

.widecolumn .post {
margin: 0;
}
.widecolumn .postmetadata {
margin: 30px 0;
}

.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}

.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}

/***********************
* Entry *
***********************/
.entry p a:visited {
color: #b85b5a;
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020”;
}

/***********************
* Post *
***********************/
.post {
margin: 0 0 40px;
text-align: justify;
}

.post h2 {
font-size: 1.9em;
width: 100%;
border-bottom: 1px dotted #333;

}

.post h2 a {

}

.postmetadata {
clear: both;
background: transparent url(‘./images/ribbondiv.gif’) no-repeat;
height: 81px;
padding-top: 29px !important;
color: #fff;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

.postmetadata a {
color: #fff;
font-weight: bolder;
text-decoration: underline;
}
.alt {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

/***********************
* Images *
***********************/
a img {
border: none;
}

p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

/***********************
* Image Captions *
***********************/

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/***********************
* Sidebar *
***********************/
#sidebar {
font: 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
padding: 10px !important;
margin-left: 720px;
width: 200px;
background: #333 url(‘./images/sidebar.gif’) repeat-y;
color: #fff !important;
}

#sidebar #searchform #s {
width: 108px;
padding: 2px;
}

#sidebar #searchsubmit {
padding: 1px;
}

#sidebar h2 {
font-family: ‘Lucida Grande’, Verdana, Sans-Serif;
font-size: 1.2em;
margin: 5px 0 0;
padding: 0;
color: #fefdf6;
}

#sidebar form {
margin: 0;
}

#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}

#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li {
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}

mall, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #009ad7;

}
#sidebar a {
color: #fff !important;
text-decoration: underline;
}

/***********************
* Search *
***********************/
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

/***********************
* Calendar *
***********************/
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar a {
text-decoration: none;
display: block;
}

#wp-calendar caption {
font: bold 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
text-align: center;
text-align: center;
width: 100%;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn’t work in IE */
background-color: #fff; }

#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

/***********************
* Comments *
***********************/
h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li, #commentform input, #commentform textarea {
font: 0.9em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}

.commentlist li {
font-weight: bold;
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist li .avatar {
float: right;
border: 1px solid #eee;
padding: 2px;
background: #fff;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
margin: 10px 5px 10px 0;
}

#commentform #submit {
margin: 0;
float: right;
}

#commentform p {
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
margin: 5px 0;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width: 100%;
padding: 2px;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
font-weight: normal;
}

.alt {
margin: 0;
padding: 10px;
}

/***********************
* Footer *
***********************/
#footer {
border: none;
padding: 20px;
padding-bottom: 60px;
margin: 0 auto;
width: 700px;
clear: both;
position: relative;
left: -82px;
}

#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}

#bottomnav {
margin: auto 0;
padding: 0;
text-align: center;
font-size: 1.1em;
font-weight: bold;
}

#bottomnav ul {
margin: auto 0;
display: inline;
list-style: none;
padding: 0;
border: none;
}

#bottomnav li {
display: inline;
padding: 0 9px;

}

#footer a {
color: #000;
font-size: .8 em;
}

#footer hr {
display: block;
border: none;
background: transparent url(‘./images/flowerdiv.jpg’) no-repeat;
height: 5px;
}

#copyright {
background: transparent url(‘./images/blackdivtop.png’) center 50px no-repeat;
height: 30px;
}

#wordpress a {
display: block;
background: transparent url(./images/sticker.png) no-repeat top center!important;
width: 62px;
height: 62px;
margin: 10px;
text-decoration: none;
margin: -20px auto -30px auto !important;
}

#wordpress a:hover {
background: transparent url(./images/sticker.png) no-repeat bottom center!important;
}

/*

You got to admit: though overused, Kubrick is pretty clean.
I just rearranged it to make a more generic starting place for WP designers.

*/

Here is the index php:

<?php get_header(); ?>

<div id=”content” class=”narrowcolumn”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></h2>
<small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

<div class=”entry”>
<?php the_content(‘Read the rest of this entry »’); ?>
</div>

<p class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
</div>

<?php endwhile; ?>

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘« Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries »’) ?></div>
</div>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This is were I got stuck tbh. I don’t have one background image to repeat. I understood the theory that you both mentioned.

HOWEVER, from my understanding there is not 1 background image like you said but several… I didnt know how to use just one while maintaining the same look of my page….

https://rapidshare.com/files/221600174/back.jpg.html

https://rapidshare.com/files/221600560/sidebar.gif.html

Thanks,

Crusoe

This was tough since your theme uses many div overlays as well as multiple background images. Since your sidebar used a patterned gradient I had to make a few changes to the layout and design. But I think it looks better now nonetheless.

Steps:

1. Backup your old style.css just in case.

2. Upload and replace your old style.css with the new one.

3. Upload the image to your theme’s images directory.

Here’s the zipped file that contains your stylesheet and image:

https://rapidshare.com/files/221750121/New_Folder.zip.html

Thanks very much Transpersonal. I really appreciate it.

I put the files in and now the side bar goes all the way down.

Unfortunately the patterned overlay has disappered, however, it doesnt bother me that much.

Here is the finished site https://www.robintino.co.uk

Theres a few things I’d change if I had the time:

*The google add needs centering
*The other google add is too big at the bottom

actually, theres not too much wrong with it anymore!All I need now is some content to put on it!

Thanks once again for your efforts.