www.webdeveloper.com
Results 1 to 5 of 5

Thread: HTML Goodies Look

  1. #1
    Join Date
    Oct 2005
    Posts
    4

    HTML Goodies Look

    Could somebody show me where in the source the Table for HTML Goodies Navigation panel is?

    I want to do something similar, but I want to see how they did it.

    I don't see it in the source.
    Or is it part of the CSS?

  2. #2
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    Yup, it looks like the CSS:

    /*---navigation control---*/
    #myMenu {
    width: 100%;
    background-color:#ffffff;
    }
    #myMenu span {
    display: none;
    visibility: hidden;
    }
    #myMenu a {
    display: block;
    padding-right: 0.4em;
    padding-left: 0.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    text-decoration: none;
    }
    #myMenu a:link {
    background-color:#CCCCCC ;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px; font-weight:normal;
    border-top: solid #ffffff 1px;
    }
    #myMenu a:visited {
    background-color: #CCCCCC;
    color: black;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
    border-top: solid #ffffff 1px;
    }
    #myMenu a:hover {
    background-color: #54A4DE;
    color: white;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none; Font-Size:10px; font-weight:bold;
    border-top: solid #ffffff 1px;
    }
    #myMenu a:active {
    background-color: ##CCCCCC;
    color: white;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
    border-top: solid #ffffff 1px;
    }

    --------------------------------------
    Though it could be shortened to:
    #myMenu {
    width: 100%; background:white none;
    }
    #myMenu span {
    display: none; visibility: hidden;
    }
    #myMenu a {
    display: block; padding:0.2em 0.4em 0.2em 0.5em;
    }
    #myMenu a:link, #myMenu a:visited {
    background:#cccccc none; font-family: "verdana", "arial", "helvetica", sans-serif;
    colof:black; text-decoration: none; font-size:10px; font-weight:normal;
    border-top: solid #ffffff 1px;
    }
    #myMenu a:hover, #myMenu a:active {
    background:#54a4de none; color: white;
    }
    ---------------------------------------
    with:
    HTML Code:
    <div id="myMenu">
    <a href="/">home</a> <span>|</span>
    <a href="/introduction/about/">about</a> <span>|</span>
    <!-- <a href="/introduction/book_sales/">html goodies books</a> <span>|</span> -->
    <a href="/introduction/intro/">non-technical introduction</a> 
    <a href="/introduction/newsletter_archive/">newsletter archive</a> <span>|</span>
    </div>
    ...

    Check-out Firefox's Web Developer Extension to be able to check-out the css when you need to.

    El
    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  3. #3
    Join Date
    Oct 2005
    Posts
    4
    When I use it, for some reason, it underlines, like on HTML goodies it does PRIMERS and BEYOND HTML.

    Anyone know why?

    And how do I get rid of a think line at the end?

  4. #4
    Join Date
    Oct 2005
    Posts
    4
    Who am I kidding. I cant do this.

    Let me explain what I want.

    I want it to be similar to Goodies.

    I want a image page length on top, and have below on the left side nearest the top image a nav, similar to the one goodies has, with a only one change, I want when you hover the background to be grey.

    Then I want to the left of the nav, and below the image a box which has the information, and pictures on the sides.

    If anyone has a messanger service, and wants to help me out step by step with CSS, it would be greatly appreciated.

    This is for school, and I need some help.

    Thanks!

  5. #5
    Join Date
    Oct 2005
    Posts
    4
    Actully, I think I got it.
    I learned how to do what I need.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles