HTML+CSS Menu with icons, combining 2 pictures - html

Question

I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</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) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}

Answer 1

1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/

Answer 2

for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</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}

Answer 3

You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }