Welcome! To use this support forum, please Login or Join Today!

   

Top Menu: Alignment of Icons and Text

{name}
Rank

Total Posts: 1

Joined 2013-02-05

PM

 

We’re trying to get social media icons into the Top Menu and followed your instructions from this forum. - Thanks for that hint!

So far I got the icons in there – however can’t get the text aligned properly.

I assume the “text-indent=16px” should indent the text exactly accoprding to the width of the icons – but it doesn’t and I have the icons behind the text instead of left of the text. Probably just a small thing, but I can’t see it – perhaps you can help?

The website is www.muenchen-kreativ.de and not yet live. To see the website, you have to login with the user „test“, password „test“ – no problem in having the username here – it’s no admin account and just limits the viewers while beta testing.

/* Top Menu Icon Classes */

/* Top Menu Links */

#topmenu a {
 
text-shadow#5a0a00 1px 1px 0;
 
border-right1px solid #831300;
 
padding0px 14px;
 
line-height24px;
 
text-decorationnone;
}

#topmenu li {
 
padding0px;
}

#topmenu li.twitter a {
 
backgroundurl(./images/icons/16_twitter.pngno-repeat 750%;
 
text-indent16px;
}

... 

 

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi, This should do the trick:

/* Top Menu Links */

#topmenu a {
 text-shadow: #5a0a00 1px 1px 0;
 border-right: 1px solid #831300;
 padding: 0px 14px;
 line-height: 24px;
 text-decoration: none;
}

#topmenu li {
 padding: 0px 0px 0px 16px;
 margin: 0;
}

#topmenu li.twitter,
#topmenu li.facebook,
#topmenu li.rss {padding-left: 0;}

#topmenu li.twitter a {
 background: url(./images/icons/16_twitter.png) no-repeat 7% 50%;
 padding-left: 32px;
}

#topmenu li.facebook a {
 background: url(./images/icons/16_facebook.png) no-repeat 7% 50%;
 padding-left: 32px;
} 

#topmenu li.rss a {
 background: url(./images/icons/16_rss.png) no-repeat 7% 50%;
 padding-left: 32px;
} 

 

{name}
Rank

Total Posts: 1

Joined 2013-02-05

PM

 

Thanks for your help! Much appreciated!