im trying to create a menu that when i am on the relevant page, the menu item is enlarged. I have achieved this using the following code but i am not happy with the way the text enlarges
the text enlarges both to the right and downwards like this:
_______________
|_____| |
| |
| |
| |
|_______________| (i think this will screw up a bit in yahoo but you get the gist)
where the small box is the outlines of the original small text and the larger box is the larger text (with text keeping same ratio, obviously
how can i get the text to enlarge in this style:
_______________
| |
|_____ |
|_____| |
| |
|_______________|
the only was i can think to do this is centre the text within the line it is contained in but i don't know how to do this, i tried the css align-vertical:middle but this did not wor
here is my html so far:
#submenu {
font-size: 25px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: -2px;
margin-top:-30px;
}
#submenu a {
font-size: 20px;
font-weight: bold;
padding:10px;
text-transform: lowercase;
letter-spacing: -2px;
position:absolute;
}
<div id="submenu">
<ul id="menu-main-links" class="inline-list">
<a href="introduction.html" ><div style="font-size:40px">introduction</div></a></><br /><br />
<a href="committee.html">committee</a><br /><br />
<a href="faqs.html">faq</a>
</ul>
</div>
the text enlarges both to the right and downwards like this:
_______________
|_____| |
| |
| |
| |
|_______________| (i think this will screw up a bit in yahoo but you get the gist)
where the small box is the outlines of the original small text and the larger box is the larger text (with text keeping same ratio, obviously
how can i get the text to enlarge in this style:
_______________
| |
|_____ |
|_____| |
| |
|_______________|
the only was i can think to do this is centre the text within the line it is contained in but i don't know how to do this, i tried the css align-vertical:middle but this did not wor
here is my html so far:
#submenu {
font-size: 25px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: -2px;
margin-top:-30px;
}
#submenu a {
font-size: 20px;
font-weight: bold;
padding:10px;
text-transform: lowercase;
letter-spacing: -2px;
position:absolute;
}
<div id="submenu">
<ul id="menu-main-links" class="inline-list">
<a href="introduction.html" ><div style="font-size:40px">introduction</div></a></><br /><br />
<a href="committee.html">committee</a><br /><br />
<a href="faqs.html">faq</a>
</ul>
</div>