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;
}
Related
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; }
I always have this problem and always come up with some hacky workaround. Anyone help?
<ul>
<li>hello</li>
</ul>
<img src = 'image.jpg' />
so these are lined up next to each other in a row format. When I try and push the list element down using margin-top: 1em nothing happens. But when I do the margin-top: 1em on the ul tag it moves both the image and li tags down together. How do I fix this? And Why does this happen?
JSFIDDLE
http://jsfiddle.net/MZhAv/
if you change the margin-top on the li tag you will see it wont move. I dont understand why that is.
Remove the display:inline for the il to have the margin-top effect for both image and ul.
If you want the image and the ul to be next to each other, with having the ul only margin-top, then check this link:
Live demo
ul {
list-style: none;
float:left;
}
li {
//border: 1px solid black;
margin-left: 12em;
margin-top: 2em;
padding-top: 1em;
}
img {
float:left;
}
Edit
if you want the image on the right:
Live Demo
HTML
<img src= "http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/magic-marker-icons-animals/114689-magic-marker-icon-animals-animal-cat1.png"/>
<ul>
<li>HELLO</li>
</ul>
CSS
ul {
list-style: none;
float:left;
}
li {
//border: 1px solid black;
margin-left: 3em;
margin-top: 2em;
padding-top: 1em;
}
img {
float:left;
}
I wrote following html page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
and the output is following
I made a small change in the section
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .5em;
}
changed the margin from .25em to .5 em and now it appears as following
If you see the about thing has come out, I am not clear as what thing has caused this behaviour, just by changing margin how can this happen?
as per suggestions below I tried changing
if I remove the width column, and in case I remove the float:left column then all the boxes are vertical
i.e.if I do
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
}
it comes as following
why is this happening
Your #nav ul element has a width of 19.5em.
Your #nav ul li a elements have 0.5em padding and 0.5em margin. Width-wise this adds up to 2em + 2px (border) per element. This means that the 4 of your elements have 8em + 8px width without any text.
This allows a total of 11.5em width to contain the text found within your elements. If the cumulative text exceeds 11.5em then your elements will wrap onto the next line.
To fix this, simply increase the width of your #nav ul element:
#nav ul {
width: 25em; /* Adjust accordingly. */
}
That's because your #nav ul has a fixed width width: 19.5em.
Now if you change the width or padding or margin of the inside li elements you need to change the total widht of your ul.
By adding margin to your tags, you've increased the overall width of the elements inside of the , but you've still got your restricted to 19.5em.
You can either remove the width declaration from your or increase its width.
it's because the content is wider than the width of the containing element. adjust it so:
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em; <- change this to 21em
}
on an aside, why not use html5 element instead of a div with an ID?
When you double your margin in EM, it will go passed the width that you have for the entire nav. Also, you have float:left hidden in your CSS. I would suggest getting rid of the float:left and doing display:inline-block instead, like so.
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block;
list-style:none;
margin: 0 auto;
}
#nav ul li {
display: inline-block;
font-weight: normal;
text-transform: uppercase;
}
#nav ul li a {
display: inline-block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
HTML
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
The only changes you must to do is to apply this css agains you have:
#nav ul {
display: block;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-block;
text-transform: uppercase;
}
I'm trying to make a navigation bar with only a right border, but when I do this, there's like an invisible left border on the hover, which does not fully make the border the color I want it to be. (a part of the left side is blue instead of light blue)
This is the CSS
#navbar{
width:900px;
margin:0 auto;
background-color:#3f67c0;
height:60px;
}
#navbar ul {
list-style-type: none;
text-align: left;
margin:0px;
padding:0px;
}
#navbar ul li {
display: inline-block;
}
#navbar ul li a {
display:block;
border-right:#FFF solid 1px;
border-left:none;
border-top:none;
boder-bottom:none;
padding: 20px 40px 20px 40px;
text-decoration: none;
color: #fff;
}
#navbar ul li a:hover {
color: #FFF;
background-color: #35b5eb;
}
This is the HTML
<div id="navbar">
<ul>
<li>HOME</li>
<li>CLAIM</li>
<li>PROOF</li>
<li>HELP</li>
</ul>
</div>
This is caused by the space in the HTML as well as a combination of display: inline-block and its display: block child. The best solution is to remove said space
<li>HOME</li
><li>CLAIM</li>...
You could also use font-size: 0 on the ul and the necessary font-size on the <li> or <a>, or use float: left on the <li> instead of display: inline-block, but these may result in other artifacts
http://jsfiddle.net/ExplosionPIlls/zPjCS/
I have a navigation bar/list that is using only HTML and CSS. The background image for the nav bar is 45px tall.
The list elements have been set with a CSS border-left property. I basically want to have a single vertical separator before each item in the list.
When I change the font in the list to around 30px the height of the border-left fills the 45px height of the div which is good. But when I set the size of the font smaller the border-left no longer fills the height of the div.
How can I set the font in the list small and yet still have the height of the border-left to 45px?
I have placed the code below. Thanks in advance
CSS:
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 25px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin: 5;
padding: 5;
}
#navbar li{
border-left: solid 1px white;
display: inline;
padding: 1px 10px 1px 1px;
margin: 10px;
}
HTML:
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Start</li>
<li>In Jouw Regio</li>
</ul>
</div>
Here's a solution:
http://jsfiddle.net/bQe6W/1/
I changed the following
#navbar li {
display: inline-block;
line-height: 45px;
margin: 0 10px;
}
Also set the background of the div to gray so you can see the example!
For #navbar li change the display to inline-block and set the height to 100% and set the line-height to 45px.