Search the Community

Here's my code: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar" id="myNavbar"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/home.htm">Home</a> <a href="https://www...">Store</a> <a href="https://www.ups.com/track?loc=en_US&requester=ST/">Track Your Package</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/aboutme.htm">About Me</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/artclub.htm">Andrew's Art Club</a> <div class="dropdown"> <button class="dropbtn">Need to Know <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/returns.htm">Returns</a> <a href="#">Shipping Claims</a> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> <a href="https://www...">Help Center</a> </div> </div> <a href="#">Deals</a> <a href="https://www...">Sign-in</a> <div class="dropdown"> <button class="dropbtn">Languages <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">English 🇺🇸/🇬🇧</a> <a href="https://www...">Español 🇪🇸/🇲🇽</a> <a href="https://www...">Français 🇫🇷/🇨🇦</a> <a href="https://www...">Русский 🇷🇺 </a> <a href="https://www...">Italiano 🇮🇹</a> <a href="https://www...">Deutsche 🇩🇪</a> <a href="https://www...">中国人 🇨🇳/🇹🇼/🇭🇰</a> <a href="https://www...">Português 🇵🇹/🇧🇷</a> </div> </div> </div> </div> </nav> I was super excited that the navbar works now, only to be crushed when the dropdowns stopped working. Any suggestions?

I am not a fan of Internet Explorer but trying to get my html and css working well with it. #nav { font-family:"Arial Black", Gadget, sans-serif; text-align:left; display:inline-block; width:0px auto; /*width:100%; text-align:right;*/ margin:0px auto; padding:0; background:#5C5B5E; /* background color */ border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; /*box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);*/ } #nav li { margin:10px; float:left; position:relative; list-style:none; } #nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } #nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; } #nav ul { opacity:0; visibility:hidden; padding:0; width:175px; position:absolute; background:#5C5B5E; /*sub background color*/ border:1px solid #5C5B5E; /*sub border color*/ border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s; } #nav ul li { float:none; margin:0; } <div style="position:relative; z-index:2;"> <ul id="nav"> <li><a href="?p=home#home">Home</a></li><br /> <li><a href="?p=home#services">Services</a></li><br /> <li><a href="?p=home#about">About us</a></li><br /> <li><a href = "javascript:void(0)" onclick = "document.getElementById('signin').style.display='block';document.getElementById('fade').style.display='block'">Login</a></li> </ul> </div> How do I get this to be IE friendly?

Hello W3Schools! Its been a while I am trying to help a friend setting up he's webshop. It is already online but trying to make it look more nice according to webdesign template - this is hes website shop (www.thai-online.dk) i have already changed A LOT on this design, now i mostly need the menu... as you see the menu navigation has a lot of categories, and he told me that he wanted to add a lot more in the future if this shop could run online, so i am trying to figure out a solution for this. I already like the design myself, except the menu, so i have come to a solution that i am working on and hopefully you can help me out, work with me. As you see i currently have added 13 Categories, now my idea is to code some PHP into the menu on OpenCart so that if the menu design is ABOVE "1100px" in width AND has more than 7-8 categories on the menu, it will only show the 7-8 categories and at the end of it all show a little plus sign "+", when clicked on the plus sign a little side-menu will appear out from that little plus sign. The reason for using the 1100px width thing is to know if its on a pc orr on a mobile (if you know a better way please tell me, this is just to show you what i want) i know for sure the "plus sign" already has been made somewhere, but how to actually do it? We are using opencart version 2.0.1.2 or something like that... this is the code i found on the .tbl file: <?php foreach ($categories as $category) { ?> <?php if ($category['children']) { ?><li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><span><?php echo $category['name']; ?></span> <img width="8" height="8" class="menu-close" src="catalog/view/theme/atr374opc2101/image/menu_close.gif" /><img width="8" height="8" class="menu-open" src="catalog/view/theme/atr374opc2101/image/menu_open.gif" /></a> <div class="dropdown-menu"> <div class="dropdown-inner"> <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?> <ul class="list-unstyled"> <?php foreach ($children as $child) { ?><!-- --><li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li><!-- --><?php } ?> </ul> <?php } ?> </div> <a href="<?php echo $category['href']; ?>" class="see-all"><span><?php echo $text_all; ?> <?php echo $category['name']; ?></span></a></div> </li><?php } else { ?><!-- --><li><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a></li><?php } ?> <?php } ?> On another note, we are also using BootStrap (latest version) to make the design responsive. And the reason why i use the 1100px width, like i said before is because of knowing if the screen is that wide AND to tell if i should be adding the category addon... if the screen however is less than 1100px (or so...), the menu should be normal. Reason why i do this is because i already like the responsive design, i only need to edit the PC-Screen design a little bit so the menu can fit without problems. Hope you all can help out one way or another, still struggling with this little thing Thanks in advance and again, its been a while, so..... HELLO // rootKID

I placed a few orderd lists inside another orderd list to have a nested structure. On my screen, i have what i was going for and it works perfectly and works user friendly. However, HTML validator says I have a few errors (only on my nested list). I have cut down the code to sayd code. So how should i solve this problem? Is this an error inside the validator itself? Since it seems to be working perfectly. Kind regards =D Code:

Hey guys/gals, I am a bit of a coding dinosaur, and recently got back into html coding, and have slowly been developing my comedy groups website. I've been slowly working with "css", and the list functionality On my event page, I want to display rows of 3 events each, that will have a rounded rectangle background, and the information about each event (with a picture) enclosed within the rectangle. You can find what I am working on at www.standupseoul.com/test1.html My problem is that I need to: 1. Align the 3 events to the middle of the page, not to the right. 2. I want there to be some separation between each <li> . As you can see, they bleed into each other. You should be able to view the source on my page. Any help, suggestions, or tips would be greatly appreciated. If you see some of my coding looks messy or I've put something in a bad spot, feel free to give me your opinion. In the end, I want it to look like I have on this page, but without using Tockify. http://www.standupseoul.com/pages/events.html I used to make pages back in the 90s and early 2000s with just HTML and a little java script, Im kind of getting back into all of this slowly. Thanks a lot!

Hi, I'm making a menu script with several options. With ul and li. The script works but I cant find a way to have a start up page or so selected. What happens now is that the last chosen page is showing in the browser unless < a href "somepage"> is used and targeted in the obtained name attribute. <ul class="slideuptabs"> <li><a href="http://localhost/MyLocation/home.php" target="lcell"><span>Home</span></a></li> <li><a href="http://localhost/MyLocation/home2.php" target="lcell"><span>Home2</span></a></li> <li><a href="http://localhost/MyLocation/home3.php" target="lcell"><span>Home3</span></a></li> <li><a href="http://localhost/MyLocation/home4.php" target="lcell"><span>Home4</span></a></li> <li><a href="http://localhost/MyLocation/home5.php" target="lcell"><span>Home5</span></a></li> <li><a href="http://localhost/MyLocation/home6.php" target="lcell"><span>Home6</span></a></li> </ul> <br><br> <table class = "maincell" border="2" cellpadding="2" cellspacing="2"> <tbody> <tr> <td class="lcell" name ="lcell"><iframe src=" " name="lcell" width="99%" height="99%" framebo rder="0"> </iframe> </td> <td class="rcell" name ="rcell"><iframe src=" " name="rcell" width="99%" height="99%" framebo rder="0"> </iframe><br> </td> </tr> </tbody> </table> Is there a solution do this at loading the site or frame page? Can it be done in html or should I use another language? .

I have prepared Horizontal menu for my website, I have utilised css3 to prepare my menu. Following are the code <body> <ul> <li> <a href="http://www.spinfonet.com/jobs.html">Jobs</a> </li> <li> <a href="http://www.spinfonet.com/matrimony.html">Matrimony</a> </li> <li> <a href="http://mydomain.com/property.html">Property</a> </li> </ul><img alt="Splogo" src="Splogo.jpg"> <ul> <li> <a href="http://mydomain.com/aboutus.html">Aboutus</a> </li> <li> <a href="http://mydomain.com/aboutfounder.html">Founder</a> </li> <li> <a href="http://mydomain.com/contactus.html">Contactus</a> </li> </ul> ---------- css3 code ul { list-style-type:none; margin:0 auto; padding:0; overflow:hidden; } li { float:left } a:link,a:visited { display:inline-block; text-align:center; width:150px; font-weight:700; color:#FFF; background-color:#98bf21; padding:0; text-decoration:none; text-transform:uppercase} a:hover,a:active { background-color:#7A991A} p { font-family:Times,Times New Roman; font-size:12px; margin:0; position:absolute; top:50%; margin-right:50%} ​I want to center my menu but same is not happening, how to do it? ​

I copied the following code from the navigation bar example and tried it in my webpage. I received an error message that stated that href was not allowed in the <li> tag. What did I do wrong? What else is needed to make it work> <!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p> </body> </html>

Hi everyone. I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color) Here my all source are: <!doctype html> <style> @charset "UTF-8"; body { font: 9pt, Helvetica, Arial, sans-serif !important; font-family: Sans-Serif; margin: 0px; padding: 0px; border:0px; color: #333; } dl, dt, dd{margin:0px; padding:0px; border:0px;} dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;} div {border:0;} Img {border:0;} Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;} a {margin:0; padding:0; border:0;} ul, li{list-style:none; border:0px; padding:0px; margin:0px;} ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;} #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;} #wrapper:after{content:""; clear:both; display:block; } #top_logo{ width:1000px; height:70px; border:#000 1px solid; text-align:center; } #top_logo ul li a, a:visited, a:hover{ position:relative; width:140; height:32px; padding:19px 430px 19px 431px; } #top_lang{ *zoom:1; position:absolute; width:1000px; top:0px; padding:0px; margin-top:2px; float:right; } #top_lang:after{content:""; clear:both; display:block;} #top_lang ul{position:relative;} #top_lang ul li{float:right;} #top_lang ul li a, a:visited{ margin:0; padding:0 1px 0 0; border:0; display:block; width:17px; height:12px; } #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;} #top_menu ul{position:relative;} #top_menu ul li{float:left; text-align:center;} #top_menu a, a:visited{ margin:0; padding:0; border:0; display:block; width:166px; height:32px; padding-top:18px; background-color:#345a92; color:#fff; font-size:10pt; font-weight:bold; text-decoration:none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } #top_menu a:hover{background-color:#0575b2; font-weight:bold;} #top_menu ul li:last-child a, a:visited{ margin:0; border:0px; padding:0; width:170px; height:32px; padding-top:18px; } #top_menu ul li:last-child a:hover{ background-color:#cf4e56; } #top_menu ul li:last-child a:after{content:""; clear:both;} /* Top Menu CSS end */ </style> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="dist/iepp.min.js"></script> <![endif]--> <body> <div id="wrapper"> <!-- top start --> <!-- language selection start --> <div id="top_logo"> <ul> <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li> <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> --> </ul> </div> <div id="top_menu"> <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="get_involved.php">Get Involved</a></li> <li><a href="project.php">Projects</a></li> <li><a href="Partners.php">Partners</a></li> <li><a href="contact_us.php">Contact Us</a></li> <li><a href="#">DONATE</a></li> </ul> </div> <!-- top_navi menu end --> <!-- top end --> </div> </body> </html> div id "top menu" affect other divs and change all background color - top_logo, and other main contents. (I put example preview of IE8) Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me! Thanks in advance.

My php Designer 7 and Dreamweaver cs5 no longer recognizes class files and function files and this happened after uninstalled and reinstalled my server PLEASE what should i do. Am on windows

The thing just stop working and i can't log into my database through my browsers by clicking the http://localhost/phpmyadmin/,Infact i can no longer execute my php files on my browsers as well because it will just output unable to connect

Am designing a simple php forum platform using mysql, On redirecting from a page called main_forum.php to a page called view_topic.php, i have this error message on the view_topic.php page You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE id='4'' at line 1 what should i do------- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////main_forum.php///// <?phpinclude("connect_to_mysql.php");$forum_output='';$sql=mysql_query("SELECT * FROM forum_question ORDER BY id DESC LIMIT 6") or die(mysql_error()); while($row=mysql_fetch_array($sql)){ $id=$row['id']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $datetime=$row['datetime']; $forum_output.=' <table width="1300" border="0" cellspacing="2" cellpadding="6" align="center" ><tr> <th width="49" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">ID</li></ul></th> <th width="362" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Your Topic</li></ul></th> <th width="120" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Views</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Reply</li></ul></th> <th width="83" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Email</li></ul></th> <th width="100" bgcolor="#004200" scope="col" height="10"><ul><li style="color: #FFF">Date</li></ul></th> </tr><br /><br />'; $forum_output.=' <tr> <td bgcolor="#CCCCCC">'.$id.'</td> <td bgcolor="#CCCCCC"><a href="view_topic.php?id='.$id.'"><font size="large">'.$topic.'</font></a></td> <td bgcolor="#CCCCCC" align="center">Viewed by '.$view.' persons</td> <td bgcolor="#CCCCCC" align="center"><b>'.$reply.'</b></td> <td bgcolor="#CCCCCC">'.$email.'</td> <td bgcolor="#CCCCCC">'.$datetime.'</td> </tr> <tr> <td align="center" colspan="2" bgcolor="#CCCCCC">Create New Topic</td> </tr> </table><br /><br />'; }?><!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><link href="style.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="mainwrapper"> <div id="container"> <?php echo $forum_output; ?> <!---<table width="1300" border="0" cellspacing="1" cellpadding="6" align="center" > <!--- <tr> <th width="49" bgcolor="#004200" scope="col" style><h2 style="color: #FFF">ID</h2></th> <th width="362" bgcolor="#004200" scope="col"><h2 style="color: #FFF">TOPIC</h2></th> <th width="302" bgcolor="#004200" scope="col"><h2 style="color: #FFF">VIEWS</h2></th> <th width="264" bgcolor="#004200" scope="col"><h2 style="color: #FFF">REPLY</h2></th> <th width="83" bgcolor="#004200" scope="col"><h2 style="color: #FFF">EMAIL</h2></th> <th width="89" bgcolor="#004200" scope="col"><h2 style="color: #FFF">DATE</h2></th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>----> <!-- <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> ---> </div></div></body></html> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////view_topic.php//// <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');include_once("connect_to_mysql.php");$topic_output='';$id=$_GET['id'];$sql="SELECT * FROM forum_question WHERE id='".$_GET['id']."'";$result=mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_array($result); $name=$row['name']; $topic=$row['topic']; $view=$row['view']; $reply=$row['reply']; $email=$row['email']; $detail=$row['detail']; $datetime=$row['datetime']; $topic_output=' <table width="900" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <th scope="col"><li style="color:#004200;"><h3>'.$topic.'</h3></li></th> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px">'.$detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>By: '.$name.'</strong> <strong> Email: '.$email.'</strong></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: <font>'.$datetime.'</strong></li></td> </tr> <tr> <td> </td> </tr> </table>'; ?> <?php///Error reportingerror_reporting(E_ALL);ini_set('display errors','1');$answer_output='';$sql2=mysql_query("SELECT * FROM forum_answer WHERE question_id='$id'") or die(mysql_error());$row=mysql_fetch_array($sql2);while($row){ $a_id=$row['a_id']; $a_name=$row['a_name']; $a_email=$row['a_email']; $a_answer=$row['a_answer']; $a_detail=$row['a_detail']; $a_datetime=$row['a_datetime']; $answer_output.=' <table width="600" height="127" border="0" cellpadding="2" cellspacing="4" align="center"> <tr> <td><li style="color:#004200;"><strong>By: '.$a_name.'</strong></li></td> </tr> <tr> <td bgcolor="#CCCCCC"><div><p width="500px" align="center">'.$a_detail.'</p></div></td> </tr> <tr> <td bgcolor="#004200"></li></td> </tr> <tr> <td bgcolor="#004200"><li style="color:white;"><strong>Date/Time: '.$a_datetime.' <strong> Email: '.$a_email.'</strong></strong></li></td> </tr> </table> '; }?><!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></head><body><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"><div align="center" style="margin:0px 24px 0px 24px" id="topic_output"> <?php echo $topic_output; ?></div><br /><br /><div align="center" style="margin:0px 24px 0px 24px" id="answer_output"> <?php echo $answer_output; ?></div><br /> <?php$sql3=mysql_query("SELECT view FROM forum_question WHERE id='$id'") or die(mysql_error()); $row = mysql_fetch_array($sql3); $view=$row['view']; ////if have no counter value set counter ==1 if($view=0){ $view=1; } $sql4=mysql_query("INSERT INTO forum_question(view) VALUE('$view') WHERE id='$id'") or die(mysql_error()); ///Count more values $addview=$view+1; $sql5=mysql_query("UPDATE forum_question SET view='$addview' WHERE id='$id'") or die(mysql_error()); mysql_close(); ?><br /><br /><br /><div align="left" style="margin:0px 0px 0px 24px" id="table"><form action="add_answer.php" method="POST"><table width="595" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="203"><li style="color:#004200;">NAME:</li></td> <td width="386"><label for="a_name"></label> <input type="text" name="a_name" id="a_name" size="60"/></td> </tr> <tr> <td><li style="color:#004200;">EMAIL:</li></td> <td><input type="text" name="a_email" id="a_email" size="60"/></td> </tr> <tr> <td valign="bottom"><li style="color:#004200;">ANSWER:</li></td> <td><label for="a_answer"></label> <textarea name="a_answer" id="a_answer" cols="57" rows="10"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="SUBMIT" /> <input type="reset" name="reset" id="submit2" value="RESET" /> </td> </tr></table><input name="id" type="hidden" value="<?php echo $id; ?>"/></form></div></div></body></html>

I have created a css sprite based navigation. The navigation looks fine if I order the navigation items in the same order as they are in the .gif file and the CSS definitions, but if I rearrange them, something strange is happening to the image, and I'm not sure what. Here are three examples: 1. All the LI items in the same order as the .gif and CSS definition. http://www.reneebull...navigation.html (Note the top link "One" is a different color becuase it is stled as "current") Everthing is fine here.2. LI items two and three are rearranged, notice how the image for two and three are distorted somehow. http://www.reneebull...avigation2.html3. LI item two is omitted, so now the images for three, four, five, and six are distorted: http://www.reneebull...avigation3.html Source Code Example 1: <!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><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <LI id=navTwo><A class="" href="#">Two</A></LI> <LI id=navThree><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html> Source Code Example 2 <!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><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <!-- LI id=navTwo and Three are switched --> <LI id=navThree><A class="" href="#">Two</A></LI> <LI id=navTwo><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html> Source Code Example 3 <!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><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <!-- LI id=navTwo is removed --> <LI id=navThree><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html>

Hi there, I encountered a problem with a navigation menu that I was programming and I was hoping someone could help me on this one. The problem is relatively easy to describe: In the CSS nav bar tutorial on w3schools, there is an advanced example: http://www.w3schools...rtical_advanced Everything is fine with this example. In my case, I'd like to include the bullets in the navbar and I therefore change the ul tag to the following: ul{list-style-type:disc;list-style-position: inside;margin:0;padding:0;} Everything looks fine with Google Chrome, but in Firefox and IE, linebreaks appear after the bullets. How do I fix this? Thanks in advance.

Hello,I got stuck again and again the problem that I can not find a solution.I created a navigation bar that build that way: <ul> <li> <a><h3>head name</h3></a> </li></ul> and css code: ul{float:right; width:636px; height:25px;}li{display:inline; padding:0 15px; float:right; height:23px; width:180px; text-align:center;}h3{font-size:15px; font-weight: normal;} The problem is I can not center the list, because the FLOATcommand,and if I remove the FLOAT, H3 tag take control and returns the list to be not on INLINE mode.I'm looking for the code to do that where ever i want, and not to wright it each time from the start. Thanx in advance!!