Morning again...,
Sorry to bother everyone but I need more help... I haven't done any real coding in ages so here goes...
I'm trying to make a horizontal navigation menu, here's my html
<nav>
<ul id="navmenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<ul>
<nav>
now I have the following CSS
/* menu */
ul#navmenu{
border-top:1px solid #FFF;
background:#e60000;
list-style: none;
margin: 0;
padding: 0;
padding-left:30px;
}
ul#navmenu li{
display:inline;
}
ul#navmenu li a{
color:#fff;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
}
ul#navmenu li a.selected{
color:#e60000;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
background:#fff;
}
I want the links to sit in the center of the Li and look something like this:
However the containing UL doesn't seem to contain the LIs, they bleed out of the container. I've played around with overflow and line heights but nothing seems to work... here's a worst case scenario...
does any one have any ideas?
give display:block to your <a> because <a> in an inline element so, inline element not take vertical margin, vertical padding, width & height
Check this http://jsfiddle.net/T8eNe/2/
but first close your UL & NAV
For starters, I would close the <ul> and <nav> tags correctly, then check to make sure that the parent containers are floated left.
Give inline-block to your anchor
ul li a { display: inline-block; }
Related
I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item.
My main items are split into two columns using column-count, and this is where the misery begins.
In Firefox, everything behaves as expected: the submenu pops out where the hovered item is. In Chrome, the submenu pops up relative to the leftmost column.
The four cases (hovered items 3 and 9, Firefox and Chrome) are shown in the attached screen. Try the demo both in Firefox and Chrome to see what I mean.
Is there a neat solution for this? I tried column-span, but that doesn't work. I cannot make the item's li relative because I want the popup to fill the complete height.
ul.first {
border:1px solid #888;
position:relative;
display:inline-block;
margin:5px;
padding:0;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule:1px solid #888;
-moz-column-rule:1px solid #888;
-webkit-column-rule:1px solid #888;
background-color:#eee;
}
ul.first li {
list-style:none;
display:block;
width:200px;
background-color:#eee;
margin:2px;
padding:5px;
}
ul.first li:hover {
background-color:#ddd;
}
ul.first > li.hassub > ul {
display:none;
position:absolute;
margin-left:100px;
top:0;
bottom:0;
background-color:#ddd;
padding:0 5px;
}
ul.first > li.hassub:hover > ul {
display:inline-block;
}
ul.first > li.hassub > ul > li {
background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
background-color:#eeffee;
}
<ul class="first">
<li>Item 1</li>
<li>Item 2</li>
<li class="hassub">Item 3
<ul>
<li>Subitem 3-1</li>
<li>Subitem 3-2</li>
<li>Subitem 3-3</li>
<li>Subitem 3-4</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="hassub">Item 9
<ul>
<li>Subitem 9-1</li>
<li>Subitem 9-2</li>
<li>Subitem 9-3</li>
<li>Subitem 9-4</li>
</ul>
</li>
<li>Item 10</li>
</ul>
http://jsfiddle.net/cfckw5jz/6/
There are many solutions:
Solution 1: A quick solution is to Give the sub-menu inside the right column different class (hassub2), and give it different margin-left
.hassup2{
left: 390px;
}
Solution 2: A smarter solution is to give all sub-menus inside li's above 5 a different margin, this can be achieved by using nth-child:
ul.first > li:nth-child(n+5) > ul{
left: 390px;
}
n + 5 = any element above 5 (in that case all li's above 5)
Solution 3: You can also separate it into 2 UL's and float them left (or use display: inline-block), and assign position relative to the UL's to be the reference point for the sub-menu:
li{ list-style: none; }
ul.left,
ul.right{
float: left;
width: 200px;
position: relative;
}
.right li,
.left li{
float: left;
width: 100%;
background-color: #eee;
margin: 2px;
padding: 5px;
}
.right li ul,
.left li ul{
display: none;
position: absolute;
left: 200px;
top:0;
height:100%;
}
.right li ul li,
.left li ul li{
width: 100%;
padding: 5px;
margin: 2px;
}
.right li:hover ul,
.left li:hover ul{
display: block;
}
Tip: use Left instead of margin-left for a consistent design, using left will always make the element 200px away from left side, it will not depend or get effected on any element placed before it, like what margins behave.
Tip: Absolute positioned element will look for the first father with a defined position and make it its reference point. So to make an absolute div refer to the direct father div, the father must be given position (relative, fixed, or absolute).
Today I realized that this issue was fixed in the latest Chrome release 55 and now Chrome behaves as the other modern browsers.
So, no need to make modifications to css nor html. Yay!
I have a list of links that are displayed inline. I want the last li to be positioned centered of the inline list above it. How can I do this with css?
The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
You can do this by setting text-align:center to both the ul and li element:
ul{
list-style:none;
height:100%;
width:100%;
padding:0;
text-align:center;
}
ul li{
text-align:center;
display:inline-block;
width:75px;
height:20px;
background:silver;
border:1px solid black;
padding:10px;
}
IN ADDITION: Make sure that the ul has a width of 100% and the padding of the ul is set to zero. Also, the li must have a display of inline-block.
Check out the fiddle:
http://jsfiddle.net/rmj7q78t/
This css will do the trick:
ul li {
display: inline-block;
}
ul li:last-child {
display: block;
text-align: center;
}
I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.
This is my code:
.menu {
list-style-type: none;
background-color: #660066;
}
.menu li {
display: inline;
padding-left: 40px;
padding-right: 40px;
}
.div {
width: 100%;
height: 500px;
background-color: #660066;
}
<nav>
<ul class="menu">
<li>Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
</nav>
<article class="div">
In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.
jsfiddle
ul{
margin: 0;
}
Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.
ol, ul {
margin: 0;
padding: 0;
}
Click here to see why it is important to set a reset.
You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this
.div
position:relative;
bottom:30px;
I've tried many methods but cannot get this menu centered .. Any ideas?
You can view the page here:
http://jsbin.com/obecig/1/edit
I tried text-align:center in the #nav ul selector but no luck..
<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>
<body>
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>
Seeing how everyone answered the same thing and no one bothered to explain why... here we go:
As you all know, centering a block level element can be a pain when you don't know how. First of all, most of us know that margin: 0 auto; works, but not everyone knows why.
A quick breakdown of margin: 0 auto; has to do with the way CSS accepts shorthand notation for certain properties. Saying margin you are of course targeting the margin of the given element and the 0 part is using shorthand notation to say: 0 on the top and 0 on the bottom ... while adding auto at the end you are saying: auto margin on the left and auto margin on the right.
The above will not work if you don't have a defined width for the element in question. In this case the element has an ID attribute of #nav ... this is why the examples that everyone gave in their answers have a fixed width. The logic behind this is that a block level element extends 100% of it's parent container by default unless you specifically define otherwise in your CSS.
So in theory this also works for centering, and while it's more markup and not the best approach for simplicity's sake, I'm only showing it for illustrative purposes.
#nav {
width: 300px;
margin-left: auto;
margin-right: auto;
}
Everyone is more used to looking at it like this... and we use it like this because it's shorter.
#nav {
width: 300px;
margin: 0 auto;
}
The zero is not a must... Remember that it's the top and bottom margin of your element. So with that said, here's an example of the element with a 20 pixel margin on the bottom and centered.
#nav {
width: 300px;
margin: 0 auto 20px auto;
}
Last but not least... The shorthand notation for this property (margin) is the same as for the: border , padding , etc. It stars from Top... going clockwise to Left with Right and Bottom in between the two.
So it's: top, right, bottom, left. Like so: margin: 10px 20px 30px 40px
You need to give it a width, and then set the horizontal margins to auto. That's the quickest way anyways.
add this to your css:
#nav
{
width:100px;
margin: 0 auto;
}
To center something, it needs a width, and margin: 0 auto, so if you add this code:
#nav {
width: 100px;
margin: 0 auto;
}
It should (and did for me) work
#nav{
width:80px;
margin: 0 auto;}
So basiclly I'm trying to add a custom thumbnail on my website. I'm using the <ol> and styling it in css such as..
ol {
counter-reset: none;
margin: 0px;
padding: 0px;
list-style-image: url('{image:thumbNail}');
position: relative;
right: 20px;
}
But i want to position this without affecting my other text within the <ol>. how can i achieve this so i dont effect the text but just positon the thumbnail? Help will be appreciated thanks.
Here is a fidle: http://jsfiddle.net/enn5r/
<ol class="thumnails">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
ol.thumbnails li{
padding:5px 0px 5px 25px;
border-bottom:1px solid #DDD;
background:transparent url(/icons/clock.png) no-repeat 5px 7px;
}
You should remove position:relative; to ol list and give it position:absolute; and align it using left and top CSS attributes. But this all will work properly if the parent tag of ol has position:relative; applied. You can also get it to work using position:relative; but that wont be the proper way as it would shift the elements on different screen resolutions.