I've been several days trying to make a simple thing.
More or less it consists in make a div behave like a link, or transfer the click event in a div to a link contained on it
I have this (my apoligies for the spanish comments :-P)
HTML Code:
#sidepanel {
/** Dimensiones */
overflow: visible;
width: 15%;
min-width: 100px;
max-width: 15%;
/** Posicion */
position: absolute;
vertical-align: top;
left: 1%;
right: 1%;
top: 20%;
/** Contenido */
background: navy;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#sidepanel .sidepanellink {
/** Colores */
background: #4444FF;
background-color: #4444FF;
color: white;
/** Dimensiones */
/** Márgenes */
margin-left: 2%;
margin-right: 2%;
margin-top: 1%;
margin-bottom: 1%;
}
#sidepanel .sidepanellink:hover {
/** Colores */
background: #6666FF;
background-color: #6666FF;
}
#sidepanel a {
color: white;
font-family: sans-serif;
font-variant: small-caps;
font-weight: bold;
padding-bottom: 3px;
}
<div id="sidepanel">
<div class="sidepanellink"><a href="index.jsp">Index</a></div>
<div class="sidepanellink"><a href="AssessmentListView.jsp">Asessment view</a></div>
<div class="sidepanellink"><a>Opcion</a></div>
<div class="sidepanellink"><a>Opcion</a></div>
<div class="sidepanellink"><a>Opcion</a></div>
<div class="sidepanellink"><a>Opcion</a></div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="ˇCSS Válido!" />
</a>
</p>
</div>
I want this "sidepanellink" to behave like a link.
Now, to get the linked document you have to click over the letters inside the pretended button, clicking in the blankspace around the letters will have no effect.
I want to transfer the click event in the div to the link inside it.
Is it possible to make such a thing without using Java Script?
(answer is yes, i've seen this effect many times... but, how is it done? I've analized many css's and html's without succeed....)
Thanks in advance
Last edited by Sieira; 03-05-2009 at 11:59 AM..
|