Foxticity Foxticity - 6 months ago 28
HTML Question

html, displaying a link as normal text

i was wondering if you can display a link as normal text.

<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>


I'm trying to overlap a image which is also a button, with the text "Log In", it works as it is with the code above, but i was wondering if i can change the "log in" which displays as blue and underlined to appear as normal text.

Answer

If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.

In your example, you could use

<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
    <div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
        <font color="white">Log in</font>
    </div>
</a>

However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:

<link rel="stylesheet" href="link-to-your-css-file" />

in your css file have

a.imgLink{
    color: white; text-decoration: none;
}
div.imgLink{ 
    position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}

Then your html would be

<a class="imgLink" id="" href="" target="_parent">
    <img src="" width="121" height="20" alt="">
    <div class="imgLink">
         Log In
    </div>
</a>

Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.