Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}
Related
I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Department
<ul>
<li>Patrol </li>
<li>Investigations</li>
<li>Records </li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li>Forms</li>
<li>Gallery</li>
<li>Media</li>
<li>Contact</li>
</ul>
</div>
<br>
</body>
</html>
Fiddle
Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.
Simplified version fiddle
Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!
To fix alignment on your website, replace the CSS for ul#menu ul with:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
To address the submenu appearing behind your content add z-index:10 to #menu
Give the sub nav links more line-height.
Add this rule to your styles:
#menu ul li ul li {
line-height: 2em;
}
Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:
Adjust this rule in your styles:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
The solution above is a straight answer to your question and solves the problem you raise.
However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.
Here's a great video tutorial for building clean, elegant and robust nav menus.
https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
Try this style,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
Just add this css on your style
#menu ul ul li a {
width:100%;
float:left
}
I am trying to create a dropdown menu but the text always is dropping down to the right of where the original list item is. I have been messing with different text-align settings but cant seem to get it right. My HTML is available here. My CSS code is as follows:
#navMenu,
#navMenu ul {
list-style: none;
height: 10px;
}
#navMenu {
float: left;
}
#navMenu > li {
float: left;
padding-right: 15px;
}
#navMenu li a {
display: block;
height: 2em;
line-height: .75em;
padding: 0 1.5em;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
text-align: end;
}
#navMenu > li > a {
color: #fff;
align: left;
text-align: left;
font-weight: bold;
}
#navMenu > li:hover > a {
background: #f09d28;
color: #000;
}
#navMenu ul {
position: absolute;
display: none;
align: left;
width: auto;
height: 50px;
background-color: #AAAAAA;
z-index: 999;
}
#navMenu ul li a {`enter code here`
list-style-position:inside;
}
#navMenu li:hover ul {
display: block;
}
The subnav ul creates a padding.
Give the subnav ul a padding: 0. This should help you out.
The browser is adding some left padding to ul by default. You need to remove that padding:
#navMenu ul {
padding: 0;
}
You may also want to consider using a CSS reset to prevent problems like these.
You have some additional padding to the left of the <ul> in the subnav. Fix it by adding this css:
#navMenu ul {
padding: 0;
height: auto;
}
Note: height: auto; fixes the height of the subnavs.
Also consider adding a CSS reset such as this one: http://www.cssreset.com/
Try this:
ul#navMenu ul {
padding-left: 0;
}
That will make sure you only hit your nested ul's and not the top-level ul's
So, basically, i have a navbar. I want a second "navbar" beneath, which is always visible, but without users interaction, it displays nothing. But, when you hover over a tab in the main bar, a dropdown bar starts at a given point, and goes horizontally along the second tier.
This is my bar so far, and i know generally how to make a dropdown-bar, but i figured it would be easier for you to explain to me from this point, instead of telling me what to remove aswell.
http://jsfiddle.net/7yrX7/119/
<div id="nav">
<div id="container">
<ul>
<li><img src="bilder/menu.jpg" style="height:120%; padding-left: 100px"> </li>
<li> Left thing </li>
<li>
Right thing </li>
</ul>
<img src="bilder/facebook.ico" style=" height:100%; float:right; padding-right:50px;">
<img src="bilder/twitter.ico" style=" height:100%; float:right; padding-right: 15px;">
</div>
</div>
<div id="ribbon">
</div>
body,
#nav ul {
padding: 0;
margin: 0;
}
body {
font-family: Arial;
font-size: 17px;
}
#nav {
background: linear-gradient(#999C92,#72776A);
width: 100%;
position:fixed;
height:50px;
}
#nav ul {
list-style-type: none;
font-size:0; /*hack for inline-block removes side margins*/
}
#nav ul a{
list-style-type: none;
text-decoration: none;
}
#nav > ul { text-align:center; }
#nav li {
font-size: 17px;
vertical-align: middle;
float: left;
}
#nav li a{
padding: 15px;
display: block;
display:inline-block;
}
#nav ul li a:hover {
background-color: #333;
color:red;
}
#nav a:visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav li:hover ul {
display: block;
float:left;
}
#nav ul ul {
display: none;
color: red;
border: 1px solid black;
}
#nav a li a:hover {
color: #699;
}
#ribbon {
width: 100%;
height: 20px;
background-color: black;
}
I am basing this fix off of the updated code you posted as an "answer" (in the future, you can update your question instead by using the edit feature).
The trick to getting a persistent bar to display below the main navigation is just to add some div to the end (let's call it ribbon_filler) and make it always visible. When the dropdown appears, it just appears above the ribbon filler. Here's an example of what the CSS for the filler might look like:
#ribbon_filler {
top:50px;
height:50px;
width:100%;
background-color: #ACD661;
border:1px solid black;
}
You can see this used in your code here.
I would look into an implementation of Superfish which is a great jQuery menu and gives you more than you are likely to develop on your own.
http://users.tpg.com.au/j_birch/plugins/superfish/examples/#
I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you
I am trying to create a basic navigation bar using an unordered list, but for some reason I can't get the bullets to go away.
I have searched for a solution on Google and to me it seems like it SHOULD be working, but I think I might be messing up something that isn't related to the style of the ul, which is in turn preventing the ul style from being applied.
Here is the relevant html:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Examples</li>
<li>Contact Us</li>
</ul>
</div>
and here is the CSS:
#nav ul
{
list-style-type: none;
position: absolute;
top: 10px;
right: 0;
margin: 0;
padding: 0;
}
#nav ul li
{
float: left;
}
#nav ul li a
{
display: inline;
float: left;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#nav ul li a:hover
{
padding-top: 12px;
background-color: #075a97;
}
Just to be certain, I usually apply it to the lis too:
#nav ul li
{
list-style-type: none;
float: left;
}
Something else to check is to use a tool like firebug for firefox and right-click on a list-item and do a 'inspect element'. From there you can see the styles that are actually applied to it and where they stem from, which ones are overriding which, etc.
More than likely, what's happening (with the other answer and comment) is that you've got some other style that's making the bullets show up-- which is where firebug will really help you out.
I don't see any bullets either.
maybe try a full refresh: CTRL+F5 or CTRL+R
And you may try this css
#nav ul li{ list-style: none; }
It works. You may have another rule that cancels out the #nav ul. You can probably test it by adding
body #nav ul
This is what I use for my horizontal menu bar using CSS. I've never had any problems with it.
#nav {
padding-bottom: XXpx;
margin:0px auto;
}
#nav ul { list-style:none;
padding: XXpx;
margin: XXpx;
}
#nav ul li {
float:left;
}
#nav span {
position:absolute;
left:-9999px;
}