It seemingly attempts to centre, but in actuality is a few pixels off. It's really annoying.
Picture: http://i.imgur.com/X4jhf.png
My code:
HTML:
<body>
<div class="menu-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<div class="greeting"></div>
</body>
CSS:
.menu-bar {
font-family: 'Lucida Grande';
}
.menu-bar ul {
text-align: center;
list-style-type: none;
}
.menu-bar li {
display: inline;
}
.greeting {
background: url('../media/pic.jpg');
border: 1px solid black;
margin-top: 75px;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 375px;
}
Very frustrating. >_<
Margin and Padding both needs to be set to 0 unless you are using a css reset to avoid browser inconsistencies.
.menu-bar ul {
text-align: center;
list-style-type: none;
margin:0;
padding:0;
}
DEMO.
UL has a default left margin which you haven't dealt with. Just add margin: 0;
Related
I've been having trouble making my navigation bar for some reason. I've tried looking at if anything here answers it or going online but have had no luck. Am I missing something or is there a conflict?
html, body {
margin: 0;
padding: 0;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(../img/bg.jpg) no-repeat center center;
background-size: cover;
height: 800px;
}
.header {
background-color: #333;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li a {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
<div class="header">
<div class="container">
<ul class="nav" role="navigation">
<li>About</li>
<li>Photography</li>
<li>Programming</li>
<li>Writing</li>
<li>Reading</li>
<li>Contact</li>
</ul>
</div>
</div>
I made you a plunker as an example. You were very close. You just need to set the display property on the .nav li selector to inline-block.
.nav li {
display:inline-block;
}
The poster was actually looking for a Bootstrap solution but didn't have the question tagged as such. Here is a Bootstrap example. It just uses the pull-left class on each li tag.
<ul class="nav" role="navigation">
<li class="pull-left">About</li>
<li class="pull-left">Photography</li>
<li class="pull-left">Programming</li>
<li class="pull-left">Writing</li>
<li class="pull-left">Reading</li>
<li class="pull-left">Contact</li>
</ul>
In your CSS, try adding
.nav li {
display: inline;
}
Your li elements are naturally block displayed, so this should go ahead and remove the breaks from in between them.
See the fixed code snippet bellow. You need to add display: inline; to the li elements to make them go horizontal.
li {
display: inline;
}
html, body {
margin: 0;
padding: 0;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(../img/bg.jpg) no-repeat center center;
background-size: cover;
height: 800px;
}
.header {
background-color: #333;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li a {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
<div class="header">
<div class="container">
<ul class="nav" role="navigation">
<li>About</li>
<li>Photography</li>
<li>Programming</li>
<li>Writing</li>
<li>Reading</li>
<li>Contact</li>
</ul>
</div>
</div>
Add the attribute .nav li with inline display.
.nav li{
display: inline;
}
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
I tried something with divs in html, and normally it isn't a problem. However I encountered a problem and I don't find my mistake.
The menu div is supposed to be in the center of the header div and there should be no margin at the top.
here is the example with the error: http://jsfiddle.net/j83eb/
here is the html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
and the css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
Thanks!
Below will fix it (remove margin/padding from ul)
#menu ul {
margin:0;
padding:0;
}
And the Fiddle
As said above, you'll want to clear the default margins on the <ul> element. (No need to clear the padding, there is none). I also removed the height and line-height from everything since that isn't necessary and will likely just cause problems in the future.
Also, make sure to look through your CSS before sending it out for help. There were a number of properties with typos as well as duplicate properties.
http://jsfiddle.net/j83eb/3/
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
So I have the following CSS in place to display a horizontal navigation bar using:
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.navigation li {
float: left;
margin: 0 1.15em;
/* margin: 0 auto;*/
}
.navigation {
/* width: auto;*/
/* margin: 0 auto;*/
text-align: center;
}
My question is: how do I align the navigation bar centrally above the title?
Here's a solution that doesn't require specifying the width of your ul.
Give your .navigation ul a width and use margin:0 auto;
.navigation ul
{
list-style: none;
padding: 0;
width: 400px;
margin: 0 auto;
}
Well, to use margin:0 auto on something, it must have a defined width. Probably the best workaround is:
ul li {
display: inline;
list-style-type: none;
}
ul {
text-align:center;
}
There are few settings like float, margin which may affect this code to work properly. It works in IE7 too. I got this code from an article over at CSS Wizardry.
.navigation ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;/*make this change*/
}
.navigation li
{
float: none;/*make this change*/
display:inline;/*make this change*/
margin: 0 1.15em;
/* margin: 0 auto; */
}
.navigation li a {
display:inline-block;/*make this change*/
}
.navigation
{
/*width: auto;*/
/*margin: 0 auto;*/
text-align: center;
}
You could set the <li>'s to be display: inline, then set text-align: center on the <ul>. Doing that, you can remove the float: left from the list items and you don't need to have a fixed width for the navigation bar as you would if you used margin: 0 auto.
<html>
<head>
<style>
ul {
list-style: none;
text-align: center;
}
li {
display: inline;
margin: 0 1.15em;
}
</style>
</head>
<body>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</body>
</html>
This one works great with me!
(if I'm correct: IE7+)
Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/
.nav{list-style:none; text-align:center;}
.nav ul{list-style:none;}
.nav li{display:inline;}
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;}
<nav class="nav" role="navigation" aria-label="main navigation">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Onze producten</li>
<li>Impressie</li>
<li>Media</li>
<li>Contact</li>
</ul>
</nav>
ul {
display: inline-block;
text-align: center;
}
.navigation ul
{
list-style-type: none;
padding: 0px;
width: 200px;
margin: 0 auto;
}
If you want to keep using your floated LI in your code, you can use this:
JSFiddle: https://jsfiddle.net/Lvujttw3/
<style>
.wrapper {
width: 100%;
background-color:#80B5EB;
text-align: center;
}
.intWrapper {
display: inline-block;
}
.mainMenu {
padding: 0;
min-height: 40px;
margin:auto;
}
ul {
list-style-type: none;
}
ul li {
float: left;
font-size: 15px;
line-height: 40px;
}
ul li A {
display: block;
color: white;
font-weight: bold;
font-family: Arial;
text-decoration: none;
min-height: 40px;
padding: 0 36px;
}
</style>
<div class="wrapper">
<div class="intWrapper">
<ul class="mainMenu">
<li><a href="one.htm" style='background-color:red'>ITEM ONE</a>
</li><li>ITEM TWO
</li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>
</li>
</ul></div>
</div>
</div>
style="position: absolute; z-index: 1;"