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.
Related
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/
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;
}
I'm working on a step indicator which I implemented as a list:
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li>Step 3</li>
</ol>
Each list element has a rounded edge to it's right in order to indicate progress, so I have the following CSS:
li{
display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px;
float: left;
margin: 0 0 0 -20px;
border-radius: 0 15px 15px 0;
}
My problem is that later elements are shadowing the earlier, thus the rounded edge are hidden. I've tried to set a decreasing z-index for each element, but it doesn't work (besides I couldn't use this solution anyway). I acheive the desired presentation by changing to float:right but that renders the list items in descending order...
Check this jsfiddle for details: http://jsfiddle.net/fMRbr/
You can use the :before
li{
display: inline-block;
width: 33%;
margin: 0 0 0 -20px;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
background-color: white;
text-indent: 40px;
position: relative;
}
li.active{
background-color: red;
}
li:before{
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #fff;
border: 1px solid #ddd;
border-width: 0 1px 1px 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
li.afteractive:before {
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #f00;
border: 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
<ol>
<li class="active">Step 1</li>
<li class="afteractive">Step 2</li>
<li>Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li class="afteractive">Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li class="active">Step 3</li>
</ol>
Instead of using border-radius and negative margin values, have you considered a Tbackground image at the top right of each <li> which looks like this:
The active (red) <li> would have a similar background but colored red. The result should look something like this:
Add a span tag to your li's with display: inline-block so they automatically grow to the right width:
html
<ol>
<li><span>Step 1</span></li>
<li class="active"><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ol>
css
li {
display: block;
float: left;
width: 33%;
margin: 0 0 0 -20px;
background-color: white;
text-indent: 40px;
}
li.active {
}
li.active span {
background-color: red;
}
li span {
display: inline-block;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
padding-right: 10px;
}
See a jsfiddle of this solution here:
http://jsfiddle.net/c4urself/HYQSJ/