Search the Community

Dear Sir, first of all thank you for such helpful website. Now as w3css framework is very useful and easy to implement. I want to suggest if following modification is possible in your new version of w3css. 1. Menu structure with ul and li elements rather than using only a tags. That will be easily implementable in WordPress default menu structure and having drop-down facility also available. 2. Menu items are being used 2 times for making it responsive rather it should use items only single time.

Hi, I'm trying to setup a sidenav with multiple accordion dropdowns. The first one seems to work fine but the rest just reopen the first in the list. Anyone any idea what I'm doing wrong? It may well be blatantly obvious as I'm no expert! Thanks, Dave. The code I'm using (css) is: ____________________________________________________________________________________ <nav class="w3-sidenav w3-light-grey w3-card-2" style="width:140px;"> <a href="index.php">Home</a> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="one.php">one</a> <a href="two.php">two</a> <a href="three.php">three</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Second group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Third group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="seven.php">seven</a> <a href="eight.php">eight</a> <a href="nine.php">nine</a> </div> </div> <a href="https://twitter.com/my_page" target="_blank"><img src="/img/twitter.gif" width="100px"></a> <a href="https://www.facebook.com/my_page/" target="_blank"><img src="/img/facebook.gif" width="100px"></a> </nav> ____________________________________________________________________________________

I'm working on a drop-down menu for someone and it's the largest one I've had to do yet (drop-downs are not a strong point of mine, and the largest I've ever had to do only had the one layer of drop-downs). This particular menu I want to have centered, along with it's drop-downs, and I was advised to code the first set of uls like this: This is the HTML for the menu: <ul class="topbar"> <li><a href="">News</a></li> <ul><li><a href="">Blog</a></li> <li><a href="">Podcasts</a></li> </ul><!-- CLOSES NEWS SUB-SECTION --> <li><a href="">About</a></li> <ul><li><a href="">Story</a></li> <li><a href="">Staff</a></li> </ul><!-- CLOSES ABOUT SUB-SECTION --> <li><a href="">Rules</a></li> <li><a href="">World Lore</a></li> <ul><li><a href="">Races</a></li> <ul><li><a href="">The Sidhe - Society</a></li> <ul><li><a href="">Sidhe Naming Conventions & Languages</li> <li><a href="">Sidehe Anatomy</a></li> <li><a href="">Courts of the Sidhe</a></li> <li><a href="">Clans of the Sidhe</a></li> <li><a href="">The Danuist Religion</a></li> <li><a href="">Criminal Orders of Cels</a></li> </ul><!-- CLOSES SIDEHE SOCIETY SUB-SECTION --> <li><a href="">The Aesir - Society</a></li> <ul><li><a href="">Aesir Naming Conventions & Languages</a></li> <li><a href="">Aesir Anatomy</a></li> <li><a href="">Brotherhoods of Norland</a></li> <li><a href="">The Faith of Norland</a></li> <li><a href="">Dishonoured Folk</a></li> </ul><!-- CLOSES AESIR SOCIETY SUB-SECTION --> </ul><!-- CLOSES RACES SUB-SECTION --> <li><a href="">History</a></li> <ul><li><a href="">Historical Lands & People</a></li> </ul> <li><a href="">Magic</a></li> <ul><li><a href="">Draiocht: Magic of the Sidhe<a></li> <li><a href="">Seird: Magic of the Aesir</a></li> </ul><!-- CLOSES MAGIC SUB-SECTION --> <li><a href="">Warfare & Technology</a></li> <li><a href="">Lands & Nations</a></li> <ul><li><a href="">Calendars & Dating</a></li> <li><a href="">Cultural Interaction</a></li> </ul><!-- CLOSES LANDS AND NATIONS SUB-SECTION --> <li><a href="">Forum</a></li> <ul><li><a href="">Search</a></li> <li><a href="">Members</a></li> <li><a href="">Calendar</a></li> <li><a href="">MyBB Help</a></li> </ul><!-- CLOSES FORUM SUB-SECTION --> <li><a href="">Character Creation!</a></li> <li><a href="">Guides</a></li> <ul><li><a href"">Guide to Account Switching</a></li> <li><a href="">Character Faults</a></li> <li><a href="">Guild Wars 2 Guidebook</a></li> <ul><li><a href="">Who is Your Character</a></li> <ul><li><a href="">Playing a Good-aligned Character</a></li> <li><a href="">How to Avoid Purple Person Syndrome</a></li> <li><a href="">Playing a Evil-aligned Character</a></li> </ul><!-- CLOSES WHO IS YOUR CHARACTER SUB-SECTION --> <li><a href="">Races of Tyria</a></li> <ul><li><a href="">Charr</a></li> <ul><li><a href="">Charr Naming Conventions</a></li> </ul><!-- CLOSES CHARR NAMING CONVENTIONS --> </ul><!-- CLOSES CHARR SUB-SECTION --> <li><a href="">Humans</a></li> <ul><li><a href="">Human Naming Conventions</a></li> <li><a href="">Personality</a></li> <li><a href="">Continental Tyrian History</a></li> <li><a href="">Elonian History</a></li> <li><a href="">Canthan History</a></li> <li><a href="">Human Ethnicity & Social Class</a></li> </ul><!-- CLOSES HUMAN SUB-SECTION --> <li><a href="">Norm</a></li> <ul><li><a href="">Norm Naming Conventions</a></li> </ul><!-- CLOSES NORM NAMING CONVENTIONS --> <li><a href="">Sylvari</a></li> <ul><li><a href="">Sylvari Naming Conventions</a></li> </ul> <!-- CLOSES SYVARI NAMING CONVENTIONS --> <li><a href="">Asura</a></li> <ul><li><a href="">Asura Naming Conventions</a></li> </ul><!-- CLOSES ASURA NAMING --> <li><a href="">Other Sources for Racial Names</a></li> <li><a href="">Racial Abilities & Magic</a></li> </ul><!-- CLOSES RACES OF TYRIA --> <li><a href="">Professions & Magic</a></li> <ul><li><a href="">Warrior (Scholar)</a></li> <li><a href="">Guardian (Soldier)</a></li> <li><a href="">Engineer (Adventurer)</a></li> <li><a href="">Ranger (Adventurer)</a></li> <li><a href="">Thief (Adventurer)</a></li> <li><a href="">Elementalist (Scholar)</a></li> <li><a href="">Necromancer (Scholar)</a></li> <li><a href="">Mesmer (Scholar)</a></li> </ul><!-- CLOSES PROFESSIONS & MAGIC SUB-SECTION --> </ul><!-- CLOSES GUILD WAR 2 GUIDE SUB-SECTION --> </ul> <li><a href="">Contact</a></li></ul><!-- CLOSES TOPBAR --> (Apologies if the spacing doesn't look as it should on here.) Do I need to define styling for all the ul sets, or will just using the .topbar ul suffice?

Hi I am just self-learning CSS and am practising in a new WordPress site. It is only hosted locally for now so sorry I can't provide a link. I'm sure this is easy for a CSS guru though I am having trouble center aligning the text (i.e page links) within my horizontal navigation menus. I tried using padding (which works) though discovered it is displayed differently in different browsers (I am still learning about using universal CSS for multiple browsers). I read a few tutorials regarding using "margin: auto" and "align:center" though I have no idea where to use it in my code. I have tried a few things though can't get anything to work so any guidance would be much appreciated. [/font][/color] #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);} #subnav ul {float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;//text-indent: -9999px;} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} [color=#282828][font=helvetica, arial, sans-serif] Thanks so much.