23 {{ upvoteCount | shortNum }}
23 {{ upvoteCount | shortNum }}

Help Me! - CSS tag to stop an image continuing

by Apollo-Articles
20 replies
  • WEB DESIGN
    • |
Hi Everyone,

I want my sidebar image to reach the bottom of my page and stay there!

I set my css up so it repeats to the bottom of my longest page, the problem is that where I have other shorter pages the image continues on!

My Stylesheet currently reads:

Code:
/*
Theme Name: WP-Andreas01
Theme URI: http://andreasviklund.com/wordpress-themes/
Description: Based on the <a href="http://andreasviklund.com/templates/andreas01/">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: http://andreasviklund.com/
*/

/* 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:968px; 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 h3 {background-color:inherit; color:#555; float:left; font-size:1.9em; letter-spacing:-1px; margin:0 0 10px; width: 460px;}
#header h3 a {background-color:inherit; color:#555; text-decoration:none;}
#header p {background-color:inherit; color:#777; float:right; font-size:1.0em; font-weight:bold; line-height:1.2em; margin:6px 0 0; text-align: right; width:410px;}
#frontphoto {margin:0 0 10px;}



/* Sidebars */
#leftside{ float: left;    background-image: url("img/side-bar2.jpg");      padding: 10px;    padding-bottom: 1200px;     width: 18%;     margin-bottom: -1200px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:170px;}
#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;}

#contentwide .post h1 {
 font-size:16px; <!-- change this to your ideal size -->
}
I posted a similar topic a while back, but never quite got the answer. I have heard a wrapper div could help me but I don't seem to have a wrapper and I don't know what one is!

If anyone could give me a snippet of code that would solve the problem i'd love it!

Many thanks!

Sam
#continuing #css #image #stop #tag
  • Profile picture of the author ronc0011
    A wrapper tag / class is just a class that is used to wrap the entire page content in a div. It has acquired that name just from common usage. Typically it is set to "0" margins and padding. thus getting rid of any gutter that some browsers put in your page. If you are using something like Wp or other templates you may be trying to define elements that are already defined elsewhere in another stylesheet of other styles. Say for instance you want an h1 tag to be different than they are already defined, you can define the h1 tag like so...

    Code:
     
.wrapper h1 {
                  font-family:Tahoma;
                  font-size:28px;
                  color:Red;
                  }

    Any h1 tag between the wrapper tags will be displayed like this.

    However I don't think that is your problem. I'm guessing that the sidebar probably doesn't have a height defined so is only as tall as the content it contains. If you set a fixed height on the sidebar like 600px for instance then it will extend past all of the content if the content is only 400px tall thus your background will also extend since you have repeat-y set. That being said, if you set the height on your sidebar in percent "% it should only extend to the length of the content.
    {{ DiscussionBoard.errors[3492990].message }}
  • Profile picture of the author Apollo-Articles
    Okay I have just found out I can't specify it so the sidebar reaches the bottom with a % setting, so I am guessing I'd be stuck with the same problem here.

    To confirm the question I asked:

    Since my side bar content isn't as long as my page content I have a big white block, how can I fix this?

    Sam
    Signature
    {{ DiscussionBoard.errors[3493205].message }}
    • Profile picture of the author ronc0011
      Since I don't really know what you have as far as your WP setup this can only serve to give you an idea.

      In order to override the CSS that WP applies you need to put the whole page in a wrapper div. Go to "Appearance" > "Editor". The window should open to the default stylesheet. Scroll to the bottom of the stylesheet and create your new classes i.e. "wrapper" like so...

      Code:
       
.wrapper
{
margin:0px;
padding:0px;
}
      Now, back on your page put the opening wrapper div at the top of your page and the closing div at the bottom of the page like so...

      Code:
       
<div class="wrapper">
 
All of your page content goes in here
 
</div>

      Now you can define your sidebar div in the stylesheet like so..


      Code:
       
.wrapper sidebar
 {
height:100%;
background-image:url("the path to your image");
background-position: left top;
background-repeat:repeat-y;
}
      Now any div of the class "sidebar" inside the "wrapper" div will use your new styling.

      I'm only guessing that "sidebar" is already defined somewhere else in the default stylesheet. You may be able to make the changes directly to it there without using the wrapper class / div.



      Because you are integrating this into an existing WP theme you are going to have to get more used to working with CSS and how it is applied in the document flow because different elements are dependent on and interact with other elements. There is a document hierarchy that determines how things are applied.
      {{ DiscussionBoard.errors[3493392].message }}
      • Profile picture of the author ronc0011
        When you put all the content in a "wrapper" div the wrapper div becomes the "parent" container. So any element such as a div tag that has a height or width value set using percent it is the percent of the parent container i.e. "wrapper" div. The exception to this is if that element has a "position" value set to absolute. This takes the element out of the document flow and the "body" tag becomes the parent element.

        That's one reason for using the wrapper div. It allows you to circumvent styles that are applied at a higher level.
        {{ DiscussionBoard.errors[3493441].message }}
  • Profile picture of the author Apollo-Articles
    Hi Thanks for your message,

    I put the
    Code:
    .wrapper
{
margin:0px;
padding:0px;
}
    At the bottom of my Stylesheet.

    And then, in my page template (page.php) at the very top I wrote <div class="wrapper"> and at the bottom I wrote </div>

    However with the:

    Code:
    .wrapper sidebar
 {
height:100%;
background-image:url("the path to your image");
background-position: left top;
background-repeat:repeat-y;
}
    I am confused whereabouts I need to put this and what I should delete since I already have a section in my stylesheet which reads:

    Code:
    /* Sidebars */
#leftside{ float: left;    background-image: url("img/side-bar2.jpg");      padding: 10px;    padding-bottom: 1200px;     width: 18%;     margin-bottom: -1200px;} #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:170px;}
#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;}
    Please advise with the last section.

    Many many thanks,

    Sam
    Signature
    {{ DiscussionBoard.errors[3493493].message }}
    • Profile picture of the author ronc0011
      OK, the sidebar is already defined in your stylesheet so I don't think you need the wrapper div.

      I think your problem is coming from "padding-bottom:1200px;" and the "margin-bottom:-1200px;".

      You probably want to get rid of the "margin-bottom:-1200px;" setting or set it to "0px" and set the "padding-bottom:1200px;" to something more reasonable like "10px" or "20px". It's those "1200" values that are causing your problems. And last but not least set a height value just after the "width" setting...

      Code:
       
height:100%;

      NOTE: Where you see "#extras" That is the beginning of a new element. Don't confuse it with the "#leftside" element since it's on the same line.
      {{ DiscussionBoard.errors[3493623].message }}
      • Profile picture of the author ronc0011
        You may also have to play with the values on the height. You may have to use something like 98% because things like borders and such are added to width and height which will throw off your placement.

        Code:
        #leftside
        { 
        float: left;    
background-image: url("img/side-bar2.jpg");      
padding: 10px;    
padding-bottom: 10px;    
width: 18%;    
height:100%;
margin-bottom: 0px
}
        BTW, whenever you are using a "float" all width values have to be given in "%"
        {{ DiscussionBoard.errors[3493677].message }}
        • Profile picture of the author ronc0011
          OK I was just looking at you stylesheet and there is already a wrapper ID defined. It's called "#wrap" and there is no height set for it which should be fine. This means that you page template should already have a "#wrap" element in place so you don't need the wrapper div...

          Code:
           
<div class="wrapper">
 
 your content
 
</div>
          If the page template is setup the way I think it is then all of the page content should be within the "#wrap" div, i.e.

          Code:
           
<div ID="wrap">
 
   your content
 
</div>
          {{ DiscussionBoard.errors[3493794].message }}
          • Profile picture of the author ronc0011
            Ideally you want the sidebar to extend to the height of the parent container. Assuming the parent container is the "#wrap" div you might try adding a height value to the #wrap div i.e.

            Code:
             
#wrap
            {
            background-color:#fff; 
color:#333; 
margin:0 auto; 
width:968px; 
height:100%;
padding:0px 10px;

            }
            and see if the sidebar div will pick up the height from that just using the height setting i.e.


            Code:
             
height:100%;
            {{ DiscussionBoard.errors[3493854].message }}
            • Profile picture of the author ronc0011
              I just noticed you have put the height value in the "#extra" element instead of the "#sidebar" element.


              WP doesn't do a lot to make reading the code easier. For instance including two different elements on the same line. This makes it difficult to read. That same line would look better and read easier if it's formatted like so...

              Code:
               
 
#leftside
              {
               float: left; background-image: url("img/side-bar2.jpg");     
 padding: 10px;   
 padding-bottom: 10px;    
 width: 18%;    
 height:100%;

               }

               #extras
               {
              float:right;
line-height:1.4em; 
margin:0 0 5px;
padding:0;
width:170px;

              }

              NOTE: that the height value is set in the "#sidebar" element and not in the "#extras" element.

              So basically that means forget everything I said about adding the height value to the #wrap element. First try just correcting the #sidebar element by moving the height setting from the #extras element to the #sidebar element.
              {{ DiscussionBoard.errors[3493972].message }}
            • Profile picture of the author csmcmanus
              Would you mind hooking us up with a link to check things out other than your code in here? If you got this taken care of then nvm

              Is your theme widget ready?

              When you mention that you want your image to stay at the bottom of the page, are you referencing a) when a user scolls the sidebar/image stays sticky to the bottom of the browser or b) your sidebar is exactly as long as each pages content is.

              Did I make this harder by asking?
              {{ DiscussionBoard.errors[3493996].message }}
              • Profile picture of the author ronc0011
                I think he just has a background image that is set to repeat-y but the #sidebar div is not extending to the same height as the main content div.
                {{ DiscussionBoard.errors[3494109].message }}
  • Profile picture of the author Apollo-Articles
    Hi,

    thanks again for your reply, I tried what you suggested but now my sidebar color only goes as far as the end of my sidebar text, I really need this color to go to the end of the page.

    To confirm my sidebar now reads:

    Code:
    /*
Theme Name: WP-Andreas01
Theme URI: http://andreasviklund.com/wordpress-themes/
Description: Based on the <a href="http://andreasviklund.com/templates/andreas01/">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: http://andreasviklund.com/
*/

/* 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:968px; 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 h3 {background-color:inherit; color:#555; float:left; font-size:1.9em; letter-spacing:-1px; margin:0 0 10px; width: 460px;}
#header h3 a {background-color:inherit; color:#555; text-decoration:none;}
#header p {background-color:inherit; color:#777; float:right; font-size:1.0em; font-weight:bold; line-height:1.2em; margin:6px 0 0; text-align: right; width:410px;}
#frontphoto {margin:0 0 10px;}



/* Sidebars */
#leftside{ float: left;    background-image: url("img/side-bar2.jpg");      padding: 10px;    padding-bottom: 10px;     width: 18%;     } #extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:170px; height:100%;}
#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;}

#contentwide .post h1 {
 font-size:16px; <!-- change this to your ideal size -->
}

.wrapper
{
margin:0px;
padding:0px;
}
    Any advice?

    Many thanks again,

    Sam
    Signature
    {{ DiscussionBoard.errors[3493715].message }}
  • Profile picture of the author Apollo-Articles
    Thanks for the replies everyone especially Ron for your on-going help!

    @CSMC, yes my theme is widget ready, I am trying to make the image repeat to the length of every page I don't really mind how it does it.

    Ron, I tried your suggestions (changing the height element from the extras into the sidebar) and changing the page template so it read wrap not wrapper but nothing changed, then I added in the small wrap snippet to the stylesheet and then the bottom of my content seemed to flow over the bottom of the page?

    To confirm my stylesheet now reads:

    Code:
    /*
Theme Name: WP-Andreas01
Theme URI: WordPress themes | andreasviklund.com
Description: Based on the <a href="http://andreasviklund.com/templates/andreas01/">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: andreasviklund.com
*/

/* 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:968px; 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 h3 {background-color:inherit; color:#555; float:left; font-size:1.9em; letter-spacing:-1px; margin:0 0 10px; width: 460px;}
#header h3 a {background-color:inherit; color:#555; text-decoration:none;}
#header p {background-color:inherit; color:#777; float:right; font-size:1.0em; font-weight:bold; line-height:1.2em; margin:6px 0 0; text-align: right; width:410px;}
#frontphoto {margin:0 0 10px;}

/* Sidebars */

#leftside
{
 float: left; background-image: url("img/side-bar2.jpg");     
 padding: 10px;   
 padding-bottom: 10px;    
 width: 18%;    
 height:100%;
 }
 #extras
 {
float:right;
line-height:1.4em; 
margin:0 0 5px;
padding:0;
width:170px;
}

#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;}

#contentwide .post h1 {
 font-size:16px; <!-- change this to your ideal size -->
}

.wrapper
{
margin:0px;
padding:0px;
}
    And my page template (page.php) reads:

    Code:
    <div class="wrap">
<?php get_header(); ?>

<div id="contentwide">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php /* list_subpages_andreas01(); */ ?>

<div class="post">
<h1><?php the_title(); ?></h1>
<br>
<div class="contenttext"
<?php the_content('<p class="serif">Read more &raquo;</p>'); ?>
</div>
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
<?php edit_post_link('[e]','<p>','</p>'); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
  <!-- BEGIN: SeeVolution -->
    <script type="text/javascript">
    (function()
      {
        var ms = document.createElement("script");
        var site = ("https:" == document.location.protocol) ? "https://c.svlu.net/cjs.aspx" : "http://c.svlu.net/cjs.aspx";
        ms.src = site;
        ms.setAttribute("async", "true");
        document.documentElement.firstChild.appendChild(ms);
      })();
    </script>
  <!-- END: SeeVolution -->
</div>
</div>
</div>
<?php get_footer(); ?>
    Many thanks,

    Sam
    Signature
    {{ DiscussionBoard.errors[3498449].message }}
  • Profile picture of the author smarttrafficseo
    With CSS we have no need for that as we can specify a CSS file to be used when print output is required. This is simply achieved by placing media="print" in our stylesheet link tag. We also need to set the original stylesheet link tag to media="screen".
    e.g.
    <link type="text/css" media="screen" rel="stylesheet" href="main.css" />
    <link type="text/css" media="print" rel="stylesheet" href="print.css" />

    As you can see the first statement tells the browser that the CSS file called main.css is to be used for output to the screen (i.e. your monitor display). The second statement tells the browser that the file called print.css is to be used when print output is requested via the browsers print button.
    One of the main things to remember is that all your presentation in your web page should be under the control of your main stylesheet for this to work properly. Obviously if fonts and colours are embedded in your mark up then turning the stylesheet on or off will make little difference to this mark up.
    OK assuming that your page is constructed properly with CSS what do we need to do next to set up the page for printed output. The first thing to do is to copy your main.css file and call it something like print.css. This will allow us the to change all the necessary settings that apply to our page to make it format correctly for printing.
    There are many things you can do to the css file to make your printed output more desirable.
    {{ DiscussionBoard.errors[3498493].message }}
  • Profile picture of the author Apollo-Articles
    Thanks Smarttraffic,

    So what your suggesting is that, I need to copy my main.css file and save it as print.css

    And then insert the code: <link type="text/css" media="screen" rel="stylesheet" href="main.css" />
    <link type="text/css" media="print" rel="stylesheet" href="print.css" />

    into my stylesheet?

    How would this work, since the print.css would just be a copied file?

    Thanks,

    Sam
    Signature
    {{ DiscussionBoard.errors[3498527].message }}
  • Profile picture of the author willyyard
    Nice solution code is working.
    {{ DiscussionBoard.errors[3498559].message }}
    • Profile picture of the author Rovi
      Hi Sam, I hope you have your problem solved now, but in case you are still looking, and in case someone else finds this thread with similar problem, here is a workaround that I generally use.

      Since it's a royal pain getting two floated columns to equalize in height (like main content and sidebar), you can instead create the illusion of equal columns by using a background image for the div that wraps around them.

      That way you can leave them to auto size to suit their content and avoid frying your brain with excess css.

      Here's how it goes: say your page is 820px wide, main content column is 600px, sidebar is 220px. Create a background image 820px wide, with a white area extending from 0 - 600px, and a shaded area from 600 - 820px. It can be just a few px high: 5 - 10px is fine.


      containing div: style includes background image repeat-y, height:auto; width:820px;

      content div and sidebar div: both will float, have auto height and no background color or image.

      Remember the clearing div after them to force the height of the containing div.

      Here's an example for your information: selected-results [dot] com. (I make no apologies for this site, it's sort of a learning playground - first thing I did before I knew anything worth knowing and which has so far earned me just a bit more than diddly squat, but the page background does use this same technique to visually equalize depth of 3 columns.)

      Cheers,
      Rovi
      {{ DiscussionBoard.errors[3509243].message }}
  • Profile picture of the author signity2
    go google bcoz you google is best friend for learning css
    {{ DiscussionBoard.errors[3511540].message }}

Trending Topics