I want to make a block filled with a large number of photos in row. Width of web page is always too small, so I want to add a horizontal scrolling.
I made it here: http://jsfiddle.net/49REZ/
HTML
<div class="wrapper">
<div class="photos">
<ul>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
</ul>
</div>
</div>
CSS
.wrapper {
width: 80%;
margin: 10px auto;
}
.wrapper {
overflow-x: scroll;
overflow-y: hidden;
}
ul, li {
margin: 0;
padding: 0;
}
.wrapper ul {
width: 10000px;
}
ul li {
list-style: none;
float: left;
}
It works fine in Chrome.
But it does not work well in Firefox, because it fairy displays 10000px block with a lot of free space after photos.
Try to replace the css with the following:
.wrapper ul {
white-space: nowrap;
}
ul li {
list-style: none;
display: inline-block;
}
http://jsfiddle.net/49REZ/4/
you can try this:
HTML:
<ul class="images">
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
<li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></li>
</ul>
CSS:
ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
background-color: #ddd;
}
ul.images li {
display: inline;
width: 150px;
height: 150px;
}
jsfiddle
try to put your 10 000px on another mother component,such as the div, or directly the body
Related
I would like 3 images on the first line and 3 images on the second line and want them in the middle of the page
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
<ul>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
there are many ways to do it, for example:
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
https://jsfiddle.net/d6wn79pv/4/
or
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
ul li {
flex-grow: 1;
width: 33%;
}
https://jsfiddle.net/d6wn79pv/9/
with use of flexbox:
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
li{
width:30%;
margin:3px auto;
}
<ul>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
</ul>
check this out.
<!DOCTYPE html>
<html>
<style>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li {
width: 31%;
display:block;
float:left;
margin:3px;
}
</style>
<body>
<ul>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>
</body>
</html>
You can do it simply by using flex
<ul class="here">
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
.here{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.here li {
width: 32%;
}
.here li img{
width: 100%;
}
Change the .here width to auto resize the content
I want to have 3 images on the first line and 2 on the second. I have this code but it has 2 on top and 3 on the bottom.
<ul>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
I want the two bottom images to be centred with the three images at the top.
Expected Result - 3 Images on first row and 2 on second row
Actual Result - 2 Images on first row and 3 on second row
Use Flex:
#container{
width: 550px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#container > img{
margin: 10px;
}
<div id="container">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>
You could also do something like this which is an amazing CSS tool. Use CSS grid.
//HTML
<ul class="grid">
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
//CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Like this:
Just adjust the widths and use the appropriate nth-child
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
text-align: center;
width: 33.3%;
border: 1px solid red;
}
li:nth-child(4),
li:nth-child(5) {
width: 50%;
}
<ul>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
</ul>
Trying to reproduce the following in HTML & CSS:
Here's how I tried to structire it:
.layout ul > li {
list-style: none;
}
.layout ul > li:nth-child(1n) > img {
float: left;
}
.layout ul > li:nth-child(2n) > img {
float: right;
z-index: 9999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
The problem is that when applying clearfix it doesn't help at all. The images seem to come on one row. Maybe is there something specific when it comes to li elements and clearfix? How this can be solved?
You can simply consider text-align property and some negative margin for the overlap (this will avoid you all the float issues)
.layout {
width: 200px;
}
.layout ul {
margin: 0;
padding: 0;
}
.layout ul>li {
list-style: none;
margin-bottom: -20px;
position: relative; /* don't forget this to be able to use z-index */
}
.layout ul>li {
text-align: left;
}
.layout ul>li:nth-child(2n) {
text-align: right;
z-index: 999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
Try to make use of transform css property
.layout ul {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
background: #ccc;
padding: 20px;
padding-left: 40px;
}
.layout ul>li {
width: 50%;
box-sizing: border-box;
border: 5px solid #fff;
margin-bottom: 10px;
}
.layout ul>li>img {
width: 100%;
max-width: 100%;
display: block;
}
.layout ul>li:nth-child(even) {
transform: translateY(50%) translateX(-20px);
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
I am trying to center the contact icons but its not working. I tried to set the margin to auto and used text-align:center but it doesnt work either. Please help
#contact {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footer .row li {
float: left;
list-style-type: none;
text-align:center;
}
.footer .row img{
display: inline-block;
height: auto;
vertical-align: middle;
}
<div class="container">
<div class="footer">
<div class="row">
<div id="contact" class="col-xs-12 center">
<ul>
<li><img src="./images/logos/fb.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/twitter.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/insta.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
</ul>
</div>
</div>
</div>
</div>
g
Don't use bootstrap for now, i suggest to learn the basics first.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
display: table;
width: 100%;
padding: 10px
}
ul li{
list-style: none;
float: left;
background: #ddd;
margin-right: 10px;
padding: 10px
}
ul li img {
width: 25px;
height: 25px;
background: red;
}
ul li span, ul li p{
line-height: 25px;
height: 25px;
background: blue;
color: #fff
}
/* here the style */
.vertical-align li {
text-align: center;
}
.horizontal-align li img,
.horizontal-align li span {
float: left;
}
<h1>Vertical</h1>
<ul class='vertical-align'>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
</ul>
<h1>Horizontal</h1>
<ul class='horizontal-align'>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
</ul>
I have this HTML:
<article class="images">
<ul class="cf">
<li>
<a href="#">
<img src="http://www.placehold.it/800x600" alt="" />
</a>
</li>
</ul>
</article>
And this CSS:
* {
margin: 0;
padding: 0;
}
.images ul {
margin-left: -3%;
width: 100%;
background: red;
}
.images li {
list-style-type: none;
}
.images li img {
width: 17%;
margin-left: 3%;
margin-bottom: 3%;
float: left;
}
Still, in Safari the ul seems to have some kind of padding on the right.
In Firefox the ul is displayed correctly.
See it for yourself: http://jsfiddle.net/EdCXx/
Is there any way to fix that?
Edit: With Safari 6.0.2 on OS X 10.8.2 it looks like this:
I'm assuming the issue is that you're using negative margin and this is causing a problem (I don't have access to a Mac at the moment, so I can't verify).
Try changing your CSS to what's below. I also changed your clearfix to one I picked up a while ago that has had excellent cross-browser results.
http://jsfiddle.net/EdCXx/4/
CSS:
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Clearfix */
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Images */
.images ul {
width: 100%;
background: red;
}
.images li {
list-style: none;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
float: left;
width: 17%;
height: 17%;
}
.images li img {
float: left;
max-width: 100%;
max-height: 100%;
}
And tighten up your HTML (not necessary, but it's prettier):
<article class="images">
<ul class="clear">
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li><img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
</ul>
</article>