I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :
Image1 Image2 Image3
Image4 Image5 Image6
Image7 Image8 Image9
<html>
<head>
<title>Display Images</title>
</head>
<body>
{% for image in images %}
<div>
<img src={{ self.item_.images }}>
</div>
{% endfor %}
</body>
<html>
All the images there after aligns in the same order. First row with three images, then automatically break, then next row.
Please help.
Best Regards
Simply float every image left...then clear after every third image in order to force the next three to a new line.
You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.
Demo Fiddle
CSS
img{
float:left;
}
img:nth-child(3n+1){
clear:left;
}
Is this what you want?
DEMO
HTML
<div class='container'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>
CSS
.container{
display:block;
width:400px;
}
.container img{
float:left;
padding:1px;
}
Image1 (fll) Image2 (fll) Image3 (fll)
(clear)Image4 (fll) Image5 (fll) Image6 (fll)
(clear)Image7 (fll) Image8 (fll) Image9 (fll)
Where :
fll - float: left
clear - clear: both
Do you want your images to have a fixed size?
If not:
<html>
<head>
<style>
img {
width: 33%;
height: 100px;
float: left;
}
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>
If yes: (You might need to consider a fixed container width.)
<html>
<head>
<style>
.main-container {
width: 900px;
margin: 0 auto;
}
img {
width: 300px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="main-container">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</div>
</body>
</html>
Floating allows the images to fill a row. Fixed with of images and the container makes it possible to determine how many images there will be in the row.
If you want to follow responsive design, you could add break point to your page so that in smaller screen sizes your grid of images depends on available space.
Normally you will want to have fixed size for your images that is their actual size. Otherwise the displayed quality of the images might be bad.
You can find the idea here
Then I customize it for you.
<!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:500px;
}
div.img
{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
Related
I'm having trouble with image sizing in my gallery, I have been reading multiple threads and yt videos but can't seem to figure it out myself
image of the problem:
* {
box-sizing: border-box;
}
.gallery {
border: 1px solid #ccc;
}
.gallery img {
width: 100%;
height: auto;
}
.des {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
<h1>Veckans deals!</h1>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
There is no way where you can make them all stretch while using float, without setting a fixed height to all images. You have three options.
Set a fixed height on the image and use object-fit: cover to make it look like it's stretching, while in fact it's covering it
Use flexbox with flex-grow: 1 on the image (see this example, recommended!)
Adjust all images to have the same width and height, if they can be made uniform.
I am sure that the images have different resolution.
First 2 images have the same resolution, 3:2 for example.
Last 2 images have the same resolution, 2:1 for example, but differs than first 2 images.
Please try to fix the resolutions of images all the same.
Your images are not the same height/width, just like the ones I found you when I made you a snippet. So decide on which direction is important and use vh/vw and auto
More here
* {
box-sizing: border-box;
}
.gallery {
border: 1px solid #ccc;
}
.gallery img {
width: auto;
height: 15vh;
}
.des {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
<h1>Veckans deals!</h1>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/DJI-Phantom-4-Photogrammetry-Drone-300x184.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Holy-Stone-HS100-UAV-photography-drone-300x176.png" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/Parrot-Bebop-2-drone-300x143.jpeg" alt="Drönare" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://topracingdrone.com/wp-content/uploads/2018/12/GoPro-Hero-4-Silver-300x300.jpg" alt="Landskap" width="300" height="200">
<div class="des">Add a desciption of the picture</div>
</div>
</div>
I want a div to contain several images in a single scrollable row. The following code works if i replace the images with a long string, but doesn't work with images.
<html>
<div style="overflow: auto">
<img src="a.jpg">
<img src="b.jpg">
<img src="c.jpg">
<img src="d.jpg">
</div>
</html>
It will work. Maybe white-space property is what you're looking for though? See below:
div {
width: auto;
overflow-x: auto;
white-space: nowrap;
}
<div>
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
<img src="https://placehold.it/400x200">
</div>
Please set height and width of the div so it will work see the below example
<style>
.auto-div {
background-color: #00FFFF;
width: 400px;
height: 300px;
overflow: auto;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="auto-div">
<img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" />
</div>
</body>
</html>
Here you are not giving any height and width to the div tag so the style overflow: auto is not working for you.
<div style="width:150px;height:150px;overflow:auto;border:1px solid black">
<image src="images.jpg"></image>
<image src="images.jpg"></image>
<image src="images.jpg"></image>
<image src="images.jpg"></image>
</div>
I'm trying to make a simple homepage with clickable images as buttons, no problem, I can do that.
But I'm stuck at this part:
I have these 4 images in dividers with on hover shadow.
Now these images are vertical under each other.
I want them horizontal next to each other.
EDIT: Got it, now I need it to center it horizontal and vertical.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 300px;
height: 600px;
display: inline-block
}
.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
</style>
</head>
<body background="back.jpg">
<center>
<div align="left">
<div class="imgBox">
<a target="_blank" href="IntensityBanner.png">
<img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="EarningsBanner.png">
<img src="EarningsBanner.png" alt="Forest" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_lights.jpg">
<img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_mountains.jpg">
<img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
</a>
</div>
</center>
</div>
</body>
</html>
Live demo: http://twanofzo.nl/test/
First, make sure you close that first imgBox div (line 12) or it'll give you trouble.
Next, to make them display horizontally, you should just be able to either add display: inline-block or float: left to your css for .imgBox
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!