Novice Question

Post 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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 27th, 2009, 1:10 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Mastermind
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2491
  • Loc: Nashville, TN
  • Status: Offline

Post 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?
I'd love to change the world, but they won't give me the source code.

Post 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
  • Lurker ಠ_ಠ
  • Mastermind
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2491
  • Loc: Nashville, TN
  • Status: Offline

Post June 27th, 2009, 2:52 pm

Which icons on the page are you speaking of?
I'd love to change the world, but they won't give me the source code.

Post 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.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 273
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post 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
^__^

Post 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
  • Disturbed
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 7092
  • Loc: Ozzuland
  • Status: Offline

Post June 30th, 2009, 11:39 pm

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

Change 50 to whatever you need.
Learn PHP | I got 10 PHP tutorials! Check them out!
Dreamtale - Farewell
Just a note... I've giving up on web development and that stuff... Just lost all interest in it.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 650
  • Loc: ATL-GA
  • Status: Offline

Post 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.
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • mindfullsilence
  • Proficient
  • Proficient
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 436
  • Status: Offline

Post 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.
Use your words like arrows to shoot toward your goal.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 88 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
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.