Search the Community

Showing results for tags 'nav'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 18 results

  1. Hey guys. So I have just learned the basics of HTML and CSS and I am on my way to creating my first real website. But I have this problem - I have a navigation bar with a dropdown button (which contains links to products). And when I am going to create a new html page - lets say another product (that sits inside the dropdown) I then have to update the navigation bar code on every page I have. This is not wise to do - repeating the same code, error prone, etc. Is there a proper way to write navigation bar once and have it on every page? I mean, can I embed it somehow? Or embed product pages? Thanks.
  2. Hello, I have the problems that when i use a link in a w3css Navbar, the link is at the top of the bar. What i have when i write everything in a single entry: Code: <div class="w3-bottom" style="margin-right: 20%"> <ul class="w3-navbar w3-red"> <li> Powered by <a href="https://www.w3schools.com/w3css/" title="w3css"> w3css </a> and <a href="http://fontawesome.io" title="fontawesome"> fontawesome </a> </li> </ul> </div> What i have when i write it in single entrys: Code: <div class="w3-bottom" style="margin-right: 20%"> <ul class="w3-navbar w3-red"> <li> Powered by <a href="https://www.w3schools.com/w3css/" title="w3css"> w3css </a> and <a href="http://fontawesome.io" title="fontawesome"> fontawesome </a> </li> </ul> </div> What i will have: I hop you can help me //Cripi
  3. Hey, is there in W3 already a script, or do i even need one, when i want, that: my active menu background to switch colors, when i scroll to a new section on my page? thx for the feedback!
  4. 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
  5. is there a way to use this http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover with http://www.w3schools.com/w3css/w3css_tabulators.asp i've been working on it for weeks and i cant figure it out i wanna make the content show on hover please help
  6. Hi, I started using W3.CSS framework and I like it but there are some issues around that I can't fix. I created a top bar and when I view mobile version the menu dodges when I mouse over "blog". Is there any "why" this happens? championthe.com is the website.
  7. Hey everyone, I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make. (If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.)
  8. Hey! I am relatively new to CSS and HTML, what I basically do is some sort of Reverse Engineering -- I downloaded a template from w3 and tried to tweak it for work. Admittedly, I am a noob and doesn't fully understand what the codes mean. I need your advice on how I can edit the CSS code to stop breaking the nav bar whenever the screen is not maximised. I know the links/text can shrink so i'm thinking maybe the nav bar doesn't have to break or rearrange the links to several lines. The actual site is saved locally at the moment and here's the css code for the menu. /*--menu--*/ .menu { border-bottom: 5px solid #096DB9; width: 100%; } .toggleMenu { display: none; background: #666; padding: 0; width: 100%; color: #fff; } .top-nav{ background: #014279; } .nav { list-style-type: none; *zoom: 1; width: 100%; float:left; } .nav:before, .nav:after { content: " "; display: none; width: 0; } .nav:after { clear: both; } .nav ul { list-style: none; width: 100%; } .nav a { color: #FFF; font-size: 100%; } .nav li.active> a, .nav li> a:hover { color:#FF0000; } .nav li { position: relative; padding: 1px 15px; font-family: 'Open Sans', sans-serif; } .nav > li { float: left; } .nav > li > a { display: float; } .nav li ul { position: absolute; left: 100%; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top: 0; -webkit-transition: background .2s linear; -moz-transition: background .2s linear; -ms-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear; } .search{ float:left; padding-top:0.2em; } .search input[type="text"] { outline: none; padding:5px 16px; outline: none; color: #fff; background:none; border: 1px solid #096DB9; width: 78.33%; line-height: 1.5em; font-size: 0.8125em; } .search input[type="submit"] { background: #FF0000 url('../images/search.png') no-repeat 9px 9px; padding: 6px 15px; border: none; cursor: pointer; width: 1.33%; position: absolute; line-height: 1.5em; outline: none; } .search input[type="submit"]:hover{ background:#001C32 url('../images/search.png') no-repeat 9px 9px; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: relative; background-color: #003366; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: white; padding: 8px 12px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #FF0000} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #003366; }
  9. 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.
  10. I started working for a new company and am trying to clean up the mess of code that was left behind and (unfortunately) I think in my attempts I've made a bigger mess. The main issue I'd like to fix is the hover effects on the Nav bar The Accessories dropdown doesn't line up with "Products" above it, and the hover effect on "Contact" doesn't go all the way to the edge of the nav bar. Code is as follows: HTML: <nav><ul><li><a href="index.htm">Home</a></li><li><a href="products.htm">Products</a><ul><li><a href="accessories.htm">Accessories</a></li></ul></li> <li><a href="clearance.htm">Clearance</a></li><li><a href="requestinfo.htm">Request Info</a></li><li><a href="about.htm">About PACE</a><ul><li><a href="news.htm">News & Events</a></li></ul></li><li><a href="contacts.htm">Contact</a></li></ul></nav>
  11. body {background-color:#000000;font-family: georgia,sans-serif;color:#000000;margin:0;padding:0;}ul#menu {width:100%;height:100px;background:repeat-x;list-style:none;margin:0;padding:0;padding-top:20px;padding-left:20%;}ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; } hi I am trying to create a css style for my website nav but cant seam to get it right
  12. I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; }
  13. Hi, i have a strange problem, i wrote a shoet HTML and CSS to create a simple Nav line. everything work perfectly in chrome and IE9 when the DB is in C: folder. when i transfer the folders to my networkdrive the Nav bar loose his CSS in IE9 (it is OK in Chrome) does anyone now what could have cause that? the html: <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Co</title> <link type="text/css" rel="stylesheet" href="Index.css"/> </head> <body> <!-- Navigation Bar --> <nav id="topNav"> <ul> <li> <a href="#" title="General">General</a></li> <li> <a href="#" title="Manuals">Manuals</a> <ul> <li> <a href="#" title="Cost">Cost</a></li> <li> <a href="#" title="Fin">Fin</a></li> </ul> </li> <li> <a href="Services.html" title="Reports Analysis">Analysis</a> <ul> <li> <a href="Services.html" title="A Ltd">A LTD</a></li> <li> <a href="Services.html" title="Others">Others</a></li> </ul> </li> <li><a href="#" title="Contacts">Contacts</a></li> </ul> </nav> </body></html> The CSS is: h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 120%; font-style: italic; text-decoration:underline;} /*---------------------------------------------------------------*/ /*Navigation Bar*/ nav { display:block; font:16px arie, Sans-serif ; border-top:2px solid ; border-bottom:2px solid; border-color:#F2F2F2; width:400px; margin: 35px 30px 0px 0px; z-index:10;} nav ul {padding:0; margin:0; } nav li {position:relative; float:left; list-style-type:none; } nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } nav li a { display:block; padding:8px 20px; ; color:#8E8E8E; text-decoration:none;} nav li a:focus { outline:none; text-decoration:underline; } nav ul ul { display:none; width:100%; position:absolute; right:0; background:#F2F2F2; text-align: right} nav ul ul li { float:none; border:solid #FFF 1px; } nav ul ul a { padding:5px 10px;font-size:16px; } nav ul ul a:hover { background-color:#555; } thank you in advance
  14. The problem is that I can't get my nav-bar align in the center. This is my code: <div id="nav"><ul><li><a href="startpagina.html">Startpagina</a></li><li><a href="zomercollectie.html">Zomercollectie</a></li><li><a href="wintercollectie.html">Wintercollecite</a></li><li><a href="kerstcollectie.html">Kerstcollectie</a></li><li><a href="contact.html">Contact</a><ul><li><a href="contact-voor-particulieren.html">Contact voor particulieren</a><li><a href="contact-voor-bedrijven.html">Contact voor bedrijven</a> </ul><li><a href="over-ons.html">Over ons</a></li></ul> <br class="clearboth"/></div> .clearboth { margin: 0; padding: 0; clear: both;} #nav { font-family: verdana; font-weight: bold; font-size: 9pt; margin: 10px auto 10px auto; text-align: center;} #nav ul { margin: 0; padding: 0; list-style: none; text-align:center;} #nav a:link,#nav a:visited { color: #ffffff; text-decoration: none;} #nav a { display: block; padding: 6px 8px;} #nav li { float: left; background-color: #44A04D; margin-right: 1px; position: relative; width:15%;} #nav li li{ width: 100%; margin-top: 1px;} #nav li:hover { background-color: #006837;}#nav li li:hover { background-color: #006837;} #nav ul ul { position: absolute; visibility: hidden;} #nav ul ul ul{ position: absolute; left: 100%; top: -2px; border: solid 1px transparent;} #nav li:hover > ul { visibility: visible;} .right-arrow { float: right;} Can anyone solve my problem?
  15. Hi, I am having a lot of trouble trying to center the navigation on my site.Basically the tabs need to sit in the center of the div (960px) with a 2px gap between each tab.Can anyone see what I'm doing wrong? THANKYOU!! .row { margin: 0 auto; width: 960px;} #top-menu{ font-family: "LeagueGothicRegular",sans-serif; text-align: center; margin-top:240px; } #top-menu li{ display: block; float: left; line-height: 1; margin: 0 17px; text-align: center; } #top-menu a{ font-family: 'LeagueGothicRegular', sans-serif; background-color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #000000; display: inline-block; font-size: 1.97em; line-height: 1; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); padding: 6px 18px; text-decoration: none} #top-menu a:hover,#top-menu .active a{ color: #fff; background: #E80B44; }#top-menu a:hover .nav-arrow{ border-top-color: {{settings.nav_hover_colour}}; } #top-menu ul .first ul{ left: 0; } #top-menu ul ul li{color: #000000; display: inline-block; font-family: 'LeagueGothicRegular', sans-serif; text-shadow: 1px 1px 1px transparent; } #top-menu ul ul { font-family: 'LeagueGothicRegular', sans-serif; display: inline-block; border: none; text-shadow: 1px 1px 1px transparent; } #top-menu > ul > li { font-family: 'LeagueGothicRegular', sans-serif; }
  16. Here's my dilemma:I have an area of my web page that contains 4 nav images. When I give these navs a parent tage, like a <div> or <section> the rollover function disappears. When they are not wrapped in the tags the rollovers are fine, but then they don't get the styling of the parent tag. I would like to keep the styling of the parent tag and still have the rollover function. What can I do? Here is a sampling of the HTML code:<div id="middle"><div id="web-book"><a href="source"></a></div></div> Here is a sampling of the CSS code:#middle {width:960px;height:525px;background-color:#FFF;position:absolute;top:177px;z-index:-10;}#web-book a {display: block;background-image: url(../_images/Work-Portfolio-Web.png);background-repeat:no-repeat;width:248px;height:200px;position:absolute;left:256px;top:48px;}#web-book a:hover {background-position:-249px;}
  17. So, I have finally worked out how to center my navigation menu horizontally in a cross-browser compatible way. The problem I now have though is with my dropdowns. They have inherited some of the attributes I used to center the nav and now, when the menu parent is hovered over, the dropdown pops up over it, rather than under and to the side a bit. I've tried a few fixes though am not sure the best way to go about resolving the issue in the most browser friendly way.I'm sorry, though my site is not yet live. #nav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;background-image:url(/wp-content/themes/child/images/banner.png);border-radius: 0px;clear: both;color: #555;margin: 0 auto 0px;overflow: hidden;text-align: center;text-transform: uppercase;height: 35px;width: 920px;}#nav ul {width: 100%;margin: 0 auto;display: inline-block;list-style: none;}#nav li {display: inline-block;list-style: none;}#nav li a {color: #90877C;display: block;font-size: 12px;float: left;margin: 0px 0px 0px 0px;padding: 8px 15px 0px 15px;text-decoration: none;}#nav li a:hover,#nav li a:active,#nav li:hover a,#nav .current_page_item a,#nav .current-cat a,#nav .current-menu-item a {color: #90877C;}#nav li a:hover {color: #222;}#nav li li a,#nav li li a:link,#nav li li a:visited {background: #fbf7eb;border-top-width: 0px;color: #555;font-size: 11px;position: relative;margin: 0px px 0px 5px;text-transform: none;text-align: left;width: 100px;}#nav li li a:hover,#nav li li a:active {color: #222;}#nav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;}#nav li ul a {width: 130px;}#nav li ul ul {margin: -33px 0 0 122px;}#nav li:hover>ul,#nav li.sfHover ul {left: auto;} I should probably mention I'm just learning CSS so any clear suggestions would be great. Thanks so much.
  18. I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?