Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Ul question, lifting notes to the navigation bar

    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:




    Grateful,

    Ren

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Renovatio,
    Would the title attribute work for you? Like this - <a href="#" title="How it works">See</a>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe some text positioned in a span like this -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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..


  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Adjust that position by changing the bit I've highlighted in red -
    Code:
    li a span {
    	position: absolute;
    	top: 45px;
    	left: 0;
      display: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Renovatio (01-19-2013)

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thanked

    Thank you excavator


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •