I am trying to show border color on hover over the list of items. When i move mouse over first row items, the second row items move towards right. Please check jsFiddle
<ul class="tiles">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
css
ul.tiles { width: 400px; }
ul.tiles li {
float: left;
list-style-type: none;
width: 100px;
height: 100px;
margin: 10px;
background: white;
}
ul.tiles li:hover {
border: 1px solid black;
}
}
Add a transparent border to your li:
li {
border: 1px solid transparent;
}
ul.tiles { width: 400px; }
ul.tiles li {
float: left;
list-style-type: none;
width: 100px;
height: 100px;
margin: 10px;
background: white;
}
ul.tiles li:hover {
border: 1px solid black;
}
ul.tiles li {
border: 1px solid transparent;
}
<ul class="tiles">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
you can user box-sizing: border-box; on the ul.tiles li
http://jsfiddle.net/gm8zvfsk/
The box-sizing property is used to tell the browser what the sizing
properties (width and height) should include.
Should they include the border-box or just the content-box which is
the default value of the width and height properties.
For example, if you want two bordered boxes side by side, it can be
achieved through setting box-sizing to "border-box". This forces the
browser to render the box with the specified width and height, and
place the border and padding inside the box.
JS Fiddle.
As Praveen said, using outline fixes the issue.
ul.tiles li:hover {
outline: 1px solid black;
}
Related
I've searched for this and can't seem to find a decent solution.
I'm trying to make a left border on a given <li> element so it marks the active option. The effect I'm going for is similar to Gmail where they mark the open folder with a red border, e.g:
I inspected how it's done on Gmail but looks like a series of <div>'s. I'm just trying to do it with list items.
I have this: https://jsfiddle.net/5txj3dpe/2/
So my markup is straightforward - a set of list items, with a .active applied to the active element ("Item 2" in this case):
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
}
li.active {
border-left: 4px solid red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
I want to make it so that the red border is flush with the .list-container and there is some space between the red border and the text. Basically I want to make it look similiar to the Gmail screenshot.
Please can anyone advise how to do this. Is it possible with an unordered list, or do I need additional <div>'s, etc?
You need to remove the padding on the ul, not the div like you're doing. Then you can add padding to the li elements. Remember to subtract the size of the border from the padding of the active li:
.list-container {
border: 1px solid #ccc;
}
.list-container ul {
padding: 0;
list-style-type: none;
}
.list-container li {
padding-left: 20px;
}
.list-container li.active {
border-left: 4px solid red;
padding-left: 16px; /* 20px - 4px = 16px */
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
We'll need to remove the browser's inherited padding from the ul, to make the elements flush with the container. Then we'll give all the li elements a transparent border, and change the border-left-color of the .active element to the desired color.
.list-container {
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
.list-container ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
padding: 5px 20px;
border-left: 4px solid transparent;
}
li.active {
border-left-color: red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You could also use box-shadow inset to achieve this.
https://jsfiddle.net/kL5n2d1e/
You should remove the padding from the ul and apply it to the li's this way you can use the border shadow to create the effect you need without moving anything in the flow of the document.
Alternatively you can just add padding to the li and this will also work.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
ul {
padding:0;
}
li {
list-style: none;
padding: 1em;
}
li.active {
box-shadow: inset 3px 0px 0px red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You just need to play with padding and margin parameters to get this effect.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0px;
}
li {
list-style: none;
padding-left:10px;
}
li.active {
border-left: 4px solid red;
margin-left: -4px;
}
The border should be always present. Just make it transparent if li is not active.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
padding: 3px 8px;
border-left: 4px solid transparent;
cursor: pointer;
}
li.active {
border-color: red;
}
li:not(.active):hover{
border-color: #ccc;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
I want my list items to be displayed next to each other but for some reason they always overlap. Can someone tell me how to fix this?
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Thank you in advance!
You need to remove position: fixed in 'li' element, because if you giving every 'li' element position fixed that will make your item always overlap.
May be you can try update your 'ul' and 'li' element style like this code bellow:
ul {
list-style: none;
position: fixed;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
That's because you have define position: fixed for li tags.
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
//position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Take out the position: fixed. This fixes an element within the browser viewport and removes it from the flow. Not what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
fixed
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left.
give position fixed to ul and you will get list item properly
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
position: fixed;
padding:5px;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
I have a list of items which should display in a row. I dynamically add some items with different text lengths to the list. Is it possible to align the items on the left side and set the width of each item to the width of the largest one?
I added an image to clarify it :
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item with long text added dynamically</li>
</ul>
To get the width of your element using javascript :
document.getElementById('yourID').clientWidth
Then you can use this value to adjust your other items
I don't think this is possible with just the flex-box model and no javascript. A solution (depending on your real use case) would be to use display: table :
ul {
display: table;
list-style-type: none;
table-layout: fixed;
padding: 10px;
position: relative;
}
ul::before {
position: absolute;
z-index:-1;
content: " ";
left:0px;
top:0px;
bottom:0;
width: 500px;
background: #999;
}
li {
display: table-cell;
color: white;
text-align: center;
background: black;
padding: 5px;
height: 30px;
line-height: 30px;
width: 33%;
white-space: nowrap;
}
li+li {
border-left: 10px solid #999;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item with long text</li>
</ul>
Note that it's still tricky but I don't see any better css based solution.
I am trying to build CSS nav bar but i am in a bit trouble. In my code, background box is collapsing with content inside it .My question is why it is collapsing and can it be solved by not giving height to the box.Here is my code.
HTML
<div class="item">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
body {
color: #648;
}
.item ul {
list-style: none;
padding: 0;
margin: 0;
}
* {
}
.item {
padding: 20px;
width: 70%;
/* height: 65px; */
background-color: blanchedalmond;
margin: 50px auto;
border-radius: 10px;
}
.item li {
float: left;
width: 45px;
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: aqua;
}
Use display:inline or display:inline-block instead of float:left.
http://jsfiddle.net/x2ubrrh3/
Update
When display:flex is used you have to stop the elements from floating afer your list is finished (clear:both)
See here: http://jsfiddle.net/x2ubrrh3/1/
How can I set the bottom-border length of an element to be the full width of the page regardless of the size of its container?
At the moment, the bottom border is 200px off of the full width of the page (100px left & 100px right).
#portfolio {
margin-left: 100px;
margin-right: 100px;
float: left;
}
#portfolio #item {
margin-top: 50px;
padding-bottom: 100px;
border-bottom-color: #cdcdcd;
border-bottom-width: 1px;
border-bottom-style: solid;
}
HTML:
<ul id="portfolio">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS:
#portfolio > li {
padding: 30px 100px;
border-bottom: 1px solid red;
}
Live demo: http://jsfiddle.net/eFNXy/2/
When you have multiple items, then that represents a list and you use the UL element.
Change #portfolio's margins to padding.