SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML + CS Horizontal Navigation Problem

    Hi, i am a newbie for HTML esp CS. First time i ever used CS.

    I am having this problem:
    1-I want the menu to load from the left of the screen
    2-Use Verdana 10pts formating for parent and sub parent menu
    But i dont know how to. Can anyone help me out.

    Here is my style sheet.
    HTML Code:
    <style>
    #navigation a
    {
    color: #fff;
    background-color: #5D98F5;
    text-decoration: none;
    padding-left: 10px;
    }
    #navigation a span
    {
    background: url(right-tab.gif) right top no-repeat;
    padding-right: 10px
    }
    #navigation a, #navigation a span
    {
    display: block;
    float: left
    }
    /* Hide from IE5-Mac \*/
    #navigation a, #navigation a span
    {
    float: none
    }
    /* End hide */
    #navigation a:hover
    {
    color: #fff;
    background-color: #369;
    padding-left: 10px;
    }
    #navigation a:hover span
    {
    background-color: #369;
    padding-right: 10px
    }
    #navigation ul
    {
    padding-left: 0;
    margin-left: 0;
    background-color: #5D98F5;
    color: White;
    float: left;
    width: 100%;
    }
    #navigation li
    {
    float: left;
    margin: 0;
    list-style:none;
    width:100px;
    border-right: 1px solid #fff;
    } 
    #navigation li {
        position: relative;
    }
    #navigation ul {
        position: absolute;
        left: -999em;
    }
    #navigation li:hover ul, #navigation li.menuHover ul {
        left=0;  /* or however wide your main list items are */
    }
    </style>
    Here is my html code
    HTML Code:
    		<div><script language="jscript">
    menuHover = function() {
    		var navRoot = document.getElementById("navigation").getElementsByTagName("li");
    		for (var i=0; i<navRoot.length; i++) {
    			navRoot[i].onmouseover=function() {
    				this.className+=" menuHover";
    			}
    			navRoot[i].onmouseout=function() {
    				this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
    			}
    		}
    }
    if (window.attachEvent) window.attachEvent("onload", menuHover);</script>
    <ul id="navigation">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About Us</span></a></li>
    <li><a href="#"><span>Services</span></a>
    	<ul>
    		<li><a href="#"><span>Service 1</span></a></li>
    <li><a href="#"><span>Service 2</span></a></li>
    	</ul>
    </li>
    <li><a href="#"><span>Tips</span></a></li>
    <li><a href="#"><span>Testimonial</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
    </div>

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <style>
    #navigation a
    {
    color: #fff;
    background-color: #5D98F5;
    text-decoration: none;
    padding-left: 10px;
    }
    #navigation a span
    {
    background: url(right-tab.gif) right top no-repeat;
    padding-right: 10px;
    }
    #navigation a, #navigation a span
    {
    display: block;
    float: left;
    }
    /* Hide from IE5-Mac \*/
    #navigation a, #navigation a span
    {
    float: none
    }
    /* End hide */
    #navigation a:hover
    {
    color: #fff;
    background-color: #369;
    padding-left: 10px;
    }
    #navigation a:hover span
    {
    background-color: #369;
    padding-right: 10px
    }
    #navigation ul
    {
    padding-left: 0px;
    margin-left: 0px;
    background-color: #5D98F5;
    color: #fff;
    float: left;
    width: 100&#37;;
    }
    #navigation li
    {
    float: left;
    margin: 0px;
    list-style:none;
    width:100px;
    border-right: 1px solid #fff;
    } 
    #navigation li {
        position: relative;
    }
    #navigation ul {
        position: absolute;
        left: -999em;
    }
    /* left: not = */
    #navigation li:hover ul, #navigation li.menuHover ul {
        left:0px;  /* or however wide your main list items are */
    }
    </style>
    I fixed a few things wrong with your code, try that

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate is solved the first problem.

    Now i am trying to display all text using Verdana 10pt fond.
    This is what i have done:

    HTML Code:
    #navigation ul
    {
    padding-left: 0px;
    margin-left: 0px;
    background-color: #5D98F5;
    color: #fff;
    float: left;
    width: 100%;
    font-family: verdana, sans-serif;
    font-size: 10pt;
    }
    The problem is it only displays the sub categories in this formatting and not the main one. what do i do.
    thanks

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    '#navigation ul' is the CSS selector.
    It will apply the following rules to a ul within an element with id="navigation"

    So.. your font needs to be applied to #navigation instead.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for all your help.

    just 1 more small help. How do i set it up so that the fields (space where text is) is auto adjusted based on the lenght.

    If i have a long text say - 'how we started' in the sub menu that its broken down into 3 lines.


Bookmarks

Posting Permissions

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