How to link the entire line, including the margin

Margin part in link!

First, please try piling up the mouse to the below-mentioned link (inside framework).

With the above-mentioned example, also the margin part which does not have letter has become link, clicking wherever of the inside of the frame, functioning it does as a link properly. We do not use the script, can actualize with just the style seat.

* If it is not the perusal with or more Opera Mozilla of or more NETSCAPE Navigator6 of Internet Explorer5, there is a possibility of not being visible in only normal link.

This time, “including also this kind of margin part, we introduce the method of making the link which becomes link”.Because, the letter part functioning does even with the environment which cannot use the style seat as a link properly, there is no worry. Feeling at rest, please try using with ease.

How doing, it makes?

Method of making very is simple.
First, as description below the style seat is described.

<style type= ” text/css “><! — a.widelink {display: block; width: 100%; } a.widelink:hover { background-color: #ffff99; color: red; } –></style>

then, HTMLto describe the link with.

<a href=”hogehoge.html” class=”widelink”>it is a link</a>

make the linkaelement (atag) to class=”widelink” simply add the statement that.
widelink part of the, align the class name of the style sheet that describes just.

in this, the display is as follows:.

it is a link

hover the mouse, side1the entire line has been to link you can see that.
it is a link also put the mouse in the margin on the right side of the character of, background color changes, you can see that the link.

cases for detailed description of the technique to take advantage of this time and so

going on??

in this technique,, of the style sheet width properties and display takes advantage of the property.

<style type=”text/css”><!– a.widelink { display: block ; width: 100% ; } a.widelink:hover { background-color: #ffff99; color: red; } –></style>

width property:

here, want to expand the scope of the link is not. to widen the range of elements, of the style sheet width you can use the property. if you set a value for this property, its value is extended to the width (or shrinking) will be.

here, width: 100%; it has been described as, expand to full width would mean. (other width: 300px; (300pixel) such as, it is also possible to specify in concrete values using the number and unit. )

by doing this, no letters also serves as a link in the margin will now.

display property:

but, width only properties can not be achieved.
because, width property, block-level elements( 1) for( 2)and because it, inline elements( 3) be abecause there is no use for the element.

1 : <p>or<div>such as, range type of element that specifies the.
2 : also inline elements img or object some, such as be subject to. also, in a block-level element tr some, such as outside the scope of. for details, CSSplease refer to the dictionary.
3 : <font> or <em> such as, types of elements that affect only that portion enclosed.

there, a the elements block-level be able to design as, you need to make a specified. therefore display use the property.
display: block; if you set, can be displayed as if it were a block level element.

so, how to write concrete (a practical example) to the introduction of

a practical example

first, is from the description of the style sheet. <style type=”text/css”><!– a.widelink { display: block; width: 100%; text-decoration: none; /* commentaryA */ } a.widelink :hover { /* commentaryB */ background-color: #ffff99; color: red; } –></style>

commentaryA: turn off the underline of link is specified.
commentaryB: this option specifies the color of the ride when the mouse is over the link. background color is the former, the latter is the text color. not only specify the background color can also be a.

then, tablearrange a link using theHTMLa description of the.

<table border=”0″ cellspacing=”1″ cellpadding=”0″> <tr><th bgcolor=”#0099ff”><font size=”-1″ color=”#ffffff”> link sample </font></th></tr> <tr><td”><a href=”url1.html” class=”widelink”>link1</a></td></tr> <tr><td”><a href=”url2.html” class=”widelink”>link2</a></td></tr> <tr><td”><a href=”url3.html” class=”widelink”>link3</a></td></tr> <tr><td”><a href=”url4.html” class=”widelink”>link4</a></td></tr> <tr><td”><a href=”url5.html” class=”widelink”>link5</a></td></tr> </table>

when you view this, looks like the following:.

and try to put the mouse, i think that you can see that the margin has been also linked to properly. means, please try to take advantage.