Small icon help

HTML & CSS
1

Hello. I’m having a couple issues regarding icons at the bottom of my page. I have one setup and trying to add two more on the right and left of the current one. Need some help with positioning though. Take a look.

Obviously it wont display as I dont have the images but heres a screenshot

1514×159 6.43 KB

The two black boxes are where I want the other two icons to be (twitter.png) (fbicon.png) I left some of the alignments in the jsfiddle blank because I dont know what to put

2

Hi,
You can use display:table; on your footer to get the results your after.
Then set up your left and right divs as display:table-cell;

This could also be done with flexbox if your interested.

Here’s the table version. It will need anchors in it if you plan on having the icons as links.

988×114 360 Bytes


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Icons</title>
<style>
footer {
   display:table;
   width:100%;
}
.left, .right {
   display:table-cell;
   text-align:center;
   padding:30px 0;
}
.left {
   width:70%;
   background:#53352f;
   border-right:2px solid green;
}
.right {
   width:30%;
   min-width:180px;
   background:#684d48;
}
footer img {
   display:inline-block;
   vertical-align:middle;
   margin:5px 3px;
   background:#eef;
}
</style>
</head>
<body>

<footer>
   <div class="left">
      <img src="email.png" class="emailicon" width="40" height="30" alt="">
   </div>
   <div class="right">
      <img src="insta.png" class="instaicon" width="40" height="30" alt="">
      <img src="fbicon.png" class="fbicon" width="40" height="30" alt="">
      <img src="twitter.png" class="twittericon" width="40" height="30" alt="">
   </div>
</footer>

</body>
</html>
3

Hi there lucasaltmann1123,

and a warm welcome to these forums. :winky:

In addition to the solution posted by @Ray.H,
you may like to check out this attachment…

lucasaltmann1123.zip (9.2 KB)

…which is coded for links using the

“The Gilder/Levin image replacement technique”

coothead

1 Like
4

Take caution when using sprite background images with containers sized in ems.

Problems can arise when the user zooms text only.

If they were separate bg images you could control it better with background-size:cover , as long as your aspect ratio was accounted for on the em container.

5

That is very true, thank you for drawing my attention to that. :winky:

I, unfortunately, only tested the code with normal Zoooooom. :wonky:

This new attachment has now addressed the problem…

lucasaltmann1123-modified-for-rayh.zip (9.5 KB)

coothead

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.