Here is the HTML:
<div id="menu">
<ul>
<li>Home
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Here is the CSS:
li {
display:inline;
padding: 10px;
}
#menu {
margin: 21px 646px 21px 646px;
}
I cannot seem to increase the space between the menu items. What should I adjust to do so?
try
a {
display: block;
padding: 10px 30px;
}
edit
Do you want something like this ? http://jsfiddle.net/Y8Ng7/
Just remove that ridiculous margin you have for the nav and increase the li padding
li {
display:inline;
padding: 10px 40px;
}
To center a div element, don't do margin: 21px 646px 21px 646px;
just do margin: 21px auto;
You just need to add display:inline-block; in list menu.
Change your CSS like below :
li {
display:inline-block;
padding: 10px;
}
#menu {
margin: 21px 646px 21px 646px;
}
Or See Here
Rather than trying to manipulate the list items, try adding your padding to the anchor. Ex:
#menu li a { padding: 10px; display: block; }
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I'm building my first website with HTML5, and have run into a problem that is driving me insane. I'm trying to perfectly center the items within a horizontal navigation bar at the top of my page. The items are within an unordered list.
I have display:inline-block applied to the list items with text-align:center on the parent. It seems to want to work, but it appears just to the right of the center. I tried taking everything out of a list and simply putting it into a div, and it immediately worked and centered perfectly, but I could not figure out how to efficiently format the individual elements without having them in a list. As soon as I put them back into a list, they shifted back over to the right. I have put a white background on the header to make it easier to see the alignment.
#menu {
width: 960px;
max-height: 90px;
background: #ffffff;
}
#menu ul {
text-align: center;
list-style: none;
padding-top: 18px;
width: 960px;
}
#menu li {
display: inline-block;
vertical-align: middle;
}
#menu li a,
menu li a:visited {
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding: 0px 13px 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
I expected it to center the list, but it appears slightly to the right of the center.
You Try
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
CSS:
#menu{
width:960px;
max-height:90px;
background:#ffffff;
}
#menu ul{
text-align:center;
list-style:none;
padding: 18px 0 0 0;
width:960px;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
It will make list at center
I have removed the default padding of ul set by the user agent stylesheet. Also I have centered the nav container using auto margin. hope this helps.
html,body{
margin: 0;
padding: 0;
}
#menu{
width:960px;
max-height:90px;
background:#ffffff;
margin: 0 auto;
}
#menu ul{
text-align:center;
list-style:none;
padding: 18px 0 0;
width:960px;
margin: 0 auto;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
Try to add these styles:
#menu{
....
margin: 0 auto;
}
#menu ul{
....
padding-left: 0;
}
you need to remove default margin and padding from html elements like this:
*{
margin:0;
padding:0
}
Please use this css.
#menu {
width: 960px;
max-height: 90px;
background: #ffffff;
margin-left:auto;
margin-right:auto;
}
#menu ul {
text-align: center;
list-style: none;
padding-top: 18px;
width: 960px;
padding-left: 0;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
This is due to ul have by default 40px left padding. So you need to remove that left padding from ul.
#menu ul{
...
padding-left:0;
}
/*or*/
#menu ul{
...
padding: 18px 0 0;
}
Put 0 padding on your #menu ul instead of not defining it at all. Like this:
padding: 18px 0px;
I've edited the widths in order to fit it better into the snippet window, and I also added background color to the #menu.
#menu {
width: 100%;
max-height: 90px;
background: #dd0;
}
#menu ul {
text-align: center;
list-style: none;
padding: 18px 0px;
width: 100%;
}
#menu li {
display: inline-block;
vertical-align: middle;
}
#menu li a,
menu li a:visited {
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding: 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
I've change a little your code to make it a little more simplier (Try not to use ID's on CSS, always prefer to use classes instead):
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Home</li>
<li class="menu-item">Gallery</li>
<li class="menu-item">Shop</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
And for the CSS (The trick is to use the 100% of the width where you put the menu, also prefer to use Flexbox that made a lot more simpler to align items in the DOM):
.menu {
display: flex;
flex-direction: row;
width: 100%;
max-height: 90px;
background: #ffffff;
margin: 0 auto;
}
.menu-list {
display: flex;
flex-direction: row;
justify-content: center;
list-style:none;
padding-top:18px;
width:100%;
padding-left: 0;
}
.menu-item a, .menu-item a:visited{
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding-left: 1em;
}
Hope this help.
I am trying to create a menubar with a few links in it. Here is my relevant code:
CSS:
#menuBar {
overflow: auto;
padding: 0px 0px;
margin: 15px 0px;
}
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
}
div#menuItem ul a {
font-size:14px;
}
HTML
<div id="menuBar">
<div id="menuItem">
<ul>
<li> HOME </li>
<li> ABOUT </li>
</ul>
</div> <!-- Menuitem closes -->
</div>
So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of #menuBar {padding -5px 0px }. But, nothing happens.
How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.
put a height to the div... either by using the line-height or height properties.
Try floating the div#menuItem ul li left, then add display:block to your a element and an explicit line-height value.
div#menuItem ul li {
padding: 0px 20px 0px 20px;
list-style-type: none;
display: inline;
float:left;
}
div#menuItem ul a {
display: block;
font-size:14px;
line-height: 1;
text-decoration: none;
}
I am using a Html navigation menu on a website using the standard UL LI approach. But the problem is that when I resize the browser window the menu is resized and menu items outside the viewable area are shifted downwards. Has any on faced a similar problem?
Html
<div style="margin-top: 11px; display: block;" class="menubar">
<ul class="tabs">
<li >Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ul>
</div>
CSS
.menubar {
background: url("images/bg.png") repeat scroll left top #222222;
border-bottom: 1px solid #B2D7FC;
border-top: 1px solid #B2D7FC;
color: #FFFFFF;
float: left;
height: 35px;
margin: 10px 0 0;
padding: 0 2%;
width: 96%;
}
ul.tabs {
display: block;
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
ul.tabs li {
background: url("images/tab_right.png") no-repeat scroll right top transparent;
float: left;
padding: 0;
position: relative;
}
Please define its width if you are not given like
div
{ width:size %/px/em;
min-width:%/px/em;
position:absolute;
}
Set a min-width on your container, or the <ul>.
<ul>
<li></li>
<li></li>
</ul>
CSS
ul{
min-width:720px;
}
Change the 720px to however large you want the menu to be. That way, it will resize until it hits that limit.
How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.
<div class="header">
<b>How ya doin?</b>
<ul class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
</div>
THe CSS:
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
This is what I get:
I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.
You'll need a div to clear it afterwards to fix the layout though.
Something like:
.header b {
width:50%;
float:left;
}
.header ul {
width:50%;
float:right;
}
then underneath
<div style="clear:both"></div>
to avoid messing things up.
Try
ul {
display:inline;
/* ... */
}
something like:
.header b{display:block; width: 100px; float:left}
.menu {width:150px; float:left}
Good luck
what about using absolute / relative positions?
this is really a simple and nice solution for header text, easy to add another elements as well
.header{
position: relative;
}
.header > b{
position: absolute;
left: 10px;
top: 5px;
}
.header > ul{
position: absolute;
top: 5px;
right: 10px;
}
<div class="header">
<!-- float to left -->
<b style="float: left;">How ya doin?</b>
<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
<!-- clearing float -->
<br style="clear:both;" />
</div>
I changed your CSS to this and it seemed to do the trick (additions noted):
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.
Easiest should be to set display: inline; on the ul element.
Another is to set float: left; on both the <b> and the <ul>, and give them both a width.
If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.
Using CSS Style Sheet
In my web page, i have two class like menu and leftside. In menu i have the ul, li classes. i want to use a ul, li in left side also, but the problem is if i used the ul, li, it was matching with menu ul, li
ul -underlist, li - list
I tried to change the code of sheet,
my css code.
#leftside{
float: left;
width: 230px;
margin-left: 5px;
margin-top: 15px;
overflow: hidden;
font: 13px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: maroon;
}
ul {
padding: 10px 10px 2px 0;
margin: 0px;
list-style: none;
}
li li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
Html Code
<li>
<ul>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
ul, list are matching with the menu ul, li
How to solve this issue. Please.
To reduse the amount of space above the inner list change the padding for the ul so that it is 0 or negative.
For Example:
ul {
padding: 0 10px 2px 0;
margin: 0px;
list-style: none;
}
You can also use a special style sheet to correct the problem in Internet Explorer by doing something like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
You would then need a second CSS file named iespecific.css which has the above ul styling in it.
Use an id to distinguish between the two.
For example the HTML would be:
<ul id="outter">
<li>The Outter List</li>
<li>More Outter List
<ul id="inner">
<li>This is the inner list</li>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
<li>Still The Outter</li>
</ul>
In the CSS you would have something like this:
#outter ul {
padding: 10px 10px 2px 0;
list-style: none;
}
#outter li {
margin-left: 10px;
line-height: 30px;
padding-left: 15px;
}
#inner ul {
padding: 10px 10px 2px 15px;
list-style: none;
}
#inner li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
This looks something like this:
alt text http://img16.imageshack.us/img16/2376/examplesg.png