Ul question, lifting notes to the navigation bar

Renovatio

01-06-2013, 03:49 PM

Hello, I have made a navigation bar based on html ul, ul is configured in css.

I also want to add notes right bellow the links which are text, not clickable, explaining the link's purpose but I cannot attach them to the links, I cannot make them be on the next line of links. I have attached a picture explaining the problem and the need of a result:

http://i45.tinypic.com/s6uao4.png

Grateful,

Ren

Excavator

01-06-2013, 04:14 PM

Hello Renovatio,
Would the title attribute work for you? Like this - <a href="#" title="How it works">See</a>

Excavator

01-06-2013, 04:23 PM

Maybe some text positioned in a span like this - <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 800px;
padding: 100px;
margin: 0 auto;
background: #999;
}
li {position: relative;}
li a span {
position: absolute;
top: 45px;
left: 0;
display: none;}
li:hover span {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">See<span>How it works</span></a></li>
</ul>
</div>
</body>
</html>

Renovatio

01-06-2013, 06:46 PM

Dear Excavator, thank You very much I have tried it it is even nicer than I imagined my final result, but it doesnt remove the problem: I just want the notes text be closer to the link.

currently it is like:

see

how it works

i want it to be:

see
how it works

Ive tried playing in css doesnt work. it seems like CSS has an invisible line between two lines of text and it doesnt let me make it be closer..

:(

Excavator

01-06-2013, 06:54 PM

Adjust that position by changing the bit I've highlighted in red - li a span {
position: absolute;
top: 45px;
left: 0;
display: none;
}

Renovatio

01-19-2013, 03:00 PM

Thank you excavator :)