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

【问题标题】：HTML+CSS Menu with icons, combining 2 pictures带有图标的 HTML+CSS 菜单，结合 2 张图片
【发布时间】：2014-06-23 21:26:00
【问题描述】：

我有 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;
}

【问题讨论】：

标签： html css image menu border

【解决方案1】：

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

http://jsfiddle.net/Lphup/

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

http://jsfiddle.net/33vth/

【讨论】：

感谢#2，但是当第一个问题的问题仍然存在时，它现在确实有一些间距，但是如果我使用边框，我如何让它看起来像第二张图片（那里有白边，不知道能不能看到）。 “卡住”边框的小提琴：jsfiddle.net/Lphup/1

【解决方案2】：

第二次

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

CSS：

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}

【讨论】：

嗯，整个栏目都跳出来了，我看不到任何文字。我应该在剪掉图像的灰色部分后使用它吗？因为现在只有一张照片。
改变span的宽度，适应自己的代码
谢谢你，赞成，不能接受 2 个答案:( 另一个人回答了这两个问题。

【解决方案3】：

如果将元素的父级定位设置为“相对”，然后将其定位设置为绝对，则可以对元素进行更多定位控制。这允许您使用顶部、左侧或右侧来设置子对象的绝对位置，相对于它们的父对象。

我没有机会尝试这个，但是这样的事情应该可以解决问题：

.menuPicHeader { position: relative; } 
.menuPicHeader a { position: absolute; top: 0; }

【讨论】：