CODEWITHSUNDEEP
htmlcssimagemenuborder
GytisK
GytisK

Reputation: 169

HTML+CSS Menu with icons, combining 2 pictures

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">
            <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) 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"> 
    <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;
}

Upvotes: 0

Views: 1102

Answers (3)

Geoffrey Burdett
Geoffrey Burdett

Reputation: 1976

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/

Upvotes: 1

AardvarkApostrophe
AardvarkApostrophe

Reputation: 285

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

Upvotes: 0

budamivardi
budamivardi

Reputation: 760

for second

<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}

Upvotes: 1

Related Questions