Jump to content

href image hover with text alignment problem


wigginsda
 Share

Recommended Posts

I'm having an issue lining up link text and my image "button". The text length exceeds the with of the image. I can't seem to get the text to appear centered below the image either. Final goal= I don't want the image to change unless the cursor is directly over the image or the link text.

HTML<div class="Leaf"><a href="" alt="Naturopathy" title="Naturopathy"><img src="a.png"></img>Naturopathy</a></div>CSSdiv.Leaf {    text-align: center;     margin: 0 6px 12px;    width: 72px;    height: 72px;    border-style: none;    background-image:url("b.png");    background-repeat: no-repeat;} div.Leaf a, div.Leaf a:link, div.Leaf a:visited {    display:block;    border-style: none;} div.Leaf img {    width:72px;    height:72px;    border-style: none;} div.Leaf a:hover img {    visibility:hidden;}

Thank you for your time,

David

Link to comment
Share on other sites

Yeah, this is one for Dsonesuk. I can't get the anchor text to center unless the div is wider than the longest word in the text. I can cheat by making the div wider, but that is cheating...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hide-n-seek button</title><style>#wrap{  width:800px;  margin:0 auto;}div.Leaf {    text-align:center;    /*margin: 0 6px 12px;*/    width: 120px; /* this is wider to allow the text to center */    height: 72px;    border-style: none;    /*border:1px dotted blue;*/    background-position:center center;    background-image:url("b.jpg");    /*background-color:#eee;*/    background-size:72px 72px;    background-repeat: no-repeat;} div.Leaf a, div.Leaf a:link, div.Leaf a:visited {    text-align:center;    display:inline-block;    border-style: none;    color:black;} div.Leaf img {    display:inline-block;    width:72px;    height:72px;    border-style: none;} div.Leaf a:hover img {    visibility:hidden; /* hide img to reveal background */}div.Leaf a:hover {    color: blue;}</style></head><body><div id="wrap"><div class="Leaf"><a href="#" title="Tooltip"><img src="a.jpg" alt="img"/>AllNaturopathy Link</a></div></div></body></html>
Link to comment
Share on other sites

Like this?

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>hide-n-seek button</title>        <style>            #wrap{                width:800px;                margin:0 auto;            }            .Leaf {                text-align:center;                /*margin: 0 6px 12px;*/                /*width: 120px;  this is wider to allow the text to center removed by dsonesuk */                /* height: 72px;removed by dsonesuk */                border-style: none;                /*border:1px dotted blue;*/                /*background-position:center center; dsonesuk old*/                background-position: center top;/* dsonesuk new */                background-image:url("b.jpg");                /*background-color:#eee;*/                background-size:72px 72px;                background-repeat: no-repeat;                display: inline-block;/*added by dsonesuk */            }            div.Leaf a {                text-align:center;                display:inline-block;                border-style: none;                color:black;            }            div.Leaf img {                /*display:inline-block; removed by dsonesuk*/                display:block; /*added by dsonesuk */                width:72px;                height:72px;                border-style: none;                margin: 0 auto;/*added by dsonesuk */            }            .Leaf a:hover img {                visibility:hidden; /* hide img to reveal background */            }            .Leaf a:hover {                color: blue;            }        </style>    </head>    <body>        <div id="wrap">            <div class="Leaf">                <a href="#" title="Tooltip"><img src="a.jpg" alt="img"/>AllNaturopathy Link</a>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...