Tip: Click here to scan for System Errors and Optimize PC performance

June 27th, 2009, 1:10 pm

I am trying to change http://www.ndesign-studio.com/blog/mac/css-dock-menu such that the icons have more space between them than present. Anykind of help would be much appreciated.

[UPSGuy]

June 27th, 2009, 2:40 pm

What icons are you trying to space out? Site looks rather complete to me. You wouldn't just be advertising your link, would you?

June 27th, 2009, 2:45 pm

Hi. I am not advertising. I have replaced the icons with my own but they are too close together.


Can you help?

[UPSGuy]

June 27th, 2009, 2:52 pm

Which icons on the page are you speaking of?

June 27th, 2009, 3:26 pm

The icons in the dock menu. I downloaded the example and changed the icons. Thye look too close together.

June 28th, 2009, 5:03 am

well just use padding like this

Code: [ Download ] [ Select ]

padding-left:50px

change the 50px to whatever you want

June 28th, 2009, 6:31 am

Hi tastysite - thanks for the reply. Unfortunately after changing all the padding-left items in the css file - it doesnt work.

[Bogey]

June 30th, 2009, 11:39 pm

Code: [ Download ] [ Select ]

margin-left: 50px;

Change 50 to whatever you need.

[CXLink]

July 1st, 2009, 11:30 am

I dont think CSS is the issue after playing with the dock here it looks like a js thing. Then again I could be totally wrong.

[mindfullsilence]

July 2nd, 2009, 1:52 pm

right now your css shows these vlaues for that class:

Code: [ Download ] [ Select ]

 
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
 

1.  
2. a.dock-item {
3.     display: block;
4.     width: 40px;
5.     color: #000;
6.     position: absolute;
7.     top: 0px;
8.     text-align: center;
9.     text-decoration: none;
10.     font: bold 12px Arial, Helvetica, sans-serif;
11. }
12.  

Pay attention to these three properties:

Code: [ Download ] [ Select ]

 
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    padding-left: 5px;
}
 

1.  
2. a.dock-item {
3.     display: block;
4.     width: 40px;
5.     color: #000;
6.     position: absolute;
7.     top: 0px;
8.     text-align: center;
9.     text-decoration: none;
10.     font: bold 12px Arial, Helvetica, sans-serif;
11.     padding-left: 5px;
12. }
13.  

Either one should work. Since you have displayed the <a> tag as a block element with "display: block" you should be able to adjust the width of the element by changing "width:40px" to "width:50px;" or the likes. Or you could simply add the "padding-left:5px;" decoration.