Vertical rule experiment

• 

  tarushka · Member · Apr 27, 2011 at 3:35 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’m trying to experiment with the design of my blog a bit more.

  I’d like to insert a vertical rule between the blogroll sidebar and the main body text, spanning the length of the wrapper only, not that thick, maybe 10px or so. Then I’d like to put the colophone horizontal rule back in green, also 10px, to separate it from the footer, or just add a horizontal rule at the bottom of the page spanning the width of the wrapper, same colour green as the background and navbar.

  Does anyone know how to do this?

  http://tarushka.wordpress.com

  Thanks!
  T

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Apr 27, 2011 at 4:09 am

  • Copy link

  There’s currently only 1 Volunteer called “thesacredpath” helping with CSS. He does not appear to be logged in at this time.

• 

  tarushka · Member · Apr 27, 2011 at 4:26 am

  • Copy link

  He’s my guru!

• 

  thesacredpath · Member · Apr 27, 2011 at 4:38 am

  • Copy link

  Give this a try and see what you think. I added a little padding to the right of the posts otherwise the text sits right up against the vertical border.

  #content {
  border-right: 1px solid #000000;
  }
  
  .hentry {
  padding-right: 15px;
  }

• 

  tarushka · Member · Apr 27, 2011 at 5:14 pm

  • Copy link

  It looks good but I need it to span the length of the wrapper from the footer to the navbar, and I’d like the rule a little more to the right. Thanks!

• 

  tarushka · Member · Apr 27, 2011 at 5:28 pm

  • Copy link

  I’m thinking I could change the background of the widget area sidebar and shorten the width of the wrapper, but that might affect the footer.

• 

  thesacredpath · Member · Apr 27, 2011 at 6:36 pm

  • Copy link

  #wrapper includes all the central elements which means that the border line would run through your header, the navigation and the footer.

  To have a line running from right below the nav and all the way down to the footer, or have a different color background for the sidebar area, you are going to have to create a background image for #main. This image should be as wide as #main (940px) and then only about 5px tall and then you do a “repeat-y” in the background declaration and it will run the full length of the entire yellow area.

  To add a different colored column to the sidebar, you would create a transparent PNG image and then on the right side have a block of color about 230-240px wide to be the background for the sidebar.

  For a border line only, create the transparent PNG and put a line at about 230-240px from the right side.