Some CSS help…

• 

  caniwrite · Member · Sep 6, 2008 at 1:42 am

  • Copy link
  • Add topic to favorites

  Hi all,
  I do not know if I should be posting it here or at WordPress.org – I have a blog at wordpress.com, but I am working at trying to make a theme for myself with a local wordpress( and XAMPP) installation. I am just a newbie at this.

  But, nonetheless…I have run into a problem with the layout i was working at – my sidebar goes below the post section, and nothing I do pulls it up. I looked at the forums as well, and tried the methods. Nothing seems to work, or maybe I am not able to understand this.

  Would be grateful if somebody here could help me by pointing the mistakes I made in my code.

  Not sure if I should paste the entire CSS here…but nonetheless…am sorry if this is an inconvenience…
  ‘body,h1,h2,h3,h4,h5,h6,blockquote,p,form
  {
  margin:0;
  padding:0;
  }

  body
  {
  margin:0;
  font-family: Arial,Helvetica,Georgia,Sans-seriff;
  font-size:12px;
  text-align:left;
  vertical-align:top;
  background: #222222 none repeat scroll 0 0;
  color:#00000;
  }

  h1
  {
  font-family:Georgia,Sans-seriff;
  font-size:24px;
  padding:0 0 10px 0;
  }

  a:link, a:visited
  {
  text-decoration:underline;
  color: #336699;
  }

  a:hover
  {
  text-decoration:none;
  color:#00ff00;
  }

  p
  {
  padding:10px 0 0 0;
  }

  #wrapper
  {
  margin:0 auto 0 auto;
  width:1000px;
  }

  #header
  {

  background: #e8ecef url(‘images/kubrickheader.jpg’) repeat scroll 0 0;
  height:400px;
  margin-top:0px;
  }

  #container
  {
  padding:15px 10px 25px 15px;
  background:#e8ecef url(‘images/container.jpg’) no-repeat scroll center top;
  margin:0 auto;
  }

  .post
  {
  padding:10px 0 10px 0;
  }

  .post h2
  {
  font-family:Georgia,Sans-seriff;
  font-size:18px;
  }

  .entry
  {
  line-height:18px;
  }

  p.postmetadata
  {
  border-top:1px solid #ccc;
  margin:10px 0 0 0;
  }

  .navigation
  {
  padding:10px 0 0 0;
  font-size:14px;
  font-weight:bold;
  line-height:18px;
  }

  .sidebar
  {
  float:right;
  width:208px;
  padding-left:0;
  padding-top:1px;
  font-size:14px;
  display:inline;
  }

  .sidebar ul
  {
  list-style-type:none;
  list-style-image:none;
  list-style-type:outside;
  margin:0;
  padding:0;
  }

  .sidebar ul li
  {
  background: transparent none repeat scroll 0 0;
  margin-bottom:7px;
  padding:7px;
  }
  .sidebar ul li li
  {
  background:transparent none repeat scroll 0 0;
  margin-bottom:0;
  padding-bottom:0;
  }

  #footer
  {
  clear:both;
  float:left;
  width:750px;
  color:#eeeeee;
  }’

  Thanks,
  Rishi

• 

  caniwrite · Member · Sep 6, 2008 at 2:29 am

  • Copy link

  Well, I could manage to pull it up using the following for sidebar:

  .sidebar
  {
  		display:block;
  		position:absolute;
  		top:75px;
  }

  I need to fiddle around with it a little more…However, I am worried about the “position” part. I guess, as the name suggests, it would not make the sidebar relative to the rest of the content on the page. Hence, if I think of adding widgets to it, i would need to reposition everytime to make it look the same.

  Any thoughts anyone please?

• 

  caniwrite · Member · Sep 6, 2008 at 2:29 am

  • Copy link

  I found this solution from one of my own forum postings…where I was helped by Boblets.