There is unwanted space after unordered list shown in IE and Firefox in the last HTML <li> item that can't be removed with reducing the ul width. Anyone have idea how to remove the space? Thanks.
#menubar {
width:249px;
margin:0 auto;
list-style:none;
border:1px solid grey;
border-radius:3px;
margin-top:5px;
padding:0;
height:26px;
}
.toggle {
margin:0;
line-height:16px;
float:left;
border-right: 1px solid grey;
padding:5px 8px 5px 8px;
}
.selected {
background-color:grey;
}
<body>
<ul id="menubar">
<li class="toggle selected">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle selected" style="border-right:none;">HTML</li>
</ul>
</body>
Don’t specify a fixed width on the ul, but make it display as inline-block instead. (And if you need it horizontally centered, then use text-align:center on the parent element.)
div {
text-align:center;
}
#menubar {
display:inline-block;
margin:0 auto;
list-style:none;
border:1px solid grey;
border-radius:3px;
margin-top:5px;
padding:0;
height:26px;
text-align:left; /* reset text-align for list contents, if necessary */
}
.toggle {
margin:0;
line-height:16px;
float:left;
border-right: 1px solid grey;
padding:5px 8px 5px 8px;
}
.selected {
background-color:grey;
}
<body>
<div>
<ul id="menubar">
<li class="toggle selected">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle selected" style="border-right:none;">HTML</li>
</ul>
</div>
</body>
Related
I have menu
ul{
list-style-type:none;
}
li{
float:left;
padding:5px;
border:1px solid black;
}
.selected{
border-top:6px solid blue;
}
<ul>
<li class="selected">Home</li>
<li>Gallery</li>
<li>About</li>
<ul/>
Need to add to selected border-top 6px and the border must be with rounded bottom corners. Only border-top must appear, without moving element.
Please help to solve this problem))
I attached small sketch to show what I need)
Use a pseudo element:
ul{
list-style-type:none;
}
li{
float:left;
padding:5px;
border:1px solid black;
position:relative;
}
.selected:before{
content:"";
position:absolute;
top:0;
height:6px;
right:0;
left:0;
border-radius: 0 0 10px 10px;
background:blue;
}
<ul>
<li class="selected">Home</li>
<li>Gallery</li>
<li>About</li>
<ul/>
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?
This is my HTML:
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
</div>
This is my CSS:
.topmenucontainer {
margin:0 auto;
border:1px solid red;
background-color:#000;
display:block;
}
#topmenu {
margin:0 auto;
border:1px solid red;
/*min-height:25px;*/
background-color:#fff;
width:900px;
display:inline;
}
#topmenu ul {
margin:0px; padding:0px;
list-style-type: none;
float:right;
}
#topmenu ul li {
float:left;
}
And This is how it is displayed
http://img842.imageshack.us/img842/8627/3ktn.jpg
Why the UL isn't displayed where I putted it?I mean why isn't it displayed inside my topmenu div which is white backgrounded and only 900px wide?
You need to add a clear:both div to handle the inner floating
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
I think you don't need any styles on your .topmenucontainer*. you can get rid of the .topmenucontainer styles
you can try the below styles on topmenu. Do you have a final picture of what you are trying to achieve?
#topmenu {
overflow: hidden;
margin: 0 auto;
border: 1px solid red;
background-color: #fff;
width: 900px;
}
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;
}
<div id="header">
<div id="logo">
<h1>Look Around You</h1>
</div>
<div id="horNav">
<ul class="horNav">
<li class="horNav">HOME</li>
<li class="horNav">SUBMIT-CONTACT</li>
</ul>
<ul class="horNav-last">
<li class="horNav">TAGS</li>
</ul>
<ul class="advertisment">
<li>ABOUT</li>
<li>ADVERTISEMENT</li>
</ul>
</div>
</div>
css is:
#wrapper{
width:80%;
margin:0 auto;
min-width:920px;
}
#header, #logo{
width: 100%;
float:left;
}
#horNav{
background:black;
width: 80%;
color:white;
margin: 0 auto;
}
#horNav a{
background: black;
}
.horNav li{
float:left;
border-right:1px solid #828282;
}
.horNav-last li{
float:left;
}
.advertisment li{
float:right;
border-left:1px solid #828282;
}
#horNav a{
display:block;
padding:5px 10px;
color:white;
font-size: 13px;
}
#horNav a:hover{
background:#828282;
}
what happens is that unordered lists are colored black in separate corners and middle of #horNav is white as you can see it HERE but of course it needs to be all black. how to fix this?
#horNav {
overflow: hidden;
display: block;
width: 100%;
}
#horNav can be whatever width you want e.g. 80% as it is now, and if you want it to be centred you can reintroduce the margin: 0 auto;.