I'm trying to set up a sample website and I'm running into an issue with the section between header and footer getting put into the same line as the header
removing margin and padding resets as a wild card fixes this but there has to be another way.
Fiddle http://jsfiddle.net/P8QmL/
header ul {
display: inline; }
header ul .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
*{ margin: 0; padding: 0; }
If I understood your question properly then this should help you
.nav-header li {
list-style: none;
margin: 0 auto;
display: inline;
}
.nav-footer li{
list-style:none;
}
Working Fiddle
Related
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 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;
}
i'm trying to get a horizontal navigation bar, but I can't get it to work right.
http://jsfiddle.net/2fkxx/
nav {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
display: block;
width: 80px;
}
Set your li to inline-block rather than inline.
nav ul li {
display: inline-block;
}
Fiddle
FIDDLE
nav ul li {
float: left;
}
Simple solution:
Set 'float:left' for the list element and also do 'display:inline-block'
nav ul li{
float:left;
display:inline-block;
}
Let me know if it worked. I have had the same problem recently. I can help you out more.
Or you could try using inline-block instead of block
nav ul{
display: block;
overflow: hidden;
margin: 0 auto;
}
nav ul li{
display: inline-block;
}
You need float:right on nav ul li visit link
nav ul li {
float:left;
display: inline;
}
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/
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;}