I want to accomplish two things:
1) Fix the navbar thickeness so its 8px padding above and below. Right now it looks like its 20-30px. The navbar should be 100% wide with the navbar menu to be 960px centered.
2) Left align the website title and right align the menu links on the same row.
http://jsfiddle.net/5rp5B/
HTML
<header>
<div class="nav_top_bar">
<nav class="nav_top_menu">
<ul>
<li class="nav_top_title">Web Site Title</li>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
.nav_top_bar {
background-color: #333333;
padding: 8px 0;
width: 100%;
}
.nav_top_menu {
color: #c3c3c3;
font-size: 1em;
margin: 0 auto;
text-align: left;
width: 960px;
}
.nav_top_title {
padding-right: 30px;
}
.nav_top_menu ul {
list-style: none;
text-align: left;
}
.nav_top_menu ul li {
display: inline;
}
.nav_top_menu ul li a {
color: #c3c3c3;
padding: 8px 16px;
}
If your problem is that the top bar seems too big in height, try adding this to your styles to remove the default margin on the <ul> element:
.nav_top_menu ul {
margin:0;
}
And for the title and links you can do this instead, which will align everything to the right except the title which will be floated to the left:
.nav_top_menu ul {
margin: 0;
list-style: none;
text-align: right;
}
.nav_top_menu ul li {
display: inline;
}
.nav_top_menu ul li.nav_top_title {
float: left;
padding-right: 30px;
}
And yeah make sure to remove the default margin from the <body> element as well:
body {
margin: 0;
}
The extra padding is due to the fact that most browsers add margins and padding to the ul element.
You can explicitly set margin: 0; padding: 0; on the ul element to get rid of these.
You can also align the links (left and right) with floats and the :first-child selector.
Here's a JSFiddle: http://jsfiddle.net/7w8CA/1/
You need to make the following addition in the CSS rule:
Add padding/margin values to the .nav_top_menu ul class.
.nav_top_menu ul {
list-style: none;
text-align: left;
padding: 0;
margin: 0
}
To align the way you want, first make all li text aligned right, then left-align the first-child element:
.nav_top_menu ul li { text-align: right}
.nav_top_menu ul li:first-child { text-align: left }
The body and ul are assigned default margins/padding bu the browser so these should be reset.
**JSfiddle**
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.nav_top_bar {
background-color: #333333;
}
.nav_top_menu {
color: #c3c3c3;
font-size: 1em;
margin: 0 auto;
width: 960px;
padding: 0;
}
.nav_top_title {
padding-right: 30px;
}
.nav_top_menu ul {
list-style: none;
margin: 0;
text-align: right;
}
.nav_top_menu ul li {
display: inline-block;
}
.nav_top_menu ul li:first-of-type {
float:left;
padding: 8px 16px;
}
.nav_top_menu ul li a {
color: #c3c3c3;
padding: 8px 16px;
display: block;
}
Related
I'm trying to add a space above my navigation bar, however the code I'm using is failing to do so.
My CSS
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
A Fiddle
https://jsfiddle.net/xuk2nk46/
.top-nav {
padding-top: 40px;
}
u have given two values to top-padding
.top-nav a {
padding-top: 40px;
}
and
.
top-nav ul a {
color: #000;
padding: 0 10px;}
the second one is applied which is 0 px
.top-nav{
margin-top: 10px;
}
and remove the padding , or keep only one.
Try adding margin-top to .top-nav:
.top-nav {
margin-top: 20px;
}
Margin adds a space outside the element, while padding adds a space inside the element.
By default <a> in an inline element. So padding with top and bottom values won't apply.
You have to change the default type by inline-block to add top and bottom padding on it.
Also, you can group this two properties .top-nav a and .top-nav ul a together like this :
.top-nav ul li a {
display: inline-block;
color: #000;
padding: 20px 10px;
text-decoration: none;
font-size: 20px;
}
And then, you can set top and bottom padding values with this property : padding: 20px 10px; or use margin property like this margin: 20px 10px;
Just add a margin to your .top-nav :
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.top-nav {
margin: 30px 0 0 0; /* ADD MARGIN HERE */
}
.top-nav ul {
text-align: right;
width: 100%;
}
.top-nav li {
display:inline;
}
.top-nav a {
padding-top: 40px;
}
.top-nav ul a {
color: #000;
padding: 0 10px;
text-decoration: none;
font-size: 20px;
}
.top-nav ul a:hover {
color: #333;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>Join Us</li>
</ul>
</nav>
(see also this Fiddle)
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
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 have the following nav bar:
<header>
<h1>Blah blah</h1>
<nav>
<ul>
<li>foo
<li>bar
<li>baz
<li>zop
</ul>
</nav>
</header>
How do I center it perfectly? I also have the following css:
header {
background-color: #a4c9f3;
text-align: center;
}
header nav {
/* guessing this width works, but I don't want to do it manually */
/* width: 24em; */
display: inline-block;
}
header nav ul li {
float: left;
padding: 0 0 0 6px;
list-style: none;
}
header nav ul li a {
padding: 9px 22px 4px 16px;
background-color: #83b2e6;
}
As you can see in this jsfiddle, it's almost centered.
Change your ul to width: 100% and center the text, set your li as display: inline.
And display your anchors as inline-blocks:
CSS:
header {
background-color: #a4c9f3;
text-align: center;
}
header nav ul {
width: 100%;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline;
}
header nav ul li a {
padding: 9px 22px 4px 16px;
display: inline-block;
background-color: #83b2e6;
}
updated Fiddle
You just need to remove the default padding/margin from ul and li elements, you can use a reset css stylesheet like Eric Meyer's reset or something like this:
header nav ul, header nav ul li{
margin: 0;
padding: 0;
}
Demo working: http://jsfiddle.net/YkZqj/13/
CSS Reset: http://meyerweb.com/eric/tools/css/reset/
I have this issue, I can't for the life of me try and remove the whitespace in this (li) tag, below I've include a screen capture, what I'm trying to do is remove the white before the grey menu bar, as well make the whole menu bar line up to bottom grey bar.
CSS
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
float: left;
margin: 0 0.5em 0 0.5em;
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0;
}
HTML
<div class="menu">
<div>
<ul id="MenuGreyBar">
<li style="left: 0px;">
</li>
</ul>
</div>
<ul>
<li>
About Us
</li>
<li >
Help & Support
</li>
<li >
Law & Information
</li>
<!-- ... There are a few more. -->
</ul>
</div>
The image: (it didn't let me embed)
http://db.tt/tcSr5kGv
I'm not positive if this is your issue, but here's my guess:
.menu li {
float: left;
margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
which will cause them to jut over. We want this for
most elements*/
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0; /*The first menu item is special and needs no margin, so we try
to clear it, however we are clearing the anchor element in the li
block, and the margin is applied on the li block itself, so the li
block's margin is rendered before the anchor has any say*/
}
So what we need to do is clear the margin property on the actual li element, this code will do it:
#MenuGreyBar li{
margin: 0;
}
That should do it, my best guess.