I have a few wrapped images in my HTML file:
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="../assets/images/friends/friend_1_256.png" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="../assets/images/friends/friend_2_512x157.png" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
I want to display these images in a row. I have tried solutions such as float: left or display: inline-block but none of them works. Is it possible to display wrapped images inline?
It should work. Try something like this.
#friend {
display: inline-block;
border: 1px solid red; /*Just to highlight */
width:200px; /*Set width according to parent id banners*/
text-align:center /*center image*/
}
<div id="banners">
<div id="friend">
<a target="_blank" href="http://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 1" width="200" height="200">
</a>
</div>
<div id="friend">
<a target="_blank" href="https://www.google.com">
<img src="https://i.stack.imgur.com/kMcaV.jpg?s=328&g=1" alt="TEST 2" width="400" height="123">
</a>
</div>
</div>
Try this out, it worked for me, hope it will resolve your issue as well
#friend{display:table-cell;}
Related
I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.
Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}
You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>
I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>
Alright, so I'm back with another question about centering my images. None of the advice I received (older post) solved the issue. Grant it, the images are no longer scattered and take up a different amount of space. They are lined on top of each other on the left side of the screen. I have ten images. I'm trying to achieve two rows of three centered images with the extra photo either right above or below the two rows. I took out any break elements because they didn't seem to be doing anything.
div.gallery {
margin: 5px;
border: 5px solid white;
width: 500px;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
color: yellow;
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<h1 class="work1"><center><a class="ex1">Photography Assignment</a></center></h1>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
I was able to get the desired layout using Flexbox with these updates:
Add a container div to wrap around all 10 of the gallery divs.
Add this CSS for the new container div:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
Add to the CSS width:30%; to the div.gallery
Here are these edits in CodePen:
https://codepen.io/jessbodie/pen/OONpRE?editors=1100
Refer to great article: "A Complete Guide to Flexbox"
I have 2 images that I want to show side by side, with the title above as part of a hyperlink.
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
If I remove the p tag around the titles, it displays inline, but I need the title to be on top of the image.
CSS:
#image {
display: inline-block;
float: left;
}
Here. Proper HTML and CSS.
a {
display: inline-block;
text-decoration: none;
}
<div id="image">
<a href="file:///L:/file" title="Project Reports">New Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2">Project Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
</div>
add float:left; in a
#image {
display: inline-block;
width:1000px;
clear:both;
}
#image > a{
float: left;
display:inline-block;
}
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
Basically I have put a gallery into the website that I am making, and it works well. But. The pictures just scroll down the left side of the screen. I would like half of the pictures to be to the right of the other pictures... Here is a screenshot of my website (With Hi-tech red boxes drawn in paint to show where I would like half of the pictures to go)
http://tinypic.com/view.php?pic=hx3fbb&s=8#.U2JPKYFdX-k
Here is my code....(html)
<div class="img">
<a target="_blank" href="Gallery/Ss1.jpg">
<img src="Gallery/Ss1.jpg" alt="Screenshot1" width="500" height="400">
</a>
<div class="desc">Death vs Colossus</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss2.jpg">
<img src="Gallery/Ss2.jpg" alt="Screenshot2" width="500" height="400">
</a>
<div class="desc">Death's forge</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss3.jpg">
<img src="Gallery/Ss3.jpg" alt="Screenshot3" width="500" height="400">
</a>
<div class="desc">Death vs Horseman</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss4.jpg">
<img src="Gallery/Ss4.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Horse Jump</div>
</div>
<p></p>
<div class="img">
<a target="_blank" href="Gallery/fa1.jpg">
<img src="Gallery/fa1.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Fan Art #1</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa2.jpg">
<img src="Gallery/fa2.jpg" alt="FanArt2" width="500" height="400">
</a>
<div class="desc">Fan Art #2</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa3.jpg">
<img src="Gallery/fa3.jpg" alt="FanArt3" width="500" height="400">
</a>
<div class="desc">Fan Art #3</div>
</div>
<div class="img1">
<a target="_blank" href="Gallery/fa4.jpg">
<img src="Gallery/fa4.jpg" alt="FanArt4" width="500" height="400">
</a>
<div class="desc">Fan Art #4</div>
</div>
and here is my CSS code;
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;
}
So again, I would basically like the Fan art pictures to appear to the right of the Screenshot pictures. I tried making a new div class for the fan art and changing the float to 'right' but that didn't work.
Thankyou in advance for your time and input :)
There are a couple different methods you could use for this. You could use floats or display: inline-block.
http://jsfiddle.net/Davidicus/p4Qkh/
Here is a simple float example.
I have a pen where i am using "inline-block" to float elements. Click on the little eye icon in the css panel to see the compiled css.
http://codepen.io/davidicus/pen/vxIra
I have something like this:
<li>
<div class="">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
</li>
//multiple li like above inside ul
i'm trying to achieve the effect like in related videos on youtube, with an image on the left, and the text appearing to the right of the image (and not flowing under the image) - how can it be done?
eg:
thanks
Floats and margins can be your friend here. For example:
<style type="text/css">
.videoitem {
height:90px;
margin-bottom:15px;
}
.image {
float:left;
margin-right:10px;
}
</style>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>
<div class="videoitem">
<a href="http://www.youtube.com/watch?v=1111" target="_blank">
<img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
</a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
<h6>abcd</h6>
</a>
<p>
1234 views
</p>
</div>