I have just started getting into CSS/HTML again (about an hour ago) and have ran into an issue. I am trying to make these display as an inline style, although, the border seems to extend far past the image which in turn is not allowing them to display as I would like.
Thanks for the help!
Here is my JSfiddle: https://jsfiddle.net/pghfekj6/
HTML
<div class="gallery">
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
</figure>
</div>
CSS
body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}
h1 {
margin: 20px;
}
.gallery {
display: inline;
}
.gallery-item {
margin: 20px;
border: 5px solid red;
}
You haven't applied the border to the images but to their container (figure) which is a block-level element by default. That is, it spans the width of the page.
.gallery-item img {
border: 5px solid red;
}
I hope my answers is enough for you :)
if you want to make border in your image you can you img element on css just i change that selector to but img element
Old selector
.gallery-item
New selector
.gallery-item img
body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}
h1 {
margin: 20px;
}
.gallery {
display: inline;
}
.gallery-item img {
margin: 20px;
border: 5px solid red;
}
<header>
<title>web gallery.</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
</header>
<body>
<div class="container">
<header>
<h1>
web gallery.
</h1>
</header>
<div class="gallery">
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/809db161738e0255821af747f0be1873/tumblr_o7pkyjVO0s1tsrhx6o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/8b528e2542564533b0c21d4a23568928/tumblr_o6mh4gKIFA1up0523o2_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/ce934191c63533db7fb398a5766c1778/tumblr_o6mh4gKIFA1up0523o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/39cbc0c8de8e947eac27d97b628fa065/tumblr_o7bwagld1r1ss9jvwo1_540.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/986dc5a68d05dc66588de5b4016aa7d6/tumblr_o6mh4gKIFA1up0523o3_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/ca8860045cbe96aec9598a69be76b459/tumblr_o6mh4gKIFA1up0523o5_1280.png">
</figure>
</div>
</div>
</body>
Related
I have a very simple HTML / CSS image grid. All photos are different and are inside a <figure> tag. When the images are in jpg file format, when refreshing the page sometimes some of them are repeated or appear distorted, with another ghost image on top or dissappear. This only happens with jpg, not png. Why is this? Is there a solution?
ul { padding: 0; margin: 0; }
figure { margin: 0; }
.grid-item {
float: left;
width: 33%;
}
.tm-img {
max-width: 320px;
width: 100%;
height: auto;
border: none;
margin: 0 auto;
}
.grid-item figure {
position: relative;
overflow: hidden;
text-align: center;
}
.grid-item figure img {
display: block;
max-width: 100%;
}
<ul>
<li>
<div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/01.jpg" alt="Image 01" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/02.jpg" alt="Image 02" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/03.jpg" alt="Image 03" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/04.jpg" alt="Image 04" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/05.jpg" alt="Image 05" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/06.jpg" alt="Image 06" class="tm-img">
</figure>
</div>
</div>
</li>
</ul>
Image repeated
Image disappeared
This is the sample netlify html page
Animation
Refreshing the page multiple times shows the issue.
So like the title said, I added figcaption and figure tag to give my images captions. The captions showed but each image is showing on a new line. Before I added the figure and figcation tag, I flexed them and put them in the row direction and they were on the same line. Could anyone give insight. I'm using repl.it IDE for this by the way. I tried to add an image but was telling me error
.img{
display: flex;
flex-direction: row;
float: left;
background-color: #626B63;
}
//code for my image.
//code for the image captions
<figure>
<img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width= "200" height="200" style="padding: 3ch;">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src= "https://www.debatingeurope.eu/wp-content/uploads/2013/01/degrees.png" width= "200" height="200" style="padding: 3ch; ">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src="https://cdn3.vectorstock.com/i/1000x1000/62/77/ticket-travel-airline-dollar-money-vector-12556277.jpg" width= "200" height="200" style="padding: 3ch; " >
<figcaption>Bookings</figcaption>
</figure>
.img {
display: flex;
flex-direction: row;
float: left;
background-color: #626B63;
}
<!-- code for my image. -->
<!-- code for the image captions -->
<figure>
<img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width="200" height="200" style="padding: 3ch;">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src="https://www.debatingeurope.eu/wp-content/uploads/2013/01/degrees.png" width="200" height="200" style="padding: 3ch; ">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src="https://cdn3.vectorstock.com/i/1000x1000/62/77/ticket-travel-airline-dollar-money-vector-12556277.jpg" width="200" height="200" style="padding: 3ch; ">
<figcaption>Bookings</figcaption>
</figure>
Here I added a parent container with flex to align side by side See more about flex. Bcoz, figure tag is a block element, so that takes full width.
And make margin: 0 for figure tags which have some default margins.
.container {
display: flex;
flex-wrap: wrap
}
.container figure {
margin: 0;
text-align: center
}
.img{
display: flex;
flex-direction: row;
float: left;
background-color: #626B63;
}
<div class="container">
<figure>
<img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width= "200" height="200" style="padding: 3ch;">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src= "https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width= "200" height="200" style="padding: 3ch; ">
<figcaption>Bookings</figcaption>
</figure>
<figure>
<img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width= "200" height="200" style="padding: 3ch; " >
<figcaption>Bookings</figcaption>
</figure>
</div>
I am looking to put a figcaption onto an image and not have it move the image from its original spot without the figcaption`. Here is my CSS for figcaption.
Here is my code for an image with a figcaption.
figcaption {
text-align: center;
display: inline-block;
}
<figure>
<a href="https://ibb.co/CbSzPRr">
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</a>
<br>
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
Here is also a screenshot of what it looks like. The image on the left is where the image should be. The image on the left has a figcaption and it's slightly up to the left.
I am very new to coding. Anything suggestions would help. Thank you! I think there is a really simple solution to this that I'm missing.
Are you looking for something like this -
figure {
display: block;
float: left;
width: 200px;
margin: 20px
}
figcaption {
display: block;
text-align: center;
width: 100%;
}
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>The image stays in same row without begin displaced</div>
</figcaption>
</figure>
The above code will display all images in single row and all the captions beneath them. The images won't be misaligned in a single row.
Another way of doing it would be to bring the captions over the image. This can be done as -
.row {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-X: scroll;
}
figure {
display: block;
float: left;
position: relative;
margin: 30px 15px
}
figcaption {
position: absolute;
bottom: 0;
background: #fff;
opacity: .7;
width: 100%;
text-align: center;
}
.row-separator {
height: 5px;
background-color: grey;
margin: 20px 10px;
}
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
<div class="row-separator"></div>
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
Hope this helps !
I am trying to align 4 images horizontally each with its own caption, and then other 4 images under exactly the same.
I am new to code, so I only use HTML and CSS.
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills > img {
display: flex;
width: 100%;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>
For some reason, the first image in the row is not aligned with the other 3. And on mobile (where they are displayed in 2 columns) the first column has the same problem.
Thank you very much for your time!
Reset the default top margin on the figure.
figure {
margin-top: 0;
}
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills>img {
display: flex;
width: 100%;
}
figure {
margin-top: 0;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>
I want the images to be centered and I need two of the images to be stacked up on each other in the center. I have logo on the left and nav bar on the right
.projImg {
margin: 0;
}
.projImg img {
display: block;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
.projImg {
margin: 0;
}
.projImg img {
display: block;
margin: auto;
}
use this CSS code to centralize your images.
Use following code...
.projImg {
text-align:center;
width: 50%;
float:left;
margin:0;
}
.projImg img {
display: inline-block;
width: 100%;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>