css - How do I make the menu tabs the same width and center align the contents in them? -
here css code page:
#drop-nav { width: 1000px; position: absolute; } #contentwrap { margin-top: 40px; } ul li ul li { padding: 10px 18px 5px 0px; text-align: left; width: 100%; display: table-cell; } ul { margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; list-style-position: outside; overflow: visible; position: static; } ul li { border: 1px solid #000000; display: block; position: relative; float: left; background-color: white; } li ul { display: none; background-color: #3333ff; } ul li { padding: 10px 18px 5px 90px; background: #3333ff none repeat scroll 0% 50%; text-decoration: none; white-space: nowrap; color: #ffffff; overflow: visible; text-align: center; display: block; } ul li a:hover { background: #3366ff none repeat scroll 0% 50%; overflow: visible; } li:hover ul { display: block; position: relative; overflow: visible; } li:hover li { float: none; background-color: #3366ff; } li:hover { background: #2346b1 none repeat scroll 0% 50%; } li:hover li a:hover { background: #40a3f6 none repeat scroll 0% 50%; } #drop-nav li ul li { border-top: 0px none; overflow: visible; visibility: visible; font-family: arial,helvetica,sans-serif; text-align: justify; clear: none; display: table; width: 100%; } #content { border-left: 1px solid gray; border-right: 1px hidden gray; padding: 1em; background-color: #dff4ff; float: left; width: 616px; } #rightcolumn { border: 9px hidden #dff4ff; margin: 0 0 -1pt; padding: 1em 1em 47px; float: right; clear: right; visibility: visible; width: 160px; background-color: #ffffcc; max-width: 600px; overflow: hidden; font-size: 8pt; font-weight: normal; font-family: arial; } #container { border: 4px solid gray; margin: 10px auto; color: #333333; line-height: 130%; max-width: 900px; background-color: #dff4ff; overflow: hidden; } #footer { clear: both; background-color: #dff4ff; height: 56px; } here html code page:
<body> <div id="container"> <div id="wrapper"> <div id="headerwrap"> <div id="header"> <center><img style="width: 456px; height: 142px;" src="wkrp_c.gif" alt="logo"></center> <p> <big style="font-family: helvetica,arial,sans-serif;"><big> wisnia-kapp reading programs</big></big></p> <center></center> <a target="_blank" href="http://www.jwisnia.com/wpcms/"><img style="border: 0px solid ; width: 32px; height: 32px;" alt="" src="arrow-88-32.png" align="middle"></a><a target="_blank" style="font-style: italic;" href="http://www.jwisnia.com/wpcms/">visit judith wisnia & assoc.</a><br> <br> </div> </div> </div> <ul id="drop-nav"> <li><a href="#">home</a> </li> <li><a href="about.html">about</a> <ul> <li><a href="students.html">students</a></li> <li><a href="programs.html">programs</a></li> <li><a href="trainings.html">trainings</a></li> </ul> </li> <li><a href="services.html">services offered</a> </li> <li><a href="products.html">our products</a></li> <li><a target="_blank" href="http://www.jwisnia.com/wpcms/contact-us-2/">contact</a> </li> </ul> <div id="contentwrap"> <div id="content"> <p style="font-family: helvetica,arial,sans-serif;"><b><span style="text-decoration: underline;">overview</span></b></p> <p style="font-family: helvetica,arial,sans-serif;"><b>wkrp</b> is rule-governed, multisensory program involves phonological awareness training using storytelling , imagery. <b style="font-family: helvetica,arial,sans-serif;">the wkrp programs</b><span style="font-family: helvetica,arial,sans-serif;"> developed by</span><b style="font-family: helvetica,arial,sans-serif;"> </b>sharon kapp,<b style="font-family: helvetica,arial,sans-serif;"> </b><span style="font-family: helvetica,arial,sans-serif;">a speech language pathologist.</span> </p> <p style="font-family: helvetica,arial,sans-serif;"><b>judith wisnia , associates ("jwa")</b> private group practice in speech/language therapy, occupational therapy, physical therapy, , tutoring/executive function services. jwa has been helping children since 1980. <b>jwa</b> provides <b>wkrp</b> staff training , certification programs contracted direct services in school systems in massachusetts. our staff has provided direct services on 3,000 children. countless other children have received <b>wkrp</b> instruction school teachers , individual practitioners , tutors. </p> <span style="font-family: helvetica,arial,sans-serif;"></span> <span style="font-family: helvetica,arial,sans-serif;"></span><br style="font-family: helvetica,arial,sans-serif;"> <span style="font-family: helvetica,arial,sans-serif;"> </span><span style="font-family: helvetica,arial,sans-serif;"><img style="width: 30px; height: 30px;" alt="" src="confetti-th.png" align="top"></span><span style="font-family: helvetica,arial,sans-serif;"> </span><b style="font-family: helvetica,arial,sans-serif;">wkrp</b><span style="font-family: helvetica,arial,sans-serif;"> celebrating 24th year of providing multisensory rule-governed phonics</span><span style="font-family: helvetica,arial,sans-serif;"></span><span style="font-family: helvetica,arial,sans-serif;"> materials , teacher instruction. </span><span style="font-family: helvetica,arial,sans-serif;"></span><span style="font-family: helvetica,arial,sans-serif;"></span><span style="font-family: helvetica,arial,sans-serif;"> </span></div> </div> <div style="font-family: helvetica,arial,sans-serif;" id="rightcolumnwrap"><big> </big> <div id="rightcolumn"> <p><big><span style="font-weight: bold;">contact us:</span><br> </big></p> <p><big><span style="font-family: helvetica,arial,sans-serif;">judith wisnia , associates, inc.</span><br style="font-family: helvetica,arial,sans-serif;"> <span style="font-family: helvetica,arial,sans-serif;">111 south bedford st</span><br style="font-family: helvetica,arial,sans-serif;"> <span style="font-family: helvetica,arial,sans-serif;">suite 102</span><br style="font-family: helvetica,arial,sans-serif;"> <span style="font-family: helvetica,arial,sans-serif;">burlington, ma 01803</span><br> <br> <img style="width: 24px; height: 24px;" alt="call" src="phone-51-32.png" align="middle">781.272.2100<br> <a href="mailto:jwisnia@conversent.net,judithwkrp@aol.com"><img style="border: 0px solid ; width: 24px; height: 24px;" alt="email" src="email-12-32.png" align="middle"></a><a href="mailto:jwisnia@conversent.net,judithwkrp@aol.com">email us</a><br> <a href="https://www.facebook.com/pages/judith-wisnia-><img style="border: 0px solid ; width: 32px; height: 32px;" alt="facebook" src="facebook-3-32.png"></a> <big></p> </div> <div id="footerwrap"> <div id="footer"> <p> copyright © 2014 judith wisnia , associates, inc. <a href="http://home.comcast.net/%7ejwisnia18/"><img style="border: 2px solid ; width: 34px; height: 19px;" alt="mainlogo" src="http://home.comcast.net/%7ejwisnia18/wkrp/jwalogo.gif" align="middle"></a></p> </div> </div> </div> </div> the current menu items right , tab widths uneven. need aligned , equal widths. submenu items should center aligned , equal width.
here go: jsfiddle. these new styles added:
ul li { display: inline-block; float: none; } ul li { width: 175px; padding: 15px 0px; } ul li ul li { padding: 10px 0px 5px 0px; text-align: center; } li:hover ul { position: absolute; width: 174px; }
Comments
Post a Comment