I want to align the text on the right side of images. Below I pasted code of HTML and CSS. I am also pasting fiddle for that. Please find the link for fiddle also and let me know the solution. Thank you!
https://jsfiddle.net/yt4cxvLs/
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;
float: left;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Check this answer, as you can see, i just added "style=float" attribute in div element and separated </div> tag:
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;
float: left;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>
</html>
So the logic is -
Use a div as a parent container and place a and span for the text inside it
Make parent div, a and span as float:left'
.row {
float: left;
margin-right: 20px;
}
.row a {
float: left;
margin-right: 5px;
}
.row span {
float: right;
}
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>
<div class="row">
<a href="#">
<img src="http://placehold.it/150">
</a>
<span>This is sample text</span>
</div>
Related
Note that in the code below I have several div with a "responsive" class, there is some way to be separating the first horizontal column from the second, as the boxes are very close to each other. And in the field that has the text in the images, it has a lot of spaces up and down, how can I adjust?
I'm learning and I don't know much about technical terms in HTML.
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller
than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
</body>
</html>
You can add more space beneath the boxes by adding some margin-bottom to your responsive class:
.responsive {
margin-bottom: 30px; /* Adjust accordingly */
}
You can also reduce the amount of space above and below the text by adjusting the padding for your desc class:
div.desc {
padding: 5px; /* Adjust accordingly */
}
I am trying to create an image gallery, and I have the following styling:
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
I have the following HTML:
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
The output looks like this:
How do I make the fourth image go underneath the first image? Note that I theoretically don't know how long the description (text) will be, so I do not want to hard code a height for the image or div.
.row{
display:flex;
flex-wrap:wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
flex-basis: calc(33.333333% - 15px);
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="row">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
I'm writing some HTML pages for my personal website but I'm running into the problem that new elements aren't starting on a newline and rather starting to the right of a div containing a picture gallery.
this is easier shown than explained for me so here is a screenshot...
As you can see I want the circled elements below the gallery div
here is the code
<div id="gallerydiv">
<div class="gallery">
<a target="_blank" href="../AppDev images/java1.png">
<img src="../AppDev images/java1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Application with basic functionality</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_10.png">
<img src="../AppDev images/Screenshot_10.png" alt="ToDo10" width="600" height="400"/>
</a>
<div class="desc">New file prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_11.png">
<img src="../AppDev images/Screenshot_11.png" alt="ToDo11" width="600" height="400"/>
</a>
<div class="desc">File deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_12.png">
<img src="../AppDev images/Screenshot_12.png" alt="ToDo12" width="600" height="400"/>
</a>
<div class="desc">New ticket prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_13.png">
<img src="../AppDev images/Screenshot_13.png" alt="ToDo13" width="600" height="400"/>
</a>
<div class="desc">Ticket deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_14.png">
<img src="../AppDev images/Screenshot_14.png" alt="ToDo14" width="600" height="400"/>
</a>
<div class="desc">Complete Ticket Prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_1.png">
<img src="../AppDev images/Screenshot_1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Adding some tickets to complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_2.png">
<img src="../AppDev images/Screenshot_2.png" alt="ToDo2" width="600" height="400"/>
</a>
<div class="desc">Completing tickets</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_3.png">
<img src="../AppDev images/Screenshot_3.png" alt="ToDo3" width="600" height="400"/>
</a>
<div class="desc">Complete section functional</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_4.png">
<img src="../AppDev images/Screenshot_4.png" alt="ToDo4" width="600" height="400"/>
</a>
<div class="desc">Ticket formatting complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_7.png">
<img src="../AppDev images/Screenshot_7.png" alt="ToDo7" width="600" height="400"/>
</a>
<div class="desc">Adding images for buttons</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_6.png">
<img src="../AppDev images/Screenshot_6.png" alt="ToDo6" width="600" height="400"/>
</a>
<div class="desc">Change directory dialog</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_9.png">
<img src="../AppDev images/Screenshot_9.png" alt="ToDo9" width="600" height="400"/>
</a>
<div class="desc">Finished product</div>
</div>
</div>
<div>
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
and the styling...
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#gallerydiv {
width: 1000px;
margin: auto;
}
Ive already tried spamming br and setting the gallery width to 100% percent but nothing I have tried has worked obviously.
Try adding the same styles to the <p> and <h2> that were out of line. For example, in HTML:
<div class="unknown">
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
CSS:
div.unknown {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
}
That should work...
Add clearfix class to your div. This will move your next div to newline.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 190px;
border: 5px solid red;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#gallerydiv {
width: 1000px;
margin: auto;
}
div.clearfix::after {
content: "";
clear: both;
display: table;
}
div.mydiv {
width: 1000px;
margin: auto;
}
<div id="gallerydiv" class="clearfix">
<div class="gallery">
<a target="_blank" href="../AppDev images/java1.png">
<img src="../AppDev images/java1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Application with basic functionality</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_10.png">
<img src="../AppDev images/Screenshot_10.png" alt="ToDo10" width="600" height="400"/>
</a>
<div class="desc">New file prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_11.png">
<img src="../AppDev images/Screenshot_11.png" alt="ToDo11" width="600" height="400"/>
</a>
<div class="desc">File deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_12.png">
<img src="../AppDev images/Screenshot_12.png" alt="ToDo12" width="600" height="400"/>
</a>
<div class="desc">New ticket prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_13.png">
<img src="../AppDev images/Screenshot_13.png" alt="ToDo13" width="600" height="400"/>
</a>
<div class="desc">Ticket deletion prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_14.png">
<img src="../AppDev images/Screenshot_14.png" alt="ToDo14" width="600" height="400"/>
</a>
<div class="desc">Complete Ticket Prompt</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_1.png">
<img src="../AppDev images/Screenshot_1.png" alt="ToDo1" width="600" height="400"/>
</a>
<div class="desc">Adding some tickets to complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_2.png">
<img src="../AppDev images/Screenshot_2.png" alt="ToDo2" width="600" height="400"/>
</a>
<div class="desc">Completing tickets</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_3.png">
<img src="../AppDev images/Screenshot_3.png" alt="ToDo3" width="600" height="400"/>
</a>
<div class="desc">Complete section functional</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_4.png">
<img src="../AppDev images/Screenshot_4.png" alt="ToDo4" width="600" height="400"/>
</a>
<div class="desc">Ticket formatting complete</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_7.png">
<img src="../AppDev images/Screenshot_7.png" alt="ToDo7" width="600" height="400"/>
</a>
<div class="desc">Adding images for buttons</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_6.png">
<img src="../AppDev images/Screenshot_6.png" alt="ToDo6" width="600" height="400"/>
</a>
<div class="desc">Change directory dialog</div>
</div>
<div class="gallery">
<a target="_blank" href="../AppDev images/Screenshot_9.png">
<img src="../AppDev images/Screenshot_9.png" alt="ToDo9" width="600" height="400"/>
</a>
<div class="desc">Finished product</div>
</div>
</div>
<div class="mydiv">
<p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>
</div>
I would like to align my div boxes for a client's website all perfectly next to each other and without some being bigger than others. Here is the page relating to the code: https://www.imaniskinclinic.com/treatments
The boxes are not inline and some are obviously bigger than others. I added a div box container which I thought would hold the boxes more nicely but it doesn't seem to have worked.
Can anyone give me some assistance and guidance on what I must do?
Here is the code: CSS then HTML
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 200px;
height: 200px;
background: #f8abbe;
}
div.gallery:hover {
border: 1px solid #ffffff;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
font-family : verdana, arial, helvetica, helve, sans-serif;
color: #ffffff;
}
<div class="box">
<div class="gallery">
<a href="aesthetics/acne.htm" >
<img src="images/acne.jpg" alt="Acne" width="300" height="200">
</a>
<div class="desc">Acne Treatments</div>
</div>
<div class="gallery">
<a href="aesthetics/hair%20removal.htm">
<img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
</a>
<div class="desc">Laser Hair Removal</div>
</div>
<div class="gallery">
<a href="aesthetics/electrolysis.htm">
<img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
</a>
<div class="desc">Electrolysis</div>
</div>
<div class="gallery">
<a href="aesthetics/thread%20veins.htm">
<img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
</a>
<div class="desc">Thread Veins</div>
</div>
<div class="gallery">
<a href="aesthetics/microderm.htm" >
<img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
</a>
<div class="desc">Microdermabrasion</div>
</div>
<div class="gallery">
<a href="aesthetics/rosacea.htm" >
<img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
</a>
<div class="desc">Rosacea</div>
</div>
<div class="gallery">
<a href="aesthetics/pigmentation.htm" >
<img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
</a>
<div class="desc">Pigmentation</div>
</div>
<div class="gallery">
<a href="aesthetics/skin%20peels.htm" >
<img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
</a>
<div class="desc">Skin Peels</div>
</div>
<div class="gallery">
<a href="aesthetics/botox_lipfillers.htm" >
<img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
</a>
<div class="desc">Botox & Lipfillers</div>
</div>
<div class="gallery">
<a href="aesthetics/semiperm.htm" >
<img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
</a>
<div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>
<div class="gallery">
<a href="aesthetics/mc.html" >
<img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
</a>
<div class="desc">Massage & Cupping</div>
</div>
</div>
Just added display: inline-block;
If you play a little bit with sizes of divs it will look better
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 200px;
height: 200px;
background: #f8abbe;
display: inline-block;
}
div.gallery:hover {
border: 1px solid #ffffff;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
font-family : verdana, arial, helvetica, helve, sans-serif;
color: #ffffff;
}
<div class="box">
<div class="gallery">
<a href="aesthetics/acne.htm" >
<img src="images/acne.jpg" alt="Acne" width="300" height="200">
</a>
<div class="desc">Acne Treatments</div>
</div>
<div class="gallery">
<a href="aesthetics/hair%20removal.htm">
<img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
</a>
<div class="desc">Laser Hair Removal</div>
</div>
<div class="gallery">
<a href="aesthetics/electrolysis.htm">
<img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
</a>
<div class="desc">Electrolysis</div>
</div>
<div class="gallery">
<a href="aesthetics/thread%20veins.htm">
<img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
</a>
<div class="desc">Thread Veins</div>
</div>
<div class="gallery">
<a href="aesthetics/microderm.htm" >
<img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
</a>
<div class="desc">Microdermabrasion</div>
</div>
<div class="gallery">
<a href="aesthetics/rosacea.htm" >
<img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
</a>
<div class="desc">Rosacea</div>
</div>
<div class="gallery">
<a href="aesthetics/pigmentation.htm" >
<img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
</a>
<div class="desc">Pigmentation</div>
</div>
<div class="gallery">
<a href="aesthetics/skin%20peels.htm" >
<img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
</a>
<div class="desc">Skin Peels</div>
</div>
<div class="gallery">
<a href="aesthetics/botox_lipfillers.htm" >
<img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
</a>
<div class="desc">Botox & Lipfillers</div>
</div>
<div class="gallery">
<a href="aesthetics/semiperm.htm" >
<img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
</a>
<div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>
<div class="gallery">
<a href="aesthetics/mc.html" >
<img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
</a>
<div class="desc">Massage & Cupping</div>
</div>
</div>
Here is the image.
I want to display two buttons, 'buy' and 'image' button, under each images. I want to use html.
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc"><button>Buy</button><button>Image</button></div>
</div>
</body>
</html>