I want to set equal margins between "Li" elements in the navigation.
right now there is slightly difference between the
margin left and right as shown in the pic below.
Here is a fiddle link
Here is the css:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
float: left;
}
.nav a {
background-color: white;
text-decoration: none;
display: block;
z-index: 9999;
padding-right: 5px;
padding-left: 5px;
}
.nav ul a {
/* border-right: 1px solid #333333; */
text-indent: 4px;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 6.5em;
line-height: 16pt;
}
.nav > ul > li > a {
width: 6em;
}
Remove the width on your <a> elements:
and add this:
.nav li {margin-right: 10px /* or whatever margin you want */}
.nav li:last-child {margin-right: 0}
.nav {
background-color: white;
width: 100%;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
display: inline;
margin: 0 10px;
}
.nav li a {
background-color: white;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
add the reset of the styling as you wish.
edit: use position and z-index only when it is necessary
fiddle
You could try adding word-spacing: 5px; in the nav class:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
word-spacing: 5px;
}
Hope this helps.
Related
In my site I'm setting the navagtion-bar and in Chrome its looking good,
but at Firefox, Opera and Explorer there's misplaced elements and its really messy,
some of the Elements are moving strange at the page
How can I solve it? Do I need to start over everything?
Edit: here's my CSS code that works at Chrome
.container { background-color: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
margin-top: 20px;
}
html {
font: 1em "Open Sans", sans-serif;
font-family: "Varela Round";
}
.nav-main {
background-color: white;
color: black;
font-size: 14px;
width: 100%;
}
.nav-main > ul > li{
text-align: center;
}
.nav-main .logo {
height: 59px!important;
font-size: 1.4em;
line-height: 20px;
padding-left: 97px;
}
.nav-main .search {
padding-right: 70px;
}
.nav-main .netnav{
padding-left: 50px;
}
.nav-main > ul {
margin: 0;
padding: 0;
float:right;
list-style-type: none;
}
.nav-main > ul > li {
display: inline-block;
line-height: 10px;
padding-top: 18px;
}
.nav-item {
display: inline-block;
color: black;
width: 90px;
text-decoration: none;
border-color: black;
line-height: 60px;
}
.nav-sub .nav-item{
line-height: 20px;
}
.nav-content{
position: absolute;
background-color: white;
border-color: black;
color: #000000;
font-family: "Varela Round";
font-size: 14px;
text-align: right;
list-style-type: none;
z-index: 99999;
display: none;
left: 1075px;
}
.nav-sub{
padding: 1px;
border: 1px solid #000000;
position: relative;
z-index: 10;
}
ul {
list-style-type: none;
}
.nav-sub ul{
padding: 0;
margin: 0;
}
.nav-sub ul li a {
display: inline-block;
padding: 1px 0;
list-style-type: none;
text-decoration:none;
}
.nav-sub ul li:hover {
background-color: black;
}
.nav-sub ul li:hover > .nav-item{
color: white;
}
.nav-item:focus{
background-color:whitesmoke;
}
.nav-item:hover ~ .nav-content{
display: block;
}
.nav-content:hover{
display: block;
}
.underline { box-sizing: border-box; height: auto; width: 173px; border: 1px solid #9B9B9B;}
For some reason, when I hover over my navigation items, the drop downs are appearing on the very left of the screen instead of under that menu item and I can't figure out why. If anybody could help, it would be greatly appreciated.
Here's my code (JSFIDDLE: http://jsfiddle.net/A5jtC/):
HTML:
<div id="nav" class="wrapper">
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul>
<li>Testing</li>
</ul>
</li>
</ul>
</div>
CSS:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
width: 100px;
height: 30px;
position: absolute;
top: 125px;
left: 0;
display: none;
z-index: 1000;
}
ul.site-navigation ul li {
float: none;
line-height: 30px;
}
ul.site-navigation ul li a {
transition:none;
font-weight: regular;
font-size: 14px;
}
ul.site-navigation li:hover ul {
display: block;
}
Try this css, it might get you to where you need to be:
.wrapper{
width: 100%;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li{
display: block;
width: 125px;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation li>ul {
list-style: none;
height: 50px;
position: relative;
display: none;
z-index: 1000;
}
ul.site-navigation li>ul>li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation>li:hover ul {
display: block;
}
You've got a couple of issues.
First, in order to have an element that appears under another element, the parent element has to be position: relative; and the direct child position: absolute;.
Next, your overflow:hidden on your wrapper element would hide any child that appears below the parent.
Third, your list items had to be floated and given a width x height, otherwise the browser thinks they all line up on the left side of the page since the elements inside of the list items are all floated.
Finally, after all of that, your submenu s have a 40px left padding by default. You have to get rid of that for the sub-items to line up.
Check this out:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
width: 125px;
top: 100%;
left: 0;
}
http://jsfiddle.net/A5jtC/74/
UPDATE: I can't comment on others' posts yet, but JRulle's solution will push all of the content under your menu down when you hover over it and a submenu is displayed. In order to prevent that, you HAVE to use the relative/absolute positioning above so that your submenus don't take up page space when they are displayed.
You have some issues in your styles: Try these: JSFiddle
.wrapper{
background-color: rgb(255,255,255);
width: 100%;
overflow: hidden;
}
ul.site-navigation {
list-style: none;
}
ul.site-navigation:after {
clear: both;
}
ul.site-navigation li {
display: block;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation li a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
ul.site-navigation li ul {
list-style: none;
display: none;
z-index: 1000;
padding: 0;
margin: 0;
}
ul.site-navigation ul li {
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
}
For some reason, my drop down menu is being pushed to the right. It's supposed to open up directly below the link someone is hovering over, but it opens about 30px to the right and I can't figure out why. You can see the issue in action when you scroll over "Work" on my website: http://www.noellesnotes.com
My code:
CSS
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
margin: 5px 10px 0 0;
}
ul.site-navigation ul li a:hover {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
}
.site-title a {
color: rgb(185,40,141);
font-family: 'Arvo', serif;
text-transform: uppercase;
font-size: 63px;
background-color: rgba(255,255,255,1);
text-align: center;
text-shadow: #FFF 1px 1px,#ccc 2px 2px;
width: 500px;
float: left;
padding-top: 13px;
font-weight: normal;
letter-spacing: normal;
}
.site-branding {
display: table;
width: 100%;
height: 400px;
font-family: 'Lato', verdana, san-serif;
font-size: 6em;
text-shadow:1px -1px rgba(242,141,89,0.2);
text-align: center;
text-transform: uppercase;
color: rgb(255,255,255);
background-image: url('http://www.noellesnotes.com/wp-content/themes/portfolio/images/lights.jpg');
background-attachment:fixed;
}
HTML:
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul class="submenu">
<li>Seventeen.com</li>
<li>One Direction Connection</li>
</ul>
</li>
</ul>
You have a left margin on all uls that are direct children of lis. (li > ul {margin-left:1.5em})
Add Something like this to your css to override that for your menu:
ul.site-navigation > li > ul {
margin-left:-2.75em
}
I think its natural because li tag has ul tag
You can use margin-left:-2px to fix this
i am not getting vertical scrollbar...
jsfiddle link -> http://jsfiddle.net/QNuzb/2/
css is
/* Navigation */
#nav-bar {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 45px;background: #F5F5F5;}
#nav {width: 800px;margin: 0 auto;height: 48px;text-align:center;}
#nav > li { display: inline-block;width: 15em;}
ul{list-style-type: none; display:inline-block;margin:0 auto; padding:0; position:relative;font-weight: bold; }
ul li{display:block;display:inline-block; position:relative;margin-right:5px;margin-left:5px}
ul li a{text-align: center;font-size: 18px;margin: 5px;padding: 8px;text-decoration: none; text-transform: capitalized;height: 35px; color:#222; font-size:18px; line-height:48px;}
ul li a:hover, ul li a.active{text-align:center;border-bottom:3px solid #800000; color:#800000}
/* Tabs */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
It's because of the position: fixed; in your nav-bar class. remove it.
#nav-bar {
position: fixed; /* remove */
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 45px;
background: #F5F5F5;
}
I realize this question has been asked multiple times on this site, and many many others, probably too many times, I've tried many different solutions but haven't come up with one that fits, I'm trying to auto center with hidden overflow, any CSS masters willing to show me where I'm going wrong? I've been banging my head for awhile now. Here is my
fiddle Thank you for any assistance.
Here is my CSS since fiddle must be accompanied
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: relative;
left: 15%;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
This is the closest I've gotten, I've attempted margin: 0 auto as well as margin-left:auto;
margin-right:auto; but can't seem to get them to work.
try this add a .container{width:you want; margin:0 auto;} then navigation bar in center.
http://jsfiddle.net/bsyxG/7/
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin:0;
padding:0;
}
.container{
width:1004px;
margin:0 auto;
text-align:center;
}
.navigation {
text-align: center;
display:inline-block;
list-style-type:none;
text-align:center;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
background: #262626;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
You can use left: 50% left:-50% trick
.wrapper {
position: relative;
left: 50%;
}
.navigation {
position: relative;
left: -50%;
}
http://jsfiddle.net/bsyxG/4/
Use This:
Changes are position:absolute from relative and margin-left:auto; margin-right:auto
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: absolute;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}