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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Linking the menu

    Hi, i'm having problems with my navigation.
    Here is the CSS part:
    Code:
    /* Menuja nalt' */
    ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    li {
    	float: left;
    	position: relative;
        margin-bottom: 10px;
    }
    
    
    li:hover ul {
    	display: block;
    }
    /* Butonet e menuse */
    #nav_home {background: url(../images/nav_home.jpg) no-repeat;width: 135px;height:142px; }
    #nav_about {background: url(../images/nav_about.jpg) no-repeat;width: 141px;height:142px; }
    #nav_products {background: url(../images/nav_products.jpg) no-repeat;width: 141px;height:142px; }
    #nav_contact {background: url(../images/nav_contact.jpg) no-repeat;width: 157px;height:142px; }
    #foto {background: url(../images/foto.jpg) no-repeat;width: 293px;height:232px; margin: 0; padding: 0;}
    /* Hover mouse per menu */
    #nav_home:hover, #nav_home1 {background: url(../images/nav_home1.jpg) no-repeat;width: 135px;height:142px; }
    #nav_about:hover, #nav_about1 {background: url(../images/nav_about1.jpg) no-repeat;width: 141px;height:142px; }
    #nav_products:hover, #nav_products1 {background: url(../images/nav_products1.jpg) no-repeat;width: 141px;height:142px; }
    #nav_contact:hover,#nav_contact1 {background: url(../images/nav_contact1.jpg) no-repeat;width: 157px;height:142px; }
    And here is the XHTML:
    Code:
    <ul id="nav">
    <li id="nav_home1"></li>
    <li id="nav_about"></li>
    <li id="nav_products"></li>
    <li id="nav_contact"></li>
    <li><img src="images/foto.jpg" width="294" height="232" border="0" alt="" /></li>
    </ul>
    You know i cant put <a href="#"> before the <li> tag and i don't know how can i do it, so i want your help!


    Here is the demo site http://artiyt.com/tenda/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <ul id="nav">
    <li id="nav_home1"><a href="/home.html">Home</a></li>
    <li id="nav_about"><a href="/about.html">About</a></li>
    .....
    </ul>
    You can neither put an <li> within an anchor nor place an anchor along with an <li>, as a sibling.
    Last edited by abduraooft; 03-06-2009 at 02:46 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, i know that but i want all the block image to be linked.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Artti,
    The one image you have is a clickable link when you do this -
    Code:
    <ul id="nav">
        <li id="nav_home1"></li>
        <li id="nav_about"></li>
        <li id="nav_products"></li>
        <li id="nav_contact"></li>
        <li><a href=""><img src="http://artiyt.com/tenda//images/foto.jpg" alt="" width="294" height="232" /></a></li>
    </ul>
    Try your other buttons like this -
    CSS-
    Code:
    /* Menuja nalt' */
    ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    li {
    	float: left;
    	position: relative;
        margin-bottom: 10px;
    }
    
    
    /* Butonet e menuse */
    /* Butonet e menuse */
    #nav_home, #nav_about,
    #nav_products, #nav_contact {
    width: 135px;
    height:142px; 
    display: block;
    }
    #nav_home {background: url(http://artiyt.com/tenda/images/nav_home.jpg) no-repeat;}
    #nav_about {
    background: url(http://artiyt.com/tenda/images/nav_about.jpg) no-repeat;}
    #nav_products {background: url(http://artiyt.com/tenda/images/nav_products.jpg) no-repeat;}
    #nav_contact {background: url(http://artiyt.com/tenda/images/nav_contact.jpg) no-repeat;}
    markup-
    Code:
    <ul id="nav">
    <li><a href="#" id="nav_home"></a></li>
    <li><a href="#" id="nav_about"></a></li>
    <li><a href="#" id="nav_products"></a></li>
    <li><a href="#" id="nav_contact"></a></li>
    <li><a href=""><img src="http://artiyt.com/tenda//images/foto.jpg" alt="" width="294" height="232" /></a></li>
    </ul>
    Later, when you get it working (because you'll need to fix the :hover part of that now), you won't like how there is a lag waiting for the image to appear the first time you hover over it. Have a look at a CSS rollover menu that doesn't flicker when you hover over it - http://nopeople.com/CSS/CSS_rollover/index.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


  •  

    Posting Permissions

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