On my website, I want a horizontal menu, which is centered on the page. So, the whole menu should be centred.
At this moment, I can create a horizontal list, but the list still stays at the left side. I want it centered.
Can someone please tell me what to change in my code to center it?
My HTML:
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
My CSS:
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.menu{
display: table;
}
div.menu a {
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
color: navy;
background-color: #FF0000
}
li{
float: left;
}
Add margin:auto to your div.menu to accomplish this
div.menu{
display: table;
margin:auto;
}
JSFiddle: http://jsfiddle.net/0xb7j9zc/
Check out this fiddle http://jsfiddle.net/ByShine/33sz6nrt/4/
HTML
<div class="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS
ul {
text-align: center;
}
ul li {
display: inline-block;
}
I'm assuming you wish to center the menu (align it to the middle of the page). One approach, and I'm sure there's a few out there, is to wrap the 'menu' div into another div tag and set the align attribute to center, like so:
<div align="center">
<div class=menu>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
Here's an example: http://jsfiddle.net/q9ae01qe/
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I'm having issues with excess space to the left of my header.
I had the same problem with my footer as well using <nav> and <ul>, but edited this to only using <a> elements instead, and this seemed to do the trick. I would, however, like to keep the <nav> in the header, and preferably without using negative margin-left.
https://jsfiddle.net/thereseel/d75jurzy/6/
<header>
<nav>
<ul class="mainnav">
<li>Home</li>
<li>Menu</li>
<li>Logo</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
you are facing excess space to the left of your header because of ul
browsers have default CSS values for many elements and ul is one of them.
from your current code just remove the padding
example:
.mainnav {
/* add this to override default padding left of ul*/
padding-left: 0;
}
Here is Reference of default CSS values used by browser : w3schools link
Try with this code.
HTML code:
<header>
<nav>
<ul class="mainnav">
<li>Home</li>
<li>Menu</li>
<li>Logo</li>
<li>Contact</li>
<li>Location</li>
</ul>
</nav>
</header>
<div class="main-body">
</div>
<footer >
<section class="footnav">
Home
About
Order
Jobs
Contact
</section>
</footer>
CSS code:
.main-body{
min-height:500px;
}
.mainnav {
max-width: 800px;
margin-left: 0;
margin-bottom: 5px;
text-align: center;
display: flex;
justify-content: space-evenly;
padding-left:0px;
}
.mainnav li {
display: inline-block;
}
.footnav {
width: 100%;
text-align: center;
display: flex;
justify-content: space-evenly;
}
footer{
position: fixed;
left:0;
right:0;
bottom:0;
}
.footnav a {
display: inline-block;
padding: 10px;
}
Hope it working.
I'm trying to right-align the nav without using float. I read somewhere online that I could set the parent element to text-align: right, but that didn't work when I tried it. I appreciate any help for what I know is an easy problem but one that has confounded me most of the day.
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav {
display: inline-block;
}
nav li {
display: inline;
}
<header>
hi
<nav>
<ul>
<li>Home
</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</header>
https://jsfiddle.net/a6a367vp/
The solution is that you have to add text-align: right; to the parent element which is the header.
header {
text-align: right;
...
}
Then add display: inline-block; to the children (nav) and the children will be aligned right.
Another solution would be to set a width to nav and a:
header nav {
with: 80%;
}
header a {
width: 20%;
}
header nav ul {
text-align: right;
}
header nav ul li {
display: inline-block;
}
if you want the nav to move to the right, simple method is float:right but since you don't want to use this then text-align:right would place it on right if nav has 100% width for that row.
Therefore, you can do either of these two things.
right now using CSS you can make
nav{width:98%; text-align:right};
or for better results, use JS
var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});
Fiddle: https://jsfiddle.net/a6a367vp/3/
One possible and recommended solution is as follows:
Put the <nav> in a <div> element and then use the text-align property for the specified div. like this:
Html:
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
CSS:
.nav_menu{
text-align: right;
}
Update:
Put the <a> tag in another div and then specify the width for the selected divs. Your final code should be like this:
HTML:
<header>
<div class="atag_div">
hi
</div>
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav li {
display: inline;
}
.atag_div{
width: 20%;
display: inline-block;
}
.nav_menu{
width: 78%;
display: inline-block;
text-align: right;
}
jsfiddle:
https://jsfiddle.net/pokies/7Lnfq7es/
I would like to position the image and the navigation links so that they are vertically aligned with the HeadContainer and each other.
HTML
<header>
<div id="HeadContainer">
<img src="favicon.png" id="title"/>
<nav>
<p>Home</p>
<p>About</p>
<p>Portfolio</p>
<p>Contact</p>
</nav>
</div>
</header>
CSS:
#HeadContainer {
width:70%;
margin: 0 auto;
display: block;
}
header {
height: 60px;
}
nav {
float: right;
}
nav p {
display: inline;
margin-left: 10px;
font-size: 1.2em;
}
#title {
float: left;
width: 40px;
}
At the moment they are not aligned. How would I align the paragraph tags in the nav with the image?
You should know that inside a navigation you'll hardly have <p> elements. I don't see any reason Google also. So go with: http://jsbin.com/melag/2/edit
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
nav {
float: right;
}
nav ul{
list-style:none;
}
nav ul li{
display:inline-block;
vertical-align:middle;
}
Roko's answer is the tried and true method. I recommend it too. I want to point out that, in HTML 5, the <nav> tag is intended to replace a modified unordered list for navigation menus.
W3 Schools <nav> tag page
I'm struggling with this problem for over an hour and can't get it right, I know these are basics but none solution from google helped, I don't understand what's the problem. I got that navigation bar and I want to vertically center logo and list elements inside it:
<nav id="mainMenu">
<img class="logo" src="images/logo.png" alt="logo" />
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
css:
http://klaunfizia.pl/damian/style.css
Here's the demo: http://klaunfizia.pl/damian/
#edit:
When I put margin-top:50% for #menu why it refers to entire body instead of nav element?
Notice - the class name are different. From your existing style, remove: #mainmenu, #menu, and #menu li. Here is an example the code -> DEMO
Here is your new html:
<ul class="nav"> <img class="logo" src="images/logo.png" alt="logo" />
<li>Home
</li>
<li>About me
</li>
<li>Portfolio
</li>
<li>Contact
</li>
Here is your new CSS:
.nav {
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color:red;
}
.nav li {
display:inline;
}
.nav a {
display:inline-block;
padding:10px;
text-decoration: none;
color: #000000;
}
Since your "nav" element is fixed try wrapping your "ul" element in a div and setting the css of the margin to the distance you desire.
<div style="margin-top:20px">
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
The vertical spacing of block elements can be a bit tricky as they were never intened to behave that way. So some tricks are always required.
You can center them to the middle by making the list and the logo's position relative, than giving them a 50% top and a negative margin with the half of their height. So just add these properties to the existing ones:
.logo {
position: relative;
top: 50%;
margin-top: -25px;
}
#menu {
position: relative;
top: 50%;
margin-top: -10px;
}
use this:
#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px; /* added */
}
#menu {
float: right;
margin-right: 16%;
display: inline-block; /* added */
}
I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
Currently, the best method I can find to do this is the following:
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".
The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.
Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...
Thanks!
UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cell property works on 94% of browsers currently. You'll have to do something about IE7 and below, but otherwise should be ok.
UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. See Webkit Bug.
UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify.
Using this is simpler and you'll avoid the Webkit bug.
The modern way to distribute items evenly is to set the following two declarations on the container element:
.container {
display: flex; /* (1) */
justify-content: space-between; /* (2) or space-around or space-evenly */
}
The value to use for justify-content depends on which kind of even distribution is needed.
See MDN
ul {
list-style: none;
padding: 0;
width: 90vw;
border: 3px solid gold;
display: flex;
}
a {
background: gold;
}
ul {
justify-content: space-between;
}
ul ~ ul {
justify-content: space-around;
}
ul ~ ul ~ ul {
justify-content: space-evenly;
}
<h3>justify-content: space-between; </h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>
Here's my original answer - if for some reason using a flex container isn't viable
Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list item
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
<ul id="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>BASIC SERVICES</li>
<li>OUR STAFF</li>
<li>CONTACT US</li>
</ul>
FIDDLE
This one really works. Also has the benefit that you can use media queries to easily turn off the horizontal style — for instance if you want to stack them vertically when on mobile phone.
HTML
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
CSS
#nav {
display: table;
height: 87px;
width: 100%;
}
#nav li {
display: table-cell;
height: 87px;
width: 16.666666667%; /* (100 / numItems)% */
line-height: 87px;
text-align: center;
background: #ddd;
border-right: 1px solid #fff;
white-space: nowrap;
}
#media (max-width: 767px) {
#nav li {
display: block;
width: 100%;
}
}
http://jsfiddle.net/timshutes/eCPSh/416/
if you can, use flexbox:
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
ul {
display: flex;
justify-content:space-between;
list-style-type: none;
}
jsfiddle: http://jsfiddle.net/RAaJ8/
Browser support is actually quite good (with prefixes an other nasty stuff): http://caniuse.com/flexbox
An ideal solution will:
Automatically scale to the width of the navigation container
Support a dynamic number of menu items.
Using a simple ul menu inside of an nav container, we can build a solution that meets the above requirements.
HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Basic Services</li>
<li>Specialty Services</li>
<li>Our Staff</li>
<li>Contact Us</li>
</ul>
</nav>
First, we need to force the ul to have the full width of its nav container. To accomplish this, we will use the :after psuedo-element with width: 100%.
This achieves our goal perfectly, but adds trailing whitespace from the psuedo-element. We can remove this whitespace across all browsers through IE8 by setting the line-height of the ul to 0 and setting it back to 100% on its li children. See the example CodePen and solution below:
CSS
nav {
width: 900px;
}
nav ul {
text-align: justify;
line-height: 0;
margin: 0;
padding: 0;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav ul li {
display: inline-block;
line-height: 100%;
}
I tried all the above and found them wanting. This is the simplest most flexible solution I could figure out (thanks to all of the above for inspiration).
HTML
<div id="container">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
</div>
CSS
div#container{
width:900px;
background-color:#eee;
padding:20px;
}
ul {
display:table;
width: 100%;
margin:0 0;
-webkit-padding-start:0px; /* reset chrome default */
}
ul li {
display:table-cell;
height:30px;
line-height:30px;
font-size:12px;
padding:20px 10px;
text-align: center;
background-color:#999;
border-right:2px solid #fff;
}
ul li:first-child {
border-radius:10px 0 0 10px;
}
ul li:last-child {
border-radius:0 10px 10px 0;
border-right:0 none;
}
You can drop the first/last child-rounded ends, obviously, but I think they're real purdy (and so does your client ;)
The container width limits the horizontal list, but you can ditch this and just apply an absolute value to the UL if you like.
Fiddle with it, if you like..
http://jsfiddle.net/tobyworth/esehY/1/
This should do it for you.
<div id="nav-wrap">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
#nav-wrap {
float: left;
height: 87px;
width: 900px;
}
#nav {
display: inline;
height: 87px;
width: 100%;
}
.nav-item {
float: left;
height: 87px;
line-height: 87px;
text-align: center;
text-decoration: none;
width: 150px;
}
Have you tried setting the li width to, say, 16% with a margin of 0.5%?
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 16%;
margin-right: 0.5%;
}
edit: I would set the UL to 100% width:
nav ul {
width: 100%;
margin: 0 auto;
}
This is the sort of thing that the CSS flexbox model will fix, because it will let you specify that each li will receive an equal proportion of the remaining width.
I tried so many different things and finally found what worked best for me was simply adding in
padding-right: 28px;
I played around with the padding to get the right amount to evenly space the items.
Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.
nav li {
line-height: 87px;
float: left;
text-align: center;
margin-left: 35px;
}
Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>
<div id="container">
<object>
<div>
alpha
</div>
</object>
<object>
<div>
beta
</div>
</object>
<object>
<div>
charlie
</div>
</object>
<object>
<div>
delta
</div>
</object>
<object>
<div>
epsilon
</div>
</object>
<object>
<div>
foxtrot
</div>
</object>
<span></span>
</div>
</html>
I'm hesitant to offer this as it misuses ye olde html. It's not a GOOD solution but it is a solution: use a table.
CSS:
table.navigation {
width: 990px;
}
table.navigation td {
text-align: center;
}
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="navigation">
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>BASIC SERVICES</td>
<td>SPECIALTY SERVICES</td>
<td>OUR STAFF</td>
<td>CONTACT US</td>
</tr>
</table>
This is not what tables were created to do but until we can reliably perform the same action in a better way I guess it is just about permissable.