February 23, 201115 yr Hi Everyone, I want to have an image in my leftside sidebar navigation (just a plain colour), I've made the image an ideal width, but a short height, since I have the intention that I want to repeat the image to the bottom of my web pages. However I can't seem to get it to work. Heres the CSS I am using (in my style sheet - I'm also using wordpress): /* Sidebars */ #leftside {background:url("img/side-bar.jpg") repeat-y scroll 0 0 #E6ECE9; clear:left; float:left; line-height:2em; margin:0 0 5px; padding-bottom:50000; width:190px; margin-bottom: -50000px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:190px;} #leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:1.1em; margin:0 0 18px;} #leftside li, #extras li {line-height:2em; list-style:none; margin:0 0 6px;} #leftside ul ul, #extras ul ul {margin:6px 0 0 10px;} #leftside ul ul li, #extras ul ul li {margin:0 0 4px;} #leftside ul ul li a, #extras ul ul li a {font-weight:normal;} #leftside ul.linklist, #extras ul.linklist {font-size:1.1em;} #leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;} #leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;} #leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;} #leftside label, #extras label {display:none;} Can anyone possibly tell what I am missing, I am a newbie when it comes to CSS, so try to keep it simple Many thanks! Sam
February 23, 201115 yr what are the 0 0 in your background definition? http://www.w3schools.com/css/pr_background.asp
February 23, 201115 yr 0 0 are valid values for background-position. To the OP: not enough info to solve your problem. What does the markup look like?
February 23, 201115 yr If it's just a plain colour background then why use an image? You'll probably need to post a link to your site so people can see the problem before working out a solution for you. However, just looking at your CSS, I'd guess it was something to do with not setting a proper value for the crazy 50000 padding on the #leftside Should be: padding-bottom:50000px; Not: padding-bottom:50000;
February 24, 201115 yr Author Replied to this earlier, but it didn't seem to send. Just realized this was because of the links in the code. Thanks for all your responses, Spitfire I am using an image since I thought I could repeat this to match the differening lengths, where with a colour I couldn't. My idea was to make the length really long, and then create a wrapper to stop it from going on forever however this didn't work. I'm not really too sure what I am doing, so this doesn't help me much! I tried the following CSS which got me the background image repeated but it went on too long, (so I changed it back where the image is too short since this looks better which I way I can't post a live link). My best efforts of the code currently looks like: You can see my code below: /* Theme Name: WP-Andreas01 Theme URI: removed due to webdesignerforum Description: Based on the <a href=" removed due to webdesignerforum">andreas01 free website template</a>, this WordPress theme version provides a simple, stylish and useful design that is easy to customize for your needs. Updated to work with WordPress 3.0+. Please report errors to the theme designer. Version: 3.0 beta Author: Andreas Viklund Author URI: removed due to webdesignerforum */ /* Body */ * {margin:0; padding:0;} body {background:#f4f4f4 url(img/bg2.gif) top center repeat-y; color:#303030; font:76% Verdana,Tahoma,Arial,sans-serif;} #wrap {background-color:#fff; color:#333; margin:0 auto; width:950px; padding:0px 10px;} /* Links */ a {color:#4088b8; font-weight:bold;} a:hover {color: #000000;} a img {border:0;} /* Header */ #header {margin:10px 0 0;} #header h1 {background-color:inherit; color:#555; float:left; font-size:2em; letter-spacing:-1px; margin:0 0 10px; width: 460px;} #header h1 a {background-color:inherit; color:#555; text-decoration:none;} #header p {background-color:inherit; color:#777; float:right; font-size:1.1em; font-weight:bold; line-height:1.3em; margin:6px 0 0; text-align: right; width:410px;} #frontphoto {margin:0 0 10px;} /* Wrapper */ #{overflow: hidden;} /* Sidebars */ #leftside{ float: left; background-image: url("img/side-bar.jpg"); padding: 10px; padding-bottom: 50000px; width: 18%; margin-bottom: -50000px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:190px;} #leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:1.1em; margin:0 0 18px;} #leftside li, #extras li {line-height:2em; list-style:none; margin:0 0 6px;} #leftside ul ul, #extras ul ul {margin:6px 0 0 10px;} #leftside ul ul li, #extras ul ul li {margin:0 0 4px;} #leftside ul ul li a, #extras ul ul li a {font-weight:normal;} #leftside ul.linklist, #extras ul.linklist {font-size:1.1em;} #leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;} #leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;} #leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;} #leftside label, #extras label {display:none;} /* Main menu */ div.menu ul {list-style:none; margin:0 0 20px; width:190px; padding:0;} div.menu ul li {display:inline; line-height:1.4em; width:190px; margin:0; padding:0;} div.menu ul li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:180px;} div.menu ul li a:hover, div.menu li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#505050;} div.menu li.current_page_item ul li a {border-left:4px solid #cccccc; color:#505050;} div.menu ul li ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px; width:170px;} div.menu ul li ul li a {padding:4px 1px 4px 5px; width:170px;} div.menu ul li ul li ul li {width:160px;} div.menu ul li ul li ul li a {width:160px;} /* Content */ #content {line-height:1.6em; margin:0 205px 5px; padding:0;} #contentwide {line-height:1.6em; margin:0 0 5px 200px; padding:0;} #content h2,#contentwide h2 {font-size:1.6em; margin:0 0 10px;} #content h3,#contentwide h3 {font-size:1.4em; margin:0 0 8px;} /*#content img,#contentwide img {border:1px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}*/ #content ul,#contentwide ul,#content ol,#contentwide ol {margin:0 0 16px 20px;} #content li,#contentwide li {padding:0 0 0 5px;} #content ul ul,#contentwide ul ul,#content ol ol,#contentwide ol ol {margin:0 0 0 16px;} /* Footer */ #footer {border-top:2px solid #e0e0e0; font-size:0.9em; clear:both; color:#777; font-weight:normal; line-height:1.7em; margin:0 auto; padding:10px 0; text-align:center; width:950px;} #footer p {margin:0; padding:0;} #footer a {color:#777; font-weight:normal; text-decoration:none;border-bottom:0; } #footer a:hover {color:#555; text-decoration:underline;border-bottom:0;} #footer strong a {font-weight:bold;} #footer span.credits {font-size:1.1em;} /* Subpage menu */ #subpages {border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0; border-bottom:0; float:right; font-weight:bold; line-height:1.3em; margin:-5px 0 8px 15px; padding:0 0 10px 10px; width:190px;} #subpages h2 {font-size:1.2em; font-weight:bold; letter-spacing:-1px; line-height:1.3em; margin:0 0 12px;} #subpages ul.submenu {line-height:1.4em; list-style:none; margin:0;} #subpages ul.submenu li {display:inline; line-height:1.4em; width:180px; padding:0;} #subpages ul.submenu li a {background-color:#f4f4f4; border-left:4px solid #cccccc; border-bottom:0; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:3px 1px 3px 5px; text-decoration:none; width:180px;} #subpages ul.submenu li ul {margin:0 0 5px 10px; width:170px;} #subpages ul.submenu li ul li a {width:170px;} #subpages ul.submenu li ul ul {margin:0 0 5px 10px; width:160px;} #subpages ul.submenu li ul ul li a {width:160px;} #subpages ul.submenu li ul ul ul {margin:0 0 5px 10px; width:150px;} #subpages ul.submenu li ul ul ul li a {width:150px;} #subpages ul.submenu li a:hover,#subpages ul.submenu li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#555;} #subpages ul.submenu li.current_page_item ul li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#555;} /* Tags */ p,ul,ol {margin:0 0 18px;} blockquote {border-left:4px solid #e0e0e0; margin:20px; padding:8px 8px 8px 15px;} blockquote p {background-color:inherit; color:#505050; font-size:0.9em; line-height:1.3em;} label {background-color:inherit; color:#606060; font-size:0.9em; font-weight:bold;} table#wp-calendar {margin:0 0 20px; width:190px;} code {font-size:1.2em; display:block; padding:5px 5px 5px 8px; background-color:#f4f4f4; margin:5px 0 15px 0;border-left:4px solid #cccccc;} /* Forms */ #s,#submit {background-color:#ffffff; border:1px solid #cccccc; color:#505050; font-size:0.9em; margin:0 0 16px; padding:4px; width:180px;} #author,#email,#url,#comment {border:1px solid #cccccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;} #commentsection {margin:25px 0 0;} #commentsection p {margin:0 0 6px;} /* Float fix */ .contenttext {overflow:hidden;} * html .contenttext {height:1px; overflow:visible;} * html .contenttext p {overflow:hidden; width:99%;} /* WP image align classes */ .alignleft {float:left;} .alignright {float:right;} img.alignleft {margin:0 20px 20px 0;} img.alignright {margin:0 0 20px 20px;} img.aligncenter,.aligncenter {float:none; display:block; margin:0 auto;} img.alignnone,.alignnone {float:none; margin:0;} /* Various classes */ .left {border:1px solid #cccccc; float:left; margin:10px 15px 10px 0;} .right {border:1px solid #cccccc; float:right; margin:10px 0 5px 10px;} .center {border:1px solid #aaaaaa; margin:5px auto 12px; text-align:center;} .textright {text-align:right;} .small {font-size:0.8em;} .bold {font-weight:bold;} .hide {display:none;} .post {margin:0 0 25px;} .postinfo {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; font-size:0.9em; font-weight:bold; line-height:1.5em; margin:1px 0 30px; padding:8px 5px 8px 8px;} .comment {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; margin:0 0 10px; padding:8px 5px 0 8px;} .comment p {font-size:0.9em; line-height:1.3em; margin:0 0 6px; padding-bottom:5px;} .gravatarside {float:right; width:48px; height:48px; margin:0 5px 5px 5px;} .navigation {display:block; margin:10px 0 20px 0; padding:0; text-align:center;} .navigation p {margin:0; padding:0;} .prevlink {margin-right:20px;} .nextlink {margin-left:20px;} I'm sure its my wrapper that I'm doing wrong. Theres probably a better way of doing this, please let me know what it is. Many thanks, Sam
February 24, 201115 yr Can you post a link to the site (You've made 25 posts so you should be able to post links now), or failing that HTML code for a page that the problem is on?
February 25, 201115 yr Author Great, your right. Heres my site: best drum set Many thanks in advance, Sam
February 25, 201115 yr Great, your right. Heres my site: best drum set Many thanks in advance, Sam you could give your wrapper a bg image? if its the green box that you want to reach down the bottom of the page???
February 25, 201115 yr Try {background: url(http://www.best-drum-set.com/wp-content/themes/wp-andreas01/img/side-bar.jpg)} Edited February 25, 201115 yr by Lev
February 28, 201115 yr Author Hi Kingy da killa, Yes, your correct its the green box, how would I give my wrapper a bg image, please remember I am a newb! Thanks, Sam
Create an account or sign in to comment