Hey all, still a rookie to CSS so i'm not sure how easy or difficult a fix this is? Trying to adjust the legendary suckerfish menu ( http://htmldog.com/articles/suckerfish/dropdowns/example/ ) to fit my layout but running into some trouble simply trying to fix the width of the top Nav. I would like it to be 760px wide. I've figured out by adjusting... #nav, #nav ul { float: left; width: 760px; <-- sets bar width list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; } seems to work but throws off all the rollovers. Also, why does the menu break on multiple lines if text runs to big? Can this be prevented? any help would be waaaay appreciated! Thanks! > j
Sure thing... heres what i have for the menu so far.. notice all the line breaks / looking to have this on one line fixed at 760 width? much thx.
hmmm... strange? On a mac, used there internal .zip compresion - maybe the reason? regardless here it is again... and if this fails.. This is the HTML & CSS <---------- HTML ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link href="suckerfish_level_2_Styled.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { background-color: #7C6240; } --> </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent){ window.attachEvent("onload", sfHover); } else { // for IE mac if (document.all && document.getElementById) window.onload=sfHover; } //--><!]]></script> </head> <body> <ul id="nav"> <li><a href="#" class="top_parent">Portfolios & Cases</a> <ul> <li><a href="#" class="subMenu_arrow">Accent Products</a> </span> <ul> <li><a href="#" class="child">Accent Gray Portfolios</a></li> <li><a href="#" class="child">Accent Black Portfolios</a></li> <li><a href="#" class="child">Accent Albums</a></li> <li><a href="#" class="child">Accent 4x6x2 Box</a></li> <li><a href="#" class="child">Accent4x6x11 Storage Box</a></li> <li><a href="#" class="child">Accent Cd/dvd Box</a></li> <li><a href="#" class="child">Accent Binder Box__ (S-series)</a></li> <li><a href="#" class="child">Accent Binder Box__ (L-series)</a></li> <li><a href="#" class="child">Accent Cd Storage Kit W/ Caddies</a></li> </ul> </li> <li><a href="#" class="subMenu_arrow">Cases</a> <ul> <li><a href="#" class="child">Museum Cases</a></li> <li><a href="#" class="child">Carry Case</a></li> <li><a href="#" class="child">Tenba Port Cases</a></li> <li><a href="#" class="child">Tenba Presta Case</a></li> <li><a href="#" class="child">Tenba Airbook</a></li> <li><a href="#" class="child">Tranzporter Cases</a></li> <li><a href="#" class="child">EZ Carrier</a></li> <li><a href="#" class="child">Closeout Tenba Exhibit Cases</a></li> <li><a href="#" class="child">Slim-line Carry Case Combo</a></li> </ul> </li> <li><a href="#" class="subMenu_arrow">Onyx Portfolio Boxes</a> <ul> <li><a href="#" class="child">1-3/8" Onyx Portfolio</a></li> <li><a href="#" class="child">2" Onyx Portfolio</a></li> <li><a href="#" class="child">4" Onyx Portfolio</a></li> </ul> </li> <li><a href="#" class="parent">Gallery Portfolio Boxes</a></li> <li><a href="#" class="parent">Digital Print Folio</a></li> <li><a href="#" class="parent">Portfolio & Board Combo</a></li> <li><a href="#" class="parent">Manufacturers Seconds Sale</a></li> <li><a href="#" class="parent">Adhesive Back Vinyl Label</a></li> </ul> </li> <li><a href="#" class="top_parent">Boxes</a> <ul> <li><a href="#" class="subMenu_arrow">4x6'' Print Organizers </a> <ul> <li><a href="#" class="child">Metal Edge QPO 2400</a></li> <li><a href="#" class="child">Deluxe Shoe Box QPO 1200</a></li> <li><a href="#" class="child">Metal Edged QPO 1000</a></li> <li><a href="#" class="child">Deluxe Shoe Box</a></li> <li><a href="#" class="child">Accent 4x6x2 Box</a></li> <li><a href="#" class="child">Accent4x6x11 Storage Box</a></li> </ul> </li> <li><a href="#" class="subMenu_arrow">Metal Edge Boxes</a> <ul> <li><a href="#" class="child">Drop-front Boxes 3''</a></li> <li><a href="#" class="child"> Drop-front Boxes 1-1/2''</a></li> <li><a href="#" class="child">Document Boxes</a></li> <li><a href="#" class="child">Hinged Lid Boxes</a></li> <li><a href="#" class="child">Short Top Boxes</a></li> <li><a href="#" class="child">All-purpose Index Cards</a></li> <li><a href="#" class="child"> Film Storage Systems</a></li> <li><a href="#" class="child">35mm Slide Storage System</a></li> <li><a href="#" class="child">Document Box Kit</a></li> </ul> </li> <li><a href="#" class="parent">Print Lux Boxes</a></li> <li><a href="#" class="parent">Print Pack Proof Boxes</a></li> <li><a href="#" class="parent">Legacy Print Box</a></li> <li><a href="#" class="parent">Safe Ship™ Shipping Boxes</a></li> <li><a href="#" class="parent">Record Storage Boxes</a></li> <li><a href="#" class="parent">News Storage Kits</a></li> <li><a href="#" class="parent">Record Storage Boxes</a></li> <li><a href="#" class="parent">Adhesive Back Vinyl Label</a></li> <li><a href="#" class="parent">Pop Lock Legal Document Box</a></li> </ul> </li> <li><a href="#" class="top_parent">Binders & Albums</a> <ul> <li><a href="#" class="subMenu_arrow">3-ring Binder Pages</a> <ul> <li><a href="#" class="child">Print And Slide Pages</a></li> <li><a href="#" class="child">3-ring Page Protectors</a></li> <li><a href="#" class="child">Acid-free Paper Inserts</a></li> <li><a href="#" class="child">4x6 Sonic Page</a></li> <li><a href="#" class="child">Two Pocket Cd Pages</a></li> <li><a href="#" class="child">Eight Pocket Cd Pages</a></li> </ul> </li> <li><a href="#" class="subMenu_arrow">Binders</a> <ul> <li><a href="#" class="child">Collector Grade Ring Binders</a></li> <li><a href="#" class="child">Matching Binders Slip Case Set</a></li> <li><a href="#" class="child">Archival Page Lifters</a></li> <li><a href="#" class="child">1'' Collector Grade Ring Binders</a></li> <li><a href="#">Binder Box™ Binder-in-a-box</a></li> <li><a href="#" class="child">Ring Folio Binder Box</a></li> <li><a href="#">Accent Binder Box__ (S-series)</a></li> <li><a href="#">Accent Binder Box__ (L-series)</a></li> <li><a href="#"> Light Blue Binders</a></li> <li><a href="#"> Binder / File Hangers</a></li> </ul> </li> <li><a href="#" class="parent">Accent Albums</a></li> <li><a href="#">Album Mount Hinge</a></li> <li><a href="#">Mounting Corners / Tape</a></li> <li><a href="#">Binder / File Hangers</a></li> <li><a href="#">Adhesive Back Vinyl Label</a></li> </ul> </li> <li><a href="#" class="top_parent">Enclosures</a> <ul> <li><a href="#" class="parent">Flap Envelopes</a></li> <li><a href="#" class="parent">Open-end Envelopes</a></li> <li><a href="#" class="parent">Original Negative 4x5 Envelope</a></li> <li><a href="#" class="parent">HD Poly Envelopes</a></li> <li><a href="#" class="parent">Polyethylene Bags</a></li> <li><a href="#" class="parent">File Folders – Full, Half & Third Cut</a></li> <li><a href="#" class="parent">Hanging File Folders</a></li> <li><a href="#" class="parent">Expansion Folders</a></li> <li><a href="#" class="parent">Crystal Clear Bags</a></li> <li><a href="#" class="parent">Flap - Envelope Folio</a></li> </ul> </li> <li><a href="#" class="top_parent">Kits & Accessories</a> <ul> <li><a href="#" class="subMenu_arrow">Accessories </a> <ul> <li><a href="#" class="child">Desiccant Canisters</a></li> <li><a href="#" class="child">White Gloves</a></li> <li><a href="#" class="child">Mounting Corners / Tape</a></li> <li><a href="#" class="child">Adhesive Back Vinyl Label</a></li> <li><a href="#" class="child">Linen Tape</a></li> <li><a href="#" class="child">Filmoplast Tapes</a></li> <li><a href="#" class="child">Picture Wire</a></li> <li><a href="#" class="child">Archival Page Lifters</a></li> </ul> </li> <li><a href="#" class="subMenu_arrow">Digital Media Storage</a> <ul> <li><a href="#" class="child">Accent Cd/dvd Box</a></li> <li><a href="#" class="child">Accent Cd Storage Kit W/ Caddies</a></li> <li><a href="#" class="child">CD / DVD Sleeves</a></li> <li><a href="#" class="child">CD Storage Kit</a></li> <li><a href="#" class="child">Accent Binder Box__ (S-series)</a></li> <li><a href="#" class="child">Accent Binder Box__ (L-series)</a></li> <li><a href="#" class="child">Archival Jewel Case</a></li> <li><a href="#" class="child">Kodak Gold CD-R & DVD-R / Cases</a></li> </ul> </li> <li><a href="#" class="parent">News Storage Kits</a></li> <li><a href="#" class="parent">Metal Edge QPO 2400</a></li> <li><a href="#" class="parent">Deluxe Shoe Box Qpo 1200</a></li> <li><a href="#" class="parent">Metal Edged Qpo 1000</a></li> <li><a href="#" class="parent">Four-up Negative File Kit</a></li> <li><a href="#" class="parent">Accent Print Storage Kit</a></li> <li><a href="#" class="parent">Complete Frame Kits</a></li> <li><a href="#" class="parent">Portfolio & Board Combo</a></li> <li><a href="#" class="parent">Tenba & Onyx Combo Kits</a></li> <li><a href="#" class="parent">Accent CD Storage Kit w/Caddie</a></li> </ul> </li> <li><a href="#" class="top_parent">Sleeves</a> <ul> <li><a href="#" class="parent">Side Loading Print Sleeves</a></li> <li><a href="#" class="parent">Side Lock Film Sleeves</a></li> <li><a href="#" class="parent">CD / DVD Sleeves</a></li> <li><a href="#" class="parent">Negative File Folders</a></li> <li><a href="#" class="parent">Film / Print Sleeves</a></li> <li><a href="#" class="parent">Clear Mount Sleeves</a></li> <li><a href="#" class="parent">35mm Mounted Slide Sleeves</a></li> <li><a href="#" class="parent">Film Interleaving Folder</a></li> <li><a href="#" class="parent">Film Storage Systems</a></li> </ul> </li> <li><a href="#" class="top_parent">Frames</a> <ul> <li><a href="#" class="subMenu_arrow">Pre-cut Frames </a> <ul> <li><a href="#" class="child">Pre-cut Aluminum Frame Profile 111</a></li> <li><a href="#" class="child">Pre-cut Aluminum Frame Profile 105</a></li> <li><a href="#" class="child">Pre-cut Aluminum Frame Profile 115</a></li> <li><a href="#" class="child">Pre-cut Aluminum Frame Profile 102</a></li> <li><a href="#" class="child">Pre-cut Aluminum Frames Listed By Size & Profile</a></li> </ul> </li> <li><a href="#" class="parent">Complete Frame Kits</a></li> <li><a href="#" class="parent">Custom Frames</a></li> <li><a href="#" class="parent">Acrylite Op3</a></li> <li><a href="#" class="parent">Acid Free Foamboard</a></li> <li><a href="#" class="parent">Picture Wire</a></li> <li><a href="#" class="parent">Frame Hardware</a></li> </ul> </li> <li><a href="#" class="top_parent">Board & Paper</a> <ul> <li><a href="#" class="subMenu_arrow">Museum Board </a> <ul> <li><a href="#" class="child">Bright White 100% Cotton Museum Board</a></li> <li><a href="#" class="child">Bright White 2ply 100% Cotton Museum Board</a></li> <li><a href="#" class="child">Antique White 100% Cotton Museum Board</a></li> <li><a href="#" class="child">Black 100% Cotton Museum Board</a></li> <li><a href="#" class="child">Museum Board Sale 8x10 & 9x12 Sizes</a></li> </ul> </li> <li><a href="#" class="parent">Pre-cut Exhibition Mats</a></li> <li><a href="#" class="parent">Custom Mat Cutting</a></li> <li><a href="#" class="parent">Conservation Board</a></li> <li><a href="#" class="parent">Mounting Corners / Tape</a></li> <li><a href="#" class="parent">Linen Tape</a></li> <li><a href="#" class="parent">Filmoplast Tapes</a></li> <li><a href="#" class="parent">Archival Tissue</a></li> <li><a href="#" class="parent">Acid Free Foamboard</a></li> <li><a href="#" class="parent">Archival Paper</a></li> </ul> </li> </ul> </body> </html> HTML: <-------------- /HTML ------------> <------------- CSS ---------------> @charset "ISO-8859-1"; body { font-family: Arial, Helvetica, sans-serif; font-size: 85%; } #nav, #nav ul { float: left; width: 760px; list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; } #nav a { display: block; width: 10em; w\idth: 6em; color: #7C6240; text-decoration: none; padding: 0.25em 2em; } #nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; } #nav li { float: left; padding: 0; width: 10em; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; } #nav li li { padding-right: 1em; width: 13em } #nav li ul a { width: 13em; w\idth: 9em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { background: #eda; } HTML: <-------------- /CSS ------------>