How would I connect the 2 images to the middle image?

<img src="https://i.imgur.com/HJolSyI.png" style="border: solid 5px;" />
<img src="https://i.imgur.com/yj38Wz2.png" style="border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
<img src="https://i.imgur.com/NdpnmZw.png" style="border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />

Can someone tell me if this is right?

margin-left: -4px;

<img src="https://i.imgur.com/HJolSyI.png" style="border: solid 5px;" />
<img src="https://i.imgur.com/yj38Wz2.png" style="margin-left: -4px;border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
<img src="https://i.imgur.com/NdpnmZw.png" style="margin-left: -4px;border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />

How do you keep the boxes from breaking apart?


<img src="https://i.imgur.com/u3zWye4.png" style="margin-left:0;height:60px;border: solid 5px #38761d" />
<img src="https://i.imgur.com/MAqbcs2.png" style="height:60px;margin-left: -4px;border-top: solid 5px #38761d ;border-bottom: solid 5px #38761d;border-right: solid 5px #38761d" />
<img src="https://i.imgur.com/287lotJ.png" style="height:60px;margin-left: -4px; border-top: solid 5px #38761d;border-bottom: solid 5px #38761d;border-right: solid 5px #38761d" />

Topics merged, as they are clearly connected.

Hi there asaass,

I would suggest that you should always do it with “T.L.C”. :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#social-links img{
    float: left;
    border: 0.25em solid #000;
 }
#social-links a:nth-child(2) img {
    border-right: 0;
    border-left: 0;
 }
</style>
</head>
<body> 
<div id="social-links">
 <a href="https://www.facebook.com"><img src="https://i.imgur.com/HJolSyI.png" width="60" height="60" alt="facebook"></a>
 <a href="https://www.twitter.com"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" alt="twitter"></a>
 <a href="https://www.pinterest.com"><img src="https://i.imgur.com/NdpnmZw.png" width="60" height="60" alt="pinterest"></a>
</div>
</body>
</html>

coothead

1 Like

More variations:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>variations</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-connect-the-2-images-to-the-middle-image/252665
asasass
Feb 6,2017 11:18 PM
-->
    <style type="text/css">
div,ul {margin:10px auto;}

.socialinks {
    display:table;
    border-spacing:5px;
    background-color:#000;
    outline:1px dashed red;
}
.socialinks span,
.socialinks a {
    display:table-cell;
}
.socialinks img {
    display:block;
    width:100%;
    height:auto;
}

.socialbutts {
    display:table;
    border-spacing:5px;
    outline:1px dashed red;
}
.socialbutts span,
.socialbutts a {
    display:table-cell;
    border:5px solid #000;
    border-radius:20px;
}
.socialbutts img {
    display:block;
    width:100%;
    height:auto;
    border-radius:15px;
}

.socthingys {
    list-style:none;
    display:table;
    border-spacing:5px;
    background-color:#000;
    padding-left:0;
    margin:10px auto;
    outline:1px dashed red;
}
.socthingys li {
    display:table-cell;
}
.socthingys img {
    display:block;
    width:100%;
    height:auto;
}

.socialites {
    display:table;
    white-space:nowrap;
    word-spacing:-.5em;
    margin:10px auto;
    outline:1px dashed red;
}
.socialites span {
    display:inline-block;
    vertical-align:top;
    width:33.33%;
    max-width:154px;
    box-sizing:border-box;
    word-spacing:0;
    border:5px solid #000;
    border-radius:20px;
    margin-left:5px;
}
.socialites span + span {
    margin-left:-5px;
}
.socialites img {
    display:block;
    width:100%;
    height:auto;
    border-radius:15px;
}
    </style>
</head>
<body>

<div class="socialinks">
    <span><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></span>
</div>

<div class="socialinks">
    <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>

<div class="socialbutts">
    <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>

<ul class="socthingys">
    <li><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></li>
    <li><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></li>
    <li><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></li>
</ul>

<div class="socialites">
    <span><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></span>
</div>

</body>
</html>
1 Like

Is there a certain way where I can use this code with just inline styles where it doesn’t break apart?

<div class="socialinks">
    <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
    <a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>

What do you mean by “break apart”? Are you taking about the icons wrapping onto a new line at narrower widths?

this: Post 2 on here.

And when does that occur? When you narrow the browser window, or at all sizes?

Is there a reason you’re so dead set against using the best practices which have been given to you time and time and time again? I know that there have been MANY comments over your various threads that inline styles cause more rework in the long run. Inline styles ALSO have the risk of inconsistent application of styles over similar content.

When you narrow the browser. But it doesn’t do that with @ronpat code.

So why not use that code?

1 Like

If your parent container is more than 462px wide, you’re going to get wrapping. That’s just the nature of the beast.

1 Like

I’m trying to see what from his code I can add to my code.

I need to add

display:table-cell;

to it some how.

Then you’re probably going about it the wrong way; you can’t mix-and-match code and expect the results to be consistent.

If you’re determined to use inline styles, then you can add the styles from @ronpat’s example to the relevant element(s) in that HTML, but don’t mix them with any other styles.

I was able to cut the code down this much.

<img border="5" src="https://i.imgur.com/u3zWye4.png" style="height:60px;border-color: #38761d; ">
<img border="5" src="https://i.imgur.com/MAqbcs2.png" style="border-color:#38761d; margin-left: -9px; height:60px;">

Imgur puts border=“5” in all their image codes even though its obsolete.

I believe there was a discussion in one of your other threads about how some big organizations use out-of-date coding and why they haven’t changed. Just because someone else uses out-of-date and deprecated code doesn’t mean it is right and you are okay to use it.

Always strive to use best practices. They are ‘best practices’ for a very good reason. The more you try to code things the right way, the less likely you will be to run into problems with your code.

3 Likes