I have a layout and i'm trying to add in a row of images that will sit underneath the 'just arrived' section and no matter what i try the images keep flowing underneath each other.
Can anyone see what im doing wrong? Thanks!
That's because <li> elements are display: block by default. Give them float: left and you're all set.
.wrap {
float: left;
}
I have written a small code for you. check this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: auto;
}
div.imagecontainer
{
width: 100%;
height: auto;
}
div.imagecontainer ul {
width: 100%;
height: 100%;
padding:0;
}
div.imagecontainer ul li{
list-style-type: none;
width: 20%;
height: 200px;
float: left;
}
div.imagecontainer ul li img
{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="imagecontainer">
<ul>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
<li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
</ul>
</div>
<script type="text/javascript">
$(window).resize(function(){
//alert("resizing");
var windowWidth = $(window).width();
if(windowWidth < 600)
{
$("div.imagecontainer ul li").css({"width":"100%","height":"400px"});
}
else
{
$("div.imagecontainer ul li").css({"width":"20%","height":"200px"});
}
});
</script>
</body>
</html>
but I used small jquery. you can change the conditions and I used all css ans js internally.
other thing is width and heidht and other things are depend on your need change those(number of images you decide to put in a line), as your need.
I think this may not 100% fit to your need.I recommend to use bootstrap.
copy past and try this.hope this will help to you.
They are flowing underneath each other because each image is wrapped with a block element, in this case a <div>. Remove the div or set it's display value to inline-block.
The smaller images have each a display value of list-item which positions the items like a vertical list as well.
inline-block
.wrapper {
text-align: left;
}
.wrapper a {
display: inline-block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>
display block and floats
/* Clearfix */
.wrapper::after {
content: ''
clear: both;
display: table;
}
.wrapper a {
display: block;
float: left;
}
img {
/* Fixes whitespace below each image */
display: block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>
Flexbox
Use this if you don't need to support old versions of Internet Explorer (<11).
/* Clearfix */
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper a {
width: 50%;
}
img {
/* Stretch the image for demo purposes */
width: 100%;
/* Fixes whitespace below each image */
display: block;
}
<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>
Related
I'm really stuck with responsive images short story I'm trying to make a simple grid like this
https://avenue-demo.squarespace.com
in this avenue website all the images have the same height and width when you resize the browser the images are resizing fine now here is my code
<ul class="grid">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
</a>
</li>
</ul>
css :
.grid {
display: flex;
max-width: 1100px;
justify-content: space-between;
margin: 0 auto;
list-style: none;
}
.grid li {
width: 30%;
}
img {
max-width: 100%;
}
the problem is the images are not the same height when I set the height of the img to height 100% yes the images do have the same height but on resize they are shrinking not resizing like this website I posted, how can I fix it ?
As per my understanding you need to have square images to get the shown responsiveness, even though i have made some css changes to your code, to look like the images from website (which is not suggested always)
here is the code pen link
https://codepen.io/avreddy/pen/vvabbP
.grid {
display: flex;
max-width: 1100px;
justify-content: space-between;
margin: 0 auto;
list-style: none;
}
.grid li {
width: 30%;
}
.grid li a{
position: relative;
width: 100%;
padding: 50% 0;
display : block;
}
.grid li a img{
position: absolute;
width : 100%;
top: 0;
left: 0;
height: 100%;
object-fit : cover;
}
img {
max-width: 100%;
}
<ul class="grid">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
</a>
</li>
</ul>
I would like to cover the image on of my page the full width of the screen. (so not the whole screen but only the width) and if possible I would also like if the image shrinks if the screen gets smaller. I never did this before so i don't really know how I can make this? Can anybody help me?
this is how my page currently looks like
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html, body{
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#Anouk img{
display: block;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
You need to set your img to width="100%" or set a css class on the image for whatever %.
And you need to add:
margin: 0px;
padding: 0px;
To The body because some Browsers (like chrome) are having a standard margin and padding.
PS: I wanted to comment but I cant because my Reputation is to low :(
I want the text below my images to fit exactly below them. Longer texts continue in the same line which is not I want. I want it to go to the next line and stay below the corresponding image.
I also tried using break-word and aligning center but it doesn't work.
.row div {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
<div class="row">
<div>
<a href="#">
<img src="martial.png">
</br>Manchester United 2015-16 Martial kit
</a>
</div>
<div>
<a href="#">
<img src="ars.png">
</a>
</div>
<div>
<a href="#">
<img src="bvb.png">
</a>
</div>
<div>
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
You gonna have to add additional div container for every image and link.
See the example below:
.row div{
display: inline-block;
padding-left: 5%;
padding-right: 5%;
}
.row div img{
max-width: 100%;
max-height: 100%;
}
.row div a{
word-wrap:break-word;
text-align:center;
}
.img-container{
display: inline-block; /* added */
float: left; /* added */
text-align: center; /* added */
}
<div class="row">
<div class="img-container">
<img src="http://i3.mirror.co.uk/incoming/article6363634.ece/ALTERNATES/s615b/Anthony-Martial-signs-for-Manchester-United.jpg"></br>Manchester United 2015-16 Martial kit text aded text aded text aded text aded text aded
</div>
<div class="img-container">
<img src="ars.png">
</div>
<div class="img-container">
<img src="bvb.png">
</div>
<div class="img-container">
<img src="lewandowski1.png">
</div>
</div>
If you want to set a predefined width and height you can do it adding rules to .img-container class. Other way it will take the image dimensions. And for centered links just add this rule to .img-container class:
text-align: center;
just give your inner divs a width
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.row div {
border: 1px solid black;
width: 40%;
display: inline-block;
padding-left: 5%;
padding-right: 5%;
//overflow: auto;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-align: center;
}
</style>
</head>
<body>
<div class="row">
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
<div>
<a href="#">
<img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
</div>
</div>
</body>
</html>
Use the min-content property on the element containing the img and caption. In this demo, I used the figure and figcaption (and main) elements instead of divs to create semantic layout. It'll work the same way if you prefer `div's instead.
.row figure {
display: inline-block;
padding-left: 5%;
padding-right: 5%;
/* min-content needs to be prefixed */
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
.row figure img {
display: inline-block;
/* Changed max-* to min-* to demonstrate images in different sizes */
min-width: 100%;
min-height: 100%;
}
.row figure a {
word-wrap: break-word;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Captions</title>
</head>
<body>
<main class="row">
<figure>
<a href="#">
<img src="http://placehold.it/300x150/9a7/a10.png&text=Manchester+United+2015-16+Martial+Kit">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/100x50/fd3/b0d.png&text=ARS">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/200x100/fa8/375.png&text=BVB">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/400x200/048/Fee.png&text=lewandowski1">
<figcaption>Manchester United 2015-16 Martial Kit</figcaption>
</a>
</figure>
</main>
</body>
</html>
I'm trying to make a layout like this. All the banners have static dimensions and a bottom margin. And the article needs padding. The problem is the value of the width property of article. After locating the banners, I want to give the rest of the entire page width to article element. Here is my code:
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 157px;
margin: 0 0 5px 0;
}
#SiteEye {
width: ???????????????????????;
height: 700px;
padding: 10px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" />
</a>
</div>
</div>
You may use calc method:
width: calc(100% - 250px);
See can i use calc? before using it for it's browser compatibility.
RE: Comment on Bhojendra's answer
There is another way, it involves using box-sizing:border-box;, one of the most useful additions to CSS, like, ever!
I've also updated your images to use a top padding on all except the first one because you were causing some white-space at the bottom of the page with the previous method.
* {
box-sizing:border-box; /* Make all height/width inclusive of padding and border */
}
body {
margin:0;
padding:0;
}
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 175px;
padding: 5px 0 0 0;
}
#SidePane a:first-child .SideBanner {
padding:0;
}
#SiteEye {
width: calc(100% - 250px);
height: 700px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
padding:10px;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
</div>
</div>
I am making an mobile web app, and I ran into this problem.
Currently my code is structured as follows:
<ul class="app-lst">
<li class="item-1">
<a href="#">
<img src="img1.jpg" alt="img">
</a>
</li>
<li class="item-2">
<a href="#">
<img src="img2.jpg" alt="img">
</a>
</li>
... etc.
</ul>
CSS:
.item-1 {
width: 90%;
height: 10%;
}
.app-lst li a {
background-color: red;
}
.app-lst li a img {
}
Below image is the result I am trying to get. As you can see from the code above, Each boxes are <li>, and under it, there is <a> and under the link there is the content.
How would I go about with this for CSS?
-Should i adjust the box's size by putting width and height on <li> or <a>?
-Should i set the box's color by putting background-color on <a>?
-And finally, the image does not adjust to fit inside the parent <a>, so it extends the whole box if the image is larger. I tried putting "max-width: 100%" on the image, but no luck.
Also, since it is a mobile design I am controlling all the sizes with percentages. is this a good practice or should I do it with pixels?
Thank you so much in advance for your help!
You will need to use your <ul> as a container that is set to 100% height/width, and then size your <li> elements based on that. Then finally, make your <img> elements 100% height and width.
HTML
<ul class="app-lst">
<li class="item-1">
<a href="#">
<img src="http://placehold.it/150x150" alt="img"/>
</a>
</li>
<li class="item-2">
<a href="#">
<img src="http://placehold.it/150x150" alt="img"/>
</a>
</li>
<li class="item-3">
<a href="#">
<img src="http://placehold.it/150x150" alt="img"/>
</a>
</li>
<li class="item-4">
<a href="#">
<img src="http://placehold.it/150x150" alt="img"/>
</a>
</li>
<li class="item-5">
<a href="#">
<img src="http://placehold.it/150x150" alt="img"/>
</a>
</li>
</ul>
CSS
.app-lst {
display: block;
height: 500px;
list-style-type: none;
margin: 0;
padding: 0;
}
.app-lst li {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.item-1, .item-2 {
height: 75%;
}
.item-1 {
width: 75%;
}
.item-2 {
width: 25%;
}
.item-3, .item-4, .item-5 {
height: 25%;
}
.item-3 {
width: 10%;
}
.item-4 {
width: 20%;
}
.item-5 {
width: 70%;
}
.app-lst li img {
height: 100%;
width: 100%;
}
JSFiddle: http://jsfiddle.net/b6x1byfp/