I've tried everything, but it's not centering the list on the page. Here's the css:
#lowermenu2 {
width: 100%;
}
#lowermenu2 ul {
list-style-type: none;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
}
#lowermenu2 a {
width: 100%;
text-align: center;
display: block;
text-decoration: none;
color: #003E79;
font-family: "Adobe Garamond Pro";
font-weight: bolder;
font-size: 1.3em;
height: 44px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding-top: 7px;
font-style: italic;
line-height: 90%;
}
#lowermenu2 li {
float: left;
width: 30%;
max-width: 230px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
}
You can see the page at http://granthoneymoon.com/temp2.html (it's the lower menu right under the blank ad, not the top nav menu)
UPDATE: I got rid of the float:left and changed block to inline:block. I also changed lowermenu2 to position:relative and made the left and right margins "auto" and it still isn't centered. (it's the LOWER menu I'm talking about not the mainnav)
The reason is because of the "float: left;" on li tag. Float is normally used to position the content to left or right. Hence you wouldn't be able to center it. So the property you are looking for is "display: inline-block;"
#lowermenu2 ul {
list-style-type: none;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
text-align: center;
}
#lowermenu2 li {
display: inline-block;
padding-left: 10px;
width: 25%;
}
Add text-align: center to your UL element and remove float:left from your list elements and set them to display: inline-block.
#lowermenu2 ul {
/*your existing styles*/
text-align:center;
}
#lowermenu2 ul li{
/*your existing styles minus float left*/
display:inline-block;
}
Here is result:
If you are trying to center the actual "nav bar" and not just the nav "links"
then you need to edit 2 things:
BODY
body {
position:relative;
margin:0 auto;
width:1000px; <!-- Or Whatever you want it be -->
}
At present your body is set to 100%, that is fine, now just add the position and margin attributes as I have above...this will center your page.
Nav Bar
Now for the Nav Bar
#mainnav{
position:relative;
margin:0 auto;
width: 100%;
}
This will cause your nav bar to center itself in the middle of the page
Related
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?
Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/
HTML
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="" />
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 60px;
width: auto;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
width: 60px;
height: 60px;
margin-right: 5%;
float: right;
}
#clear {
clear: both;
}
If you want your navigation bar centered in the parent block, here is one way of doing it.
Apply display: inline-block to the .navbar and text-align: center to .headline.
Assuming that you want the navigation bar centered with respect to the full
width of the parent block, you need to take the image out of the content flow.
You can do this by applying position: absolute to the .facebook element.
.headline {
height: 60px;
width: 100%;
background-color: black;
margin-top: 10px;
text-align: center;
position: relative;
}
.headline .navbar{
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 60px;
width: auto;
display: inline-block;
background-color: yellow;
list-style: none;
}
.headline .navbar li{
display: inline;
}
.headline .navbar li a {
text-decoration: none;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
}
.headline .facebook {
position: absolute;
top: 0;
right: 5%;
width: 60px;
height: 60px;
}
<div class="headline">
<ul class="navbar">
<li>Home</li>
<li>Team</li>
<li>Info</li>
<li>Downloads</li>
</ul>
<img class="facebook" src="http://placehold.it/60x60" />
</div>
I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):
http://jsfiddle.net/nchm3gyj/32/
I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?
http://jsfiddle.net/nchm3gyj/42/
I am having some problems getting my menu to center on the screen. I thought setting the display to block, and making the left and right margins to auto, would do this for me; however, I was wrong. Here is a JSFiddle to help show the problem. Thanks for the help.
<ul id="menuList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
#menuList{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
float: left;
margin-right: 0.5em;
}
#menuList a
{
display: block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
set menu to inline-block and parent to text-align:center
JS Fiddle
replace body with your parent id or class
body {
text-align:center;
}
#menuList {
display:inline-block;
}
The best way to center an element is by using margin: 0 auto; but the element need to have a fixed width (not 100% as you have).
So just add:
#menuList {
width:408px;
margin:0 auto;
}
Vitorino's answer is generally a bad idea. You don't want to put text-align: center on your body.
You could, however, set that CSS on the ul, and display the menu items inline(-block). As such.
#menuList ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menuList li {
list-style: none;
display: inline-block;
margin-right: 0.5em;
}
You have to change the width, example:
#menuList{
display:block;
width:70%;
margin-left:auto;
margin-right:auto;
}
You used display block, so that your elements start new line, and then floats, that they would stay in same line. Just don't use this weird combo.
If you need items stay in line use 'display:inline;'
if you need items to stick to either left or right side of parent element, use floats. Be careful as floats often mess all the thing up. There are other ways to float things, that doesn't pull them out of document flow.
Here is fixed CSS:
#menuList{
display:block;
width:100%;
margin: 0 auto;
text-align:center;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
display: inline;
margin-right: 0.5em;
}
#menuList a
{
display: inline-block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
I have a unordered list, which is inside a div element. The goal is to make list elements fill the <div> from one side to the other perfectly.
Right now the left side is positioned just as I need, but I need the right side to look the same way. Hopefully you get the idea of what I mean.
Fiddle
HTML code:
<div id="currency">
<ul>
<li>Currency £</li>
<li>Sign in</li>
<li>My Account</li>
<li>My Gifts</li>
<li>My Basket</li>
</ul>
</div>
CSS code
#currency{
height: 11px;
width: 360px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 11px;
text-align: justify;
}
#currency ul{
list-style-type: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
}
#currency ul li{
display: table-cell;
}
I think want you want to achieve is using text-align properly.
#currency ul li{
text-align: center;
}
#currency ul li:first-child {
text-align: left;
}
#currency ul li:last-child {
text-align: right;
}
Fiddle
Try the flexbox model since it's meant for situations like this:
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space. Flex
items can be stretched to use available space proportional to their
flex grow factor or their flex shrink factor to prevent overflow.
#currency {
width: 500px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 14px;
text-align: justify;
padding:10px;
vertical-align:middle;
}
#currency ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content:center;
width: 100%;
}
#currency ul li {
flex-grow:2;
text-align:center;
margin:3px;
background:#fc0;
height:20px;
padding:5px;
}
See fiddle
All colors, paddings and margins were added in order to show how it works since your tiny example is very difficult to see
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>