<style>
body{
margin:0;
padding:0;
}
#module_footerLink li{
float:left;
list-style:none;
margin:0 5px;
}
.clear{
clear:both;
}
.wrap{
border:1px solid #ccc;
width:900px;
text-align:center;
}
</style>
<body>
<div class="wrap">
<ul id="module_footerLink">
<li><a id="id_home" href="home"><span>Home</span></a></li>
<li><a id="id_the_resort" href="article-AboutUs"><span>The Resort</span></a> </li>
<li><a id="id_facilities" href="article-facilities"><span>Facilities</span></a></li>
<li><a id="id_tariff" href="article-tariff"><span>Tariff</span></a></li>
<li><a id="id_media" href="article-media"><span>Media</span></a></li>
<li><a id="id_links" href="article-links"><span>Links</span></a></li>
<li><a id="id_contact_us" href="contact"><span>Contact Us</span></a></li>
<li class="clear"></li>
</ul>
<div class="clear"></div>
</div>
</body>
Here I want li's in middle of div whose class is wrap. Do any one know how can i do that? I have tried center align but it does not work...............
see the updated css :-
<style>
body {
margin: 0;
padding: 0;
}
#module_footerLink {
margin:auto;
width:450px;
}
#module_footerLink li {
float: left;
list-style: none;
margin: 0 5px;
background:red;
}
.clear {
clear: both;
}
.wrap {
border: 1px solid #ccc;
width: 900px;
text-align: center;
background:blue;
}
</style>
i think you looking like this:-
http://jsfiddle.net/eHyuZ/2/
UPDATED
Now you can add li's as per your requirement...it will not go anywhere actually your bit of your method was not correct that's why you were facing problems now i have made some changes and made it the navigation in proper way
see the updated link:
http://jsfiddle.net/eHyuZ/7/
body{
margin:0;
padding:0;
}
#module_footerLink li{
display: inline-block;
list-style:none;
margin:0 5px;
/* For IE 7 */
zoom: 1;
*display: inline;
}
.clear{
clear:both;
}
.wrap{
border:1px solid #ccc;
width:900px;
text-align:center;
}
you must use margin:0 auto;
.wrap{
border:1px solid #ccc;
width:900px;
margin:0 auto;
text-align:center;
}
http://www.w3schools.com/css/css_align.asp
EDITED by comment
Try add
#module_footerLink {
display:inline-block;
/*IE7*/
zoom:1;
*display:inline;
}
http://jsfiddle.net/DEmTh/1/
But in IE7 its not working
Related
I've created simple responsive navigation menu with media queries. I faced the weird situation. After applying text-align:center to center text in blocks, the first li element is moved slightly to left, others are centered fine. I can't figure out what's the issue. I tried margin: 0 auto, it doesn't work for me.
This is what's happening:
Here's the code:
<header>
<div class="logo">Logo</div>
<div class="menu" role="button">
<span></span>
<span></span>
<span></span>
</div>
<nav class="navigation">
<ul>
<li>home</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS:
header{
background:grey;
.logo{
font-size:40px;
color:white;
background:blue;
width:200px;
display:inline-block;
}
.menu{
display:inline-block;
float:right;
}
nav{
display:inline-block;
ul{
margin:0;
padding:0;
li{
display:inline-block;
margin: 0 20px;
background:orange;
}
}
}
}
#media screen and(max-width:600px){
header{
.menu{
display:inline-block;
height: 40px;
width: 40px;
margin:10px;
span{
border-top: 5px solid #fff;
display: block;
margin: 5px 0;
}
}
.navigation{
display:block;
ul{
margin:0;
padding:0;
text-align: center;
li{
width:100%;
display:block;
background:orange;
margin:0;
}
}
}
}
}
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.
My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle
Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/
You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?
I am trying to make my transparent menu appear centered, but whatever method I dig up from the internet, nothing seems to do the trick.
I would really love if someone could look through this code, and give me a hand. :)
The HTML-part:
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
The CSS part:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
You can do it by updating #menu to:
#menu {
position: absolute;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
left: 50%;
margin-left: -152px;
width: 305px;
}
JSFiddle
The reason that your menu is not centering, is because you do not have a defined width for either the menu or the container. If you had a defined width, then you would be able to use:
margin: 0 auto;
I'm not sure yet why your float starts messing up your background colors, however I did notice you missed a semicolon at the end of one of your style properties
#container
{
padding: 10px 0 0 0
...
}
should be
#container
{
padding: 10px 0 0 0;
...
}
Another option:
EDITED CSS:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu ul { <===Added this definition and moved the border here as well
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
EDITED HTML (closed a div tag)
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>
And here's the FIDDLE
Centering floats is difficult. Here's one method:
<style type="text/css">
#container
{
font-family:arial;
height:400px;
border: red;
position: relative;
}
#menu
{
position:relative;
left:-50%;
float:right;
}
ul
{
position:relative;
left:50%;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
li{
display:block;
float:left;
padding: 8px 13px;
}
a {text-decoration:none;}
</style>
<div id="container">
<div id="menu">
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>
Source: http://browse-tutorials.com/snippet/center-floats-css
Fiddle: http://jsfiddle.net/yucHM/2/
I'm pretty new to HTML and CSS. I'm making a menu bar horizontal and I can't seem to align it to center of screen. I have tried margin:0 auto; and <body align=center> but neither seems to work.
Here is my code:
<html>
<head>
<style>
#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float:left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<li>FAQs</li>
<li>Donate</li>
</ul>
</body>
</html>
As you can see, I'm using margin:0 auto;, but it doesn't work.
You have float elements. Floating elements will not follow that centering unless your container is treated as a block, or inline block.
To reach the desired result, you'd want to do something like in this example.
By adding a container, center margin and using display: inline-block on the #menu they will be centered like normal content. Note that this might not work in IE, in which case, you should add a line with *display: inline;.
Example | Code
HTML
<div class='container'>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<li>FAQs</li>
<li>Donate</li>
</ul>
</div>
CSS
.container{
text-align: center;
width: auto;
margin: 0 auto;
}
#menu {
margin:0 auto;
display: inline-block;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float: left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
Give your menu a width if you want to center it inside it's parent element (in this case, the body.) Additionally, remove your float - it's not going to center if you're floating it one direction or another.
You can give the menu a width width: 400px; or what your desired width is. Then, you can set the left and right margin to auto margin-left: auto; margin-right: auto;
You need to give a width to your menu and remove float:left
eg.
#menu {
margin:0 auto;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
width:900px;
display:block;
}