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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Navigation isn't all on the same height

    Hello,


    So I made my navigation in javascript.
    But now is the navigation not aligned the same with the other images

    2 hovers are lower then the other ones.

    So my question is, how can I get these up?

    This is the link to my site :
    http://site-test.99k.org/

    So how can I get "Over ons" and "Links" up.
    So they are on the same height as the other ones


    Thanks in advance

    Martijn1

  • #2
    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 martijn1,

    <img id="Over ons" is invalid. "Value of attribute "id" must be a single token"

    Check the your code in the validator. See the links about validation in my signature line below.
    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,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The real problem is your images. display: inline; is bottom aligning them. float; left; doesn't seem to help either.

    Look at this stripped down example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 20px 0 50px;
    	background: #999;
    }
    #navlist {background: #ff0;}
    #navlist li{
    	margin: 0 1px;
    	display: inline;
    	list-style-type: none;
    }
    	#navlist2 {
    		overflow: auto;
    		background: #ff0;
    	}
    	#navlist2 li{
    		float: left;
    		margin: 0 1px;
    		list-style-type: none;
    	}
    h4 {margin: 30px 0 10px;}
    </style>
    </head>
    <body>
        <div id="container">
        <h4>display: inline;</h4>
            <ul id="navlist">
                <li><a href="index.html" ><img src="http://site-test.99k.org/images/home.png" id="Home" width="62" border="0" height="30"></a></li>
                <li><a href="overons.html" ><img src="http://site-test.99k.org/images/overons.png" id="Over_ons" width="69" border="0" height="26"></a></li>
                <li><a href="diensten.html" ><img src="http://site-test.99k.org/images/diensten.png" id="Diensten" width="75" border="0" height="27"></a></li>
                <li><a href="concepten.html" ><img src="http://site-test.99k.org/images/concepten.png" id="Concepten" width="82" border="0" height="27"></a></li>
                <li><a href="links.html" ><img src="http://site-test.99k.org/images/links.png" id="Links" width="53" border="0" height="25"></a></li>
                <li><a href="contact.html" ><img src="http://site-test.99k.org/images/contact1.png" id="Contact" width="69" border="0" height="33"></a></li>
            </ul>
        <h4>float: left;</h4>
        <ul id="navlist2">
            <li><a href="index.html" ><img src="http://site-test.99k.org/images/home.png" id="Home2" width="62" border="0" height="30"></a></li>
            <li><a href="overons.html" ><img src="http://site-test.99k.org/images/overons.png" id="Over_ons2" width="69" border="0" height="26"></a></li>
            <li><a href="diensten.html" ><img src="http://site-test.99k.org/images/diensten.png" id="Diensten2" width="75" border="0" height="27"></a></li>
            <li><a href="concepten.html" ><img src="http://site-test.99k.org/images/concepten.png" id="Concepten2" width="82" border="0" height="27"></a></li>
            <li><a href="links.html" ><img src="http://site-test.99k.org/images/links.png" id="Links2" width="53" border="0" height="25"></a></li>
            <li><a href="contact.html" ><img src="http://site-test.99k.org/images/contact1.png" id="Contact2" width="69" border="0" height="33"></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


  •  

    Posting Permissions

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