...

View Full Version : 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>
<!--end container--></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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum