[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 132
  • Last Modified:

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
0
VBdotnet2005
Asked:
VBdotnet2005
  • 8
  • 6
1 Solution
 
GaryCommented:
Whats your HTML for this?
0
 
VBdotnet2005Author Commented:
<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>
0
 
GaryCommented:
Change the padding on .linkStyle{...} to

padding: 0 20px;
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
VBdotnet2005Author Commented:
I tried it and it returned same result
0
 
GaryCommented:
Can't look the same since the CSS has changed, look at this fiddle

http://jsfiddle.net/GaryC123/3tqs77m4/1/
0
 
VBdotnet2005Author Commented:
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?
0
 
GaryCommented:
Add to .linkStyle {...}
display:inline-block

then you can add height and width
0
 
VBdotnet2005Author Commented:
I tried this and it did not stay in the center.

 display:inline-block;
 height:50px;
0
 
VBdotnet2005Author Commented:
Please see image
menu-02.jpg
0
 
GaryCommented:
Remove the line height from here
#menu {
    font-size: 10pt;
    line-height: 72px;
}


And add it to .linkStyle {...}
0
 
VBdotnet2005Author Commented:
thank you Gary
0
 
VBdotnet2005Author Commented:
I hope you don mind this. How can I remove this white gap? I want to move the menu all the way to the top.
menu-03.jpg
0
 
GaryCommented:
Add

body{
    margin:0
}
0
 
VBdotnet2005Author Commented:
excellent. Thanks again
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now