Jump to content

Search the Community

Showing results for tags 'navigation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Job Boards
    • Jobs
  • Community Lounge and FAQ
    • Forum News
    • Open Forum
    • New Members Forum - Start Here!
  • Entrepreneurship, Business and Marketing
    • Social Media Marketing & Web Marketing
    • Entrepreneurship
    • Career Questions - Asked and Answered
  • StudioWeb
    • StudioWeb
    • StudioWeb News
    • StudioWeb Projects
  • Programming
    • Python
    • Javascript
    • PHP
  • Web Design
    • Beginners Web Design
    • Dreamweaver
    • CSS
    • Advanced Web Design
    • Business of Web Design
    • Web Design News
  • Miscellaneous
    • Cybersecurity
    • Miscellaneous Software
    • Blogs and CMS
    • Web Accessibility
    • Peer-to-Peer Reviews
    • Website Templates
    • Web Design Jobs
    • Test Forum
  • Archives
    • Beginners Web Design
    • Course: The Complete Entrepreneur
    • Web Accessibility
    • Photoshop
    • CSS
    • Forum Rules and Etiquette
    • Flash
    • ASP
    • General Programming
    • Expression Web
    • Beginners Ruby
    • Killersites University
    • Actionscript
  • Uncle Stef's Mentoring Club's *** Getting Started ***


There are no results to display.

There are no results to display.

Product Groups

  • Business & Entrepreneur Courses

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start












Found 1 result

  1. Hi all I am trying to build a website but I am struggling to understand and compute a few things. In the 90's when I first learned HTML we used tables to achieve the look and feel of the website. In comes a new millenium and in comes a much needed new design method .... CSS. I am not sure if this is correct, but I am using <div> where I would have in past used <table> and <tr> (table row) and I am using <span> where I would have used <td> (table data). If this is wrong then I would like to know. Onto my problem: I want to create a drop-down menu on hover. (I need to learn "Pseudo classes" but that will come in a related but new topic). I kinda have the drop-down menu on hover but it needs some tweeking and for that i am struggleing. The problem is that the background-color for the <div> is being overwritten somewhere but I can not see it, the menu is not center in the <div> and the drop-down looks wrong. Here is the css file: /**************** Global ****************/ * { font-family: Tahoma, sans-serif; /* corporate font */ font-size: 12px; /* corporate font size */ text-decoration: none; /* hyperlinks no underline by default */ } div { background-color: #ee2326; /* Corporate red color */ width: 1000px; /* Page width */ margin: 0 auto; /* Center div */ } .shadow { 1px 1px 1px #606163; } /* default shadow */ /**************** Pseudo classes ****************/ a { text-decoration: none;} /* removes underline for hyperlinks */ ul { border: 0px hidden; list-style: none; padding: 0px; margin: 0px; width: 100%; margin-left: auto; margin-right: auto; font-family: Tahoma, sans-serif; font-size: 14px; font-weight: bold; text-shadow:1px 1px 1px #606163; } ul li { display: block; position: relative; float: left; text-align: left!important; text-shadow:1px 1px 1px #606163; } li ul {display: none;} /* Hides drop down menu */ ul li a { display: block; background: #ee2326; padding: 5px 10px 5px 10px; text-decoration: none; white-space: nowrap; color: white; border: 10px 100px; /* Sets size of box */ } ul li a:hover {background: #8523ee;} /* Sets the color of the hover on the parent */ li:hover ul { display: block; /* displays the drop down menu */ position: absolute; } li:hover li {float: none;} li:hover a {background: #ee2326;} /* sets the background-color of the drop down menu */ li:hover li a:hover {background: #8523ee;} /* Sets the color of the hover on the child */ /************************* ID's *************************/ <!------------------NavBar ---------------------> #NavBar { width: 100%; /* Sets the NavBar div to be equal the default div */ /* height: 12px; not needed */ margin: 0 auto; /* trying to center NavBar-Drop but doesn't work */ } #NavBar-Drop li ul li { border-top: 0px; margin: 40px auto; /* Center NavBar - Not working */ } and here is the html code: <div id="NavBar"> <span><ul id="NavBar-Drop"> <li><a href="#">Home</a></li> <li><a href="#">Swimwear</a></li> <li><a href="#">Tops</a></li> <li><a href="#">Bottoms</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">jackets</a></li> <li><a href="#">lingerie</a> <ul> <li><a href="#">Bras</a></li> <li><a href="#">Briefs & Thongs</a></li> <li><a href="#">hosiery</a></li> <li><a href="#">Nightwear</a></li> <li><a href="#">Slips & Teddies</a></li> </ul> </li> <li><a href="#">footware</a></li> <li><a href="#">sale</a></li> <li><a href="#">Additional Link</a> <ul> <li><a href="#">Child Link1</a></li> <li><a href="#">Child Link2</a></li> <li><a href="#">Child Link3</a></li> </ul> </li> </ul> </span> </div> Questions: 1) how do I center the menu in the div? 2) what is filling the <div> with the color white instead of the corporate red? 3) how do I change the size of the child menu so that all the text fits? (The child is the part which drops down when you hover).
  • Create New...