Hoock Posted April 29, 2017 Share Posted April 29, 2017 I wonder if someone could be kind, and help me changing this CSS-Image Gallery listed below. I would like it to be vertically, with the image at the left, and the text/description to the right of the image. At the same time if possible it would be great to have with a max width of 700 px. I would need to be able to add and take of images and texts all the time. As new items and descriptions will be added and sold items, taken of, just as I can do now. IMAGE - TEXT/DESCRIBTION IMAGE - TEXT/DESCRIBTION IMAGE - TEXT/DESCRIBTION < ---------------------- max width ------700 px. ------------------à <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="fjords.jpg"> <img src="fjords.jpg" alt="Fjords" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div></div></body></html> Link to comment Share on other sites More sharing options...
Hoock Posted May 31, 2017 Author Share Posted May 31, 2017 Hi I can see that I did not have any respponce here, but I found it on another forum. If someone else should be interested in a vertical image gallery, they could look at this: <html> <head> <style> div.principal { display: flex; justify-content: center; clear: both; float: none; width: 100%; max-width:700px; margin: 0 auto; } div.img { margin: 20px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { float: left; width: 65%; padding: 15px; text-align: left; } </style> </head> <body> <div class="principal"> <div class="img"> <a target="_blank" href="fjords.jpg"> <img src="fjords.jpg" alt="Fjords"> </a></div> <div class="desc">Add a description of the image here. Add a description of the image here Add a description of the image here Add a description of the image here</div> </div> <div class="principal"> <div class="img"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest"> </a></div> <div class="desc">Add a description of the image here</div> </div> <div class="principal"> <div class="img"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights"> </a></div> <div class="desc">Add a description of the image here</div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now