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

    CSS Navigation Help Please..T_T

    Hi, I am attempting to create a navigation bar completely out of CSS.

    I have looked at several examples floating on the web and tried to figure it out by myself, yet I had no luck.

    The part I kept on getting stuck at was the color part. I want to create a navigation in which each tab has different color. I would also like to have a sub menu when mouse is rolled over.

    Here's my Photoshop rendering of the kind of menu bar I want:



    If anybody can pinpoint me to the right tutorial or help that will be highly appreciated..=]

    Of course, it's all the better if someone can just code one for me..x]

    Also, I am looking for something not too complicated because I don't want any dirty coding.

    I sound very demanding, but it will be great if it works on all browsers..


    Thanks a bunch for helping me out..=]

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by snowwarrior View Post
    Of course, it's all the better if someone can just code one for me..x]
    Yeah keep dreaming.

    Quote Originally Posted by snowwarrior
    Also, I am looking for something not too complicated because I don't want any dirty coding.
    Then do it yourself.

    Decent menu similar to the one you want here: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    Finally if you still can't figure it out on your own, post questions that specific to the problem you are having or hire someone who knows what they are doing.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Yorkshire, UK
    Posts
    54
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It wouldn't be that hard really,

    you would just need to have an anchor tag that references a span inside for each button:

    CSS:
    Code:
    a.menubutton span{display:none;}
    a.menubutton:hover span{display:block;}
    HTML:
    Code:
    <a class='menubutton' href="#">Menu Item 1<span><a href="">Login</a> | <a href="">Logout</a></span></a>
    That code would make the span appear when hovering over the button with the menubutton class.

    I have been doing these very recently (as ahallicks would tell you :P), and only learnt about them about a week ago, so it isn't hard.

    Hope that helps.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys,

    Thanks for helping out. I will go ahead and mess around with the code a bit and see if I can get this right.

    I will post my result later and you guys can help me out again (hopefully)..x]

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    So I found a script that best matched what I wanted to do and I tried modifying it to my need.

    The problem occurred though...

    I don't really understand how to change each tab's color without being overly redundant in coding.

    Can anybody please teach me how to change each tab's color as in my Photoshop rendering?


    Here is the link to the navigation:
    http://mlife.phpnet.us/navigation/


    And here's the stylesheet coding for the navigation:
    PHP Code:
    #main {
        
    border1px solid #1e75ab;
        
    clearboth;
        
    background#1e75ab;
        
    padding-top2em;
    }

    #contents {
        
    padding1.5em;
        
    background#FFFDF3;
        
    min-height300px;
    }

    #header {
        
    positionrelative;
        
    width100%;
        
    height3em;
        
    width90em/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }

    #header ul#primary {
        
    margin0;
        
    padding0;
        
    positionabsolute;
        
    bottom: -1px;
        
    width90em/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }

    #header ul#primary li  {
        
    displayinline;
        list-
    stylenone;
    }

    #header ul#primary a,#header ul#primary span,#header ul#primary a.current {
        
    width16em;
        
    displayblock;
        
    floatleft;
        
    padding4px 0;
        
    margin1px 8px 0 0;
        
    text-aligncenter;
        
    font-familytahomaverdanasans-serif;
        
    font-size85%;
        
    font-weightbold;
        
    text-decorationnone;
        
    color#FFF;
    }

    #header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
        
    border1px solid #1e75ab;
        
    border-bottomnone;
        
    background#1e75ab;
        
    padding-bottom6px;
        
    margin-top0;
    }

    #header ul#primary a {
        
    background#2382bd;
        
    border-bottom1px #FFF;
    }

    #header ul#primary a:hover {
        
    margin-top0;
        
    border-color#1e75ab;
        
    background#1e75ab;
        
    padding-bottom5px;
    }

    #header ul#secondary {
        
    positionabsolute;
        
    margin0;
        
    padding0;
        
    bottom: -1.4em;
        
    left1px;
        
    width50em/* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }

    #header ul#secondary li a,#header ul#secondary li span {
        
    widthauto;
        
    displayblock;
        
    floatleft;
        
    padding0 10px;
        
    margin0;
        
    text-alignauto;
        
    font-weightnormal;
        
    bordernone;
        
    border-right1px dotted #FFF;
        
    backgroundnone;

    }

    #header ul#secondary li a {
        
    color#c9dce8;
        
    text-decorationunderline;
    }

    #header ul#secondary li a:hover {
        
    color#FFF;
        
    backgroundtransparent;
        
    text-decorationunderline overline;
        
    padding0 10px;
        
    bordernone;
        
    border-right1px dotted #FFF;
    }

    #header ul#secondary li a:active {
        
    color#000;
        
    backgroundtransparent;
    }

    #header ul#secondary li:last-child a { border: none; } 
    Last edited by snowwarrior; 07-20-2007 at 11:13 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will have to set a class to each tab and give it a specific color. The CSS would look something like this
    Code:
    #header ul#primary a.blue {
        background: blue;
        border-bottom: 1px #FFF;
    }
    You would do the same changing the class for each of the other tabs. Look up the term CSS class or CSS id to find out how to use it properly.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Does that mean I have to do the same for this code as well?

    Code:
    #header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
        border: 1px solid #1e75ab;
        border-bottom: none;
        background: #1e75ab;
        padding-bottom: 6px;
        margin-top: 0;

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,, I know it's been a while, but a problem occurred again.

    So, now I am trying to center the navigation and the main content according to the page, but I can't seem to accomplish that for some reason.

    I tried: <div align="center"></div>, but it didn't work..

    I don't know what's going on, but usually I was able to center it without doing anything..=\


    Here's the link to the page where I am having a problem:
    http://mlife.phpnet.us/navigation/

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Use the following for the second 'body':

    Code:
    body {
    	background: #FFFFFF;
    	color: #333;
    	padding: 1em 20px 3em 20px;
    	margin: 0;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh wow,, thanks a bunch..x]

    Didn't know that was the problem.. haha


  •  

    Posting Permissions

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