Novice Question

  • quddusaliquddus
  • Newbie
  • Newbie
  • quddusaliquddus
  • Posts: 5

Post 3+ Months Ago

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
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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

Post 3+ Months Ago

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


Can you help?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Which icons on the page are you speaking of?
  • quddusaliquddus
  • Newbie
  • Newbie
  • quddusaliquddus
  • Posts: 5

Post 3+ Months Ago

The icons in the dock menu. I downloaded the example and changed the icons. Thye look too close together.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

well just use padding like this
Code: [ Select ]
padding-left:50px
change the 50px to whatever you want
  • quddusaliquddus
  • Newbie
  • Newbie
  • quddusaliquddus
  • Posts: 5

Post 3+ Months Ago

Hi tastysite - thanks for the reply. Unfortunately after changing all the padding-left items in the css file - it doesnt work.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Code: [ Select ]
margin-left: 50px;

Change 50 to whatever you need.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

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
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

right now your css shows these vlaues for that class:
Code: [ 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: [ 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.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 24 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.