Padding between screen and menu.

lifelongnomad / 2009-07-22 21:14:26   

Sorry, I know this has been asked a thousand times before. I went through all the other threads but everything is over my head. I am completely css-retarded.

I just want to put space between the left hand side of the screen and my menu. I went into my style.css in the sample folder, found the #menu section, and underneath the main part of this, and after the closing bracket, I copy/pasted this in a new line:

.container { padding-top: 20px; padding-left: 20px; }

So why is it not working? If possible, can you give me the most dumbed down response possible. LOL

Thanks in advance.

Vaska A / 2009-07-22 21:29:52   

Show us your site...

lifelongnomad / 2009-07-22 21:41:40   

www.carlathecopywriter.com

lifelongnomad / 2009-07-22 21:57:56   

Do you need any other information? Or was that all you needed, the url?

7 / 2009-07-22 22:35:39   
  1. #menu {
  2.     width: 215px;
  3.     overflow: auto;
  4.     top: 0;
  5.     bottom: 0;
  6.     left: 25px;
  7.     position: fixed;
  8.     height: 100%;
  9. ¬†¬†¬†¬†background-color: #fff;
  10. }

Edit the one that says left to move the entire menu...left. ;)

This won't move the content area that's on the right in relation to this though. Got firebug installed on your firefox broswer? It's invaluable.

lifelongnomad / 2009-07-22 22:41:12   

Alright, have done that and also added 25px to the content area in the css below to accomodate for the extra space used on the left. Here have a look:
http://www.carlathecopywriter.com/ndxz-studio/site/sample/style.css

However, the space between the menu and the content (which I thought I had changed as mentioned above) did not work.

Also, was doing all of this in Safari and nothing was showing up at all. In firefox, the left hand side change shows but the right hand menu/content gap doesn't.

Thoughts?

lifelongnomad / 2009-07-22 22:42:17   

currently looks like this:

#menu {
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
    left: 25px;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

#menu ul li.section-title { }

#content {
height: 100%;
margin: 0 0 0 240px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

lifelongnomad / 2009-07-22 22:44:03   

safari and firefox are now the same - both show the left hand margin change but there is still no space between the right hand of the menu and the content area.

lifelongnomad / 2009-07-22 22:46:05   

Got it guys, thanks a million. Web dev pointed out simple error, swapped the left side padding only with general padding code for clockwise info. Cheers.

This thread has been closed, thank you.