Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

navigatiemenu aanpassen css

6 antwoorden
  • Hoi Mensen, Wil van het volgende menu de breedte van de vakken vergroten. Heb al een en ander uitgeprobeerd( wat getallen veranderd en in een preview bekeken) door het css te veranderen maar op de een of andere manier krijg ik de breedte van de vakken niet groter. Wat zie ik over het hoofd? Wie kan me wat tips geven. Het gaat om het volgende menu: http://www.cssplay.co.uk/menus/dd_valid_2.html En een twee vraag is hoe ik dit menu kan centreren? Nu staat het links tegen de border. css: <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/dd_valid_2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:20px 0 60px 0; background:#fff; position:relative; z-index:100;} .menu ul {padding:0; margin:0; list-style-type: none;} .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;} .menu ul li ul {visibility:hidden; position:absolute; top:30px; left:0; } .menu ul li:hover a, .menu ul li a:hover {color:#fff; background:#b3ab79;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; width:749px;background:#b3ab79; color:#fff;} .menu ul li:hover ul.right_side li, .menu ul li a:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} .menu ul li:hover ul.left_side li, .menu ul li a:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} .menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} .menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:30px; } .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; color:#000; background:#dfc184;} .menu ul li:hover ul.right li {float:right;} .menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;} </style> html: <div class="menu"> <ul> <li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="right_side"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="right_side"> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="right_side"> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left_side"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div>
  • Met de breedte bedoel ik de lengte van elk blokje. Even voor de duidelijkheid jan
  • Wil de navigatiebalk ook centreren. Heb in .menu toegevoegd margin-left auto en margin right: auto. Firefox geeft het menu nu mooi gecentreerd weer. Maar in IE 6 verandert er niets. Waar kan dit aan liggen? Heb inmiddels de code aan het begin toegevoegd:: { padding: 0px; margin: 0px; } maar dat heeft ook geen invloed Jan
  • Heb een tip gezien en dit er nu aan toegevoegd. het werkt nu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> Mooi gecentreerd nu
  • Maar mijn probleem om elk vakje breder te maken en dus ook de breedte van het menu daar ben ik nog niet achter. Heb al verscheidene waarden veranderd zonder het gewenste succes. Tips?
  • [quote:bdf7fac96d="Jan2000"]Maar mijn probleem om elk vakje breder te maken en dus ook de breedte van het menu daar ben ik nog niet achter. Heb al verscheidene waarden veranderd zonder het gewenste succes. Tips?[/quote:bdf7fac96d] Welke waarden heb je dan veranderd? Als je de "width's" wijzigt moet het veranderen. er staan er 4 in: [code:1:bdf7fac96d] .menu {font-family: arial, sans-serif; width:749px; .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; .menu ul li a:hover ul {visibility:visible; width:749px; [/code:1:bdf7fac96d] De 749 is de totale breedte 1x voor de menubalk en 1x voor balk die komt met hover. 106 voor het linkvakje en 101 voor de link zelf. wimb

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.