asked on

Html - link

Please see attachment. How can I get the result like image #2. When hover a link, I want "Home" link (and other) to be in the center and also I want to be able to adjust the width and height?

<head>
<style>
#menu {
    height:61px;
    background-color:#D2691E;
    font-size:10pt;
    line-height:72px;
    
    
}
#menu img {
    float:left;
    width:150px;
    height:60px;
    padding-right:18px;
}
.linkStyle
        {
         color: #FFFFFF;
         text-decoration: none;
         font-size:small;
         font-family: "Verdana";
         padding-right: 40px;
         color: #dde4ec;         
        }

a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none; 
}

.clearFloat {
clear:both;
}

Open in new window

menu-01.jpg

Gary

Whats your HTML for this?

VBdotnet2005

ASKER

<body>
<div id="menu">
<img src="temp.gif" />
<a href="http://mysite/home.html" class="linkStyle">Home</a>
<a href="http://mysite/documents.html" class="linkStyle">Documents</a>
<a href="http://mysite/purchased.html" class="linkStyle">Purchased</a>
<a href="http://mysite/Ordered_by.html"class="linkStyle">Orderedby</a>
<a href="http://mysite/internal_sales.html" class="linkStyle">Internal Sales</a>
<a href="http://mysite/Customername.html" class="linkStyle">Customer Name</a>

</div>
<div>
Content goes here
</div>
</body>

Gary

Change the padding on .linkStyle{...} to

padding: 0 20px;

VBdotnet2005

ASKER

I tried it and it returned same result

Gary

Can't look the same since the CSS has changed, look at this fiddle

http://jsfiddle.net/GaryC123/3tqs77m4/1/

VBdotnet2005

ASKER

My bad. I had to close and open my Visual Studio 2010 pro to see the change. How can I control the width and height of it?

Gary

Add to .linkStyle {...}
display:inline-block

then you can add height and width