Jump to content

Search the Community

Showing results for tags 'Nav bar'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 4 results

  1. AJ2021

    Nav bar spruce up

    Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated. HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jackson Lawton_homePage</title> <link href="_CSS/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <h1>Jackson Lawton and Family</h1> <nav> <ul> <li><a href="index.html">Home</a> </li> <li><a href="contact.html">Contact</a> </li> <li><a href="media.html">Media</a> </li> <li><a href="gallery.html">Gallery</a> </li> <li><a href="resume.html">Resume</a> </li> </ul> </nav> </header> <section> <h1 id="pagename">Home</h1> <h2>Welcome to the Lawtons</h2> </section> </div><!-- end of wrapper --> </body> </html> CSS: @charset "utf-8"; /* CSS Document */ #wrapper { width: 1920px; min-height: 1080px; position: relative; margin: 0 auto; background-color: #5DD7FE } header { width: 1778px; min-height: 62px; background-color: #808080; position: absolute; top: 48px; left: 142px; } header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px; } header nav ul li { list-style-type: none; display: inline-block; } header nav ul li a { text-decoration: none; color: #ffffff; font-size: 18px; } header nav ul li a:hover { color: red; } header nav { position: absolute; top: 6px; left: 500px; } /* Style inputs with type="text", select elements and textareas */ input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why. header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px;
  2. FateAce

    Help with nav bar

    I used to know how to do this, but I'm having problems getting the nav bar for a website I'm making working. I can't get the nav bar to sit inside the header, even though it is inside the header tag. Example: I'm also having trouble with that white space at the top, but the big problem right now is the nav bar. Here is my HTML and CSS code for the above:
  3. I have a minor issue that is bugging me. I can't seem to work it out (probably due to spending to much time on it). The issue is that when I hover over the menu items the whole menu bar expands and jumps the the content on the rest of the page down a bit. I've done other themes and never had this issue. I'm sure its something simple but my brain is escaping me and sometimes it pays to have a fresh set of eyes look it over. Here is the css for the menu; .main-navigation { /* wraps the entire navigation menu */background-color: #3B813B;font-size: 2em;text-decoration: none;border-bottom: 2px solid #3B813B;border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;padding: 4px;}.main-navigation:after { /* Clears the floats after the menu */clear: both;content: "";display: block;}.main-navigation ul { /* The menu is an unordered list */list-style: none;margin: 0;}.main-navigation li { /* Makes the menu "list" items horizontal */float: left;margin-left: 1%;position: relative;}.main-navigation a { /* The individual list item links */display: block;text-decoration: none;text-align: center;padding: 4px;padding-left: 8px;padding-right: 15px;color: white;}.main-navigation ul ul { /* Submenu drop-down "box" */background-color: #3B813B;display: none;width: auto;position: absolute; top: 1.3em; left: 0;z-index: 99999;}.main-navigation ul ul ul { /* 3rd+ level drop-down "box" */left: 100%;top: 0;width: 100%;}.main-navigation ul ul li { /* List items inside the drop-down box */ }.main-navigation ul ul a { /* Menu links inside the drop-down "box" */padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation li:hover > a,.main-navigation li.current_page_item a,.main-navigation li.current-menu-item a,.main-navigation ul ul a:hover { /* Hover styles for menu items */background-color: #469946;border-bottom: 2px solid #469946;border-radius: 15px;padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation ul ul :hover > a { }.main-navigation ul li:hover > ul {display: block;} And the site url is;jonathantrinham.com I've tried changing different settings such as padding's etc but no luck. Any ideas anyone?
  4. Hi, im having a little problem with a css menu bar displaying correctly on internet explorer but on firefox not showing it correctly. the problem is that the color I set on the css code is a red one, but firefox shows a blue color. I tried with other browsers to see if there was a problem with the code but for chrome,safari an ie the color shows correctly, having only firefox with the bad color displayed. Here is the code of the menu bar on the css: #menu {list-style:none;width:1160px;margin:30px auto 0px auto;height:43px;padding:0px 20px 0px 20px;/* Rounded Corners */ -moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;/* Background color and gradients */ background: #C81F18;background: -moz-linear-gradient(top, #0272a7, #013953);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); I looked everywhere on the code to see if there is a misplaced color or a syntax error but haven't found it. Thanks in advanced for your time and help.
  • Create New...