Jump to content

A Novice Coder

Members
  • Posts

    1
  • Joined

  • Last visited

About A Novice Coder

  • Birthday 08/31/1986

Previous Fields

  • Languages
    HTML, CSS

Profile Information

  • Gender
    Female
  • Location
    Tucson, Arizona

A Novice Coder's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hello! I'm working on building a small website for my company. I need help in figuring out why the menu isn't working out... Here is what I've built so far: http://silverbergandsons.com/beta/ I can't figure out why the list items are shifted over to the right like there's an invisible bullet there... this applies to the submenu too. When I use width:100% for the background of the menu, it stretches out the page to the right side... Probably has sometime to do with the invisible bullets in problem #1. I can't get the images/menu buttons centered in the page... And lastly, I've been building this in Chrome... It reeeeeally doesn't look right in IE. lol Here is the HTML (please excuse the messy coding, I will tidy it up and make sure it's W3C validated in the end. Just need help with the JS menu): <html><head><title>S. Silverberg & Sons Jewelers - Tucson, Arizona - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry.</title><meta name="description" content="S. Silverberg & Sons Jewelers - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry." /><meta name="keywords" content="silverberg, sons, tucson, arizona, jewelers, jeweler, jewelry, store, stores, engagement, wedding, bridal, anniversary, ring, rings, band, bands, set, sets, custom, design, designed, designing, diamond, diamonds, gift, gifts, gem, gems, gemstone, gemstones, precious stones, birthstones, bracelet, bracelets, pendant, pendants, necklace, necklaces, earring, earrings, gold, platinum, estate, estates, buy, sell, repair, repairs, appraisal, appraisals, appraiser, insurance, watch, watches, seiko, men, ladies " /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script type="text/javascript" src="java.js"></script></head><body><div class="header" style="text-align:center"><img src="images/header_logo.png" alt="Welcome to S. Silverberg & Sons Jewelers"></div><ul id="menu"><li><a href="#"><img src="images/nav_jewelry.png" border="0" alt="Jewelry" onmouseover="this.src='images/nav_jewelry_select.png'" onmouseout="this.src='images/nav_jewelry.png'" /></a></li><li><a href="#"><img src="images/nav_diamonds.png" border="0" alt="Diamonds" onmouseover="this.src='images/nav_diamonds_select.png'" onmouseout="this.src='images/nav_diamonds.png'" /></a></li><li><a href="#"><img src="images/nav_design.png" border="0" alt="Custom Designing" onmouseover="this.src='images/nav_design_select.png'" onmouseout="this.src='images/nav_design.png'" /></a> <ul class="noJS"> <li><a href="#">Hellenico</a></li> <li><a href="#">Genere</a></li> <li><a href="#">Indulgentia</a></li> </ul></li><li><a href="#"><img src="images/nav_services.png" border="0" alt="Services" onmouseover="this.src='images/nav_services_select.png'" onmouseout="this.src='images/nav_services.png'" /></a></li><li><a href="#"><img src="images/nav_goldbuy.png" border="0" alt="Gold Buying" onmouseover="this.src='images/nav_goldbuy_select.png'" onmouseout="this.src='images/nav_goldbuy.png'" /></a></li><li><a href="#"><img src="images/nav_learn.png" border="0" alt="Learn More" onmouseover="this.src='images/nav_learn_select.png'" onmouseout="this.src='images/nav_learn.png'" /></a></li><li><a href="#"><img src="images/nav_about.png" border="0" alt="About Us" onmouseover="this.src='images/nav_about_select.png'" onmouseout="this.src='images/nav_about.png'" /></a></li><li><a href="#"><img src="images/nav_contact.png" border="0" alt="Contact Us" onmouseover="this.src='images/nav_contact_select.png'" onmouseout="this.src='images/nav_contact.png'" /></a></li></ul></body></html> Here is the CSS: body{padding: 0;margin: 0;background-color:#111111;} .header{background-image:url('images/header_bg.png');background-repeat:repeat-x;} #menu {float: left;background-image:url('images/nav_bg.png');background-repeat:repeat-x;font-family: Georgia;font-size: 12px;margin: auto;}#menu > li {float: left;}#menu li a {display: block;text-decoration: none;text-align:center;}#menu ul {position:absolute;display: none;list-style: none;float: left;}#menu ul li a {width: 80px;padding: 0 1.5em;height: 2em;line-height: 2em;color: #ffffff;text-align: left;background: #000000;}#menu li:hover ul.noJS {display: block;}#menu ul li:hover a {color: #f0bd66;background: #121212;} And here is the javascript: $(function(){ $('#menu').find('> li').hover(function(){ $(this).find('ul') .removeClass('noJS') .stop(true, true).slideToggle('fast'); });}); Any help would be GREATLY appreciated. Thank you in advance! EDIT: If this is more of a CSS question, please feel free to move my topic. Thank you!
×
×
  • Create New...