带图标的 HTML+CSS 菜单，结合 2 张图片

Question

我有 2 个问题(更像是 1.5 个)

1) 将第一张图片中的菜单修改为第二张图片中的菜单的正确方法是什么。因为我把图片和文字放在同一个<a>标签 我遇到了白色边框的问题(图标是 30x30 像素，它们周围没有透明空间或其他任何东西):

HTML:

<div id="header">
    <div class= "main">

        <div class="logoHeader">
            <a href="#"><img src="logo.png"></a>
        </div>

        <div class="menuPicHeader"> 
            <a href="#"><img src="stovyklae.png"><h2>stovykla</h2></a>
            <a href="#"><img src="klubase.png"><h2>klubas</h2></a>
            <a href="#"><img src="elparde.png"><h2>el. parduotuvė</h2></a>
            <a href="#"><img src="kontaktaie.png"><h2>kontaktai</h2></a>
        </div>

        <div class="socialIconsWrapHeader">
            <a href="#"><img src="yttop.png"></a>
            <a href="#"><img src="ftop.png"></a>
        </div>

    </div>
</div>

CSS:

h2{
        display:inline-block;
        text-transform: uppercase;
        text-decoration: none;
        color: black;
        margin-left:10px;
        margin-right:10px;
        font-size:14px;

    }

.logoHeader{
        margin-left:15px;
        float:left;
        margin-bottom: 20px;
        margin-top:15px;
    }

    .socialIconsWrapHeader{

        float:right;
        margin-top:15px;
        margin-right:20px;
    }

    .socialIconsWrapHeader a{
        margin:0px 10px 0px 10px;
    }

    .menuPicHeader{
        float:left;
        margin:20px 0px 0px 130px;
        padding-left:10px;
    }

    .menuPicHeader a{   
        padding-top:20px;
        padding-bottom:2px;
    }

2) 我想知道我应该用什么把文字放到图片上，如下所示:

我应该把图片剪成两半吗，得到一些div并使用灰色的一半作为背景将其粘贴到图片的底部？或者以某种方式写在 <a> 之上？

HTML:

<div class="rightCol1"> 
    <a href="#"><img src="pic1.png"></a> 
    <a href="#"><img src="pic2.png"></a>
</div>

CSS:

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}

Answer 1

1: 添加.menuPicHeader a{ margin-right: 20px; }

http://jsfiddle.net/Lphup/

2:有很多方法可以做到这一点，但这里有一个选择:

http://jsfiddle.net/33vth/