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;
}
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'm creating a simple Navigation menu and am unable to get my button to display inline next to sibling li elements.
I need all three elements inline and floating right.
HTML
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<button>A Button</button>
</nav>
And here's the CSS
nav {
float: right;
}
li {
display: inline-block;
}
button {
display: inline-block;
}
Here's the fiddle --- https://jsfiddle.net/et8omw2c/
Okay 2 ways.
One I would recommend changing your markup and include the button within an li element like:
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li><button>A Button</button></li>
</ul>
</nav>
or change the css like so which I don't recommend:
nav {
float: left;
padding:0;
margin:0;
width:100%;
}
li {
display: inline-block;
float:left;
}
button {
display: inline-block;
float:left;
}
Apply inline-block to the ul element as well.
It is happening because your ul element is display:block. Add float:right to it or use display:inline-block and your problem will be solved.
Use this CSS
ul{
float:right
}
or
ul{
display:inline-block;
}
I ran into some problem when trying to position an absolute positioned div. its working as its should i guess, however i want it to stay with parent of parent instead of parent becouse i have a dropdown list and it will follow the parent down on the side when i want it to stay in top like first li with div is displayed. ive created a jsfiddle to show the problem. http://jsfiddle.net/trptR/
can this be done using css only or is Javascript a must?
HTML
<div id="navmenu">
<ul>
<li>example
<ul>
<li>sub example1</li>
<li>sub example2</li>
<li>sub example3</li>
<li>sub example4</li>
</ul>
</li>
<li>Test
<ul>
<li>Sub Test 1
<div>
<ul>
<li>Projekt</li>
</ul>
</div>
</li>
<li>Sub Test 2
<div>
<ul>
<li>Projekt</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
CSS
#navmenu{
display:inline-block;
background:red;
}
#navmenu ul{
list-style:none;
margin:0;
padding:0;
}
#navmenu ul li{
float:left;
position:relative;
display:block;
padding:0.5em;
}
#navmenu ul li ul{
position:absolute;
display:none;
border:solid 1px #333;
background:#fff;
}
#navmenu ul li:hover ul{
display:inline-block;
}
#navmenu ul li ul li{
float:none;
display:block;
position:relative;
}
#navmenu ul li ul li:hover{
background-color:#EBEBEB;
}
#navmenu ul li ul li div{
display:none;
width:10em;
height:14.6em;
background:blue;
position:absolute;
top:0;
left:6em;
border:solid 1px #000;
}
#navmenu ul li ul li:hover div{
display:block;
}
Could you remove position:relative from both your #navmenu ul li style set and from you #navmenu ul li ul li style set?
http://jsbin.com/ziqov/1/edit
Positioning is key
I'm not sure I understand the explanation of your problem, but I do think I understand when you say you have
parentElementTop > parentElementBelow > element
that you want element to be aligned to parentElementTop rather than the parentElementBelow.
To align element absolutely to parentElementTop all you need to do in CSS is to not set position to relative or absolute on the intermediate parentElementBelow and any subsequent absolutely positioned element will be aligned according to last non-statically positioned ancestor. In your case that would be the parentElementTop which is what you want.
think about using
#navmenu > ul > li{
float:left;
position:relative;
display:block;
padding:0.5em;
cursor:pointer;
}
because otherwise your selectors overwrite each other.
In my following code everything is write but it make distance from left right and top of the browser screen.
CSS code is:
ul {
list-style:none;
background:#2E94C7;
padding:10px;
color:white;
}
body ul li {
position:relative;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
padding:10px;
}
ul li ul {
display:none;
position:absolute;
width:100%;
background:black;
margin:10px 0 0 -10px;
}
ul li ul li {
display:block;
}
ul li:hover ul {
display:block;
}
HTML code is:
<ul>
<li>Menu 1
<ul>
<li>Menu 1-1</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2-1</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
Is there any way to cover the top ,left,right of the browser screen.
Just paste it on your top of the CSS file.
body {
margin: 0;
padding: 0;
width:100%;
}
Try this
body {
margin: 0;
padding: 0;
}
The natural margin on the body tag is causing the spaces. You can also checkout http://meyerweb.com/eric/tools/css/reset/ for more reset css related stuff.
Try a css reset block
so it resets everything that are defaults to the browser
http://html5doctor.com/html-5-reset-stylesheet/
Im not sure if i understand your problem or not but you can try add
* {
margin: 0px;
}
to the top of your css.
The body element has margin by default. What you need to do is just override it:
body {
margin:0;
}
jsFiddle demo.
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; }