I'm building an e-mail template and trying to add one line for social icons.
Without that social icons the e-mail fits in the window like that:
If I resize the window, the e-mail resizes too.
But when I add theese social icons, the e-mail is bigger than the window:
The html code for that line looks like:
<tr>
<td></td>
<td>
<a style="text-decoration: none; display: inline-block;" href="..." target="_blank">
<img width="60" height="60" src="..." alt="LinkedIn" />
</a>
<a style="text-decoration: none; display: inline-block;" href="..." target="_blank">
<img width="60" height="60" src="..." alt="Facebook" />
</a>
<a style="text-decoration: none; display: inline-block;" href="..." target="_blank">
<img width="60" height="60" src="..." alt="Twitter" />
</a>
<a style="text-decoration: none; display: inline-block;" href="..." target="_blank">
<img width="60" height="60" src="..." alt="Xing" />
</a>
</td>
<td></td>
</tr>
Does anybody know the reason why this happens?
Is it possible that the whitespaces are the problem? See here for more
Related
I am currently creating hyperlinked social media icons in the footer of my website. Each of the 3 images are seperate and eahc hyperlinking to a different social media. However the 'Copyright' text underneath the images in the footer is automatically hyperlinking to the link as the last image= Instagram.
How do I unlink that text? As i want it to just be displayed text not a hyperlink
.Socials {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
#footer {
text-align: center;
background-color: #000000;
color: white;
font-family: 'Big Shoulders Stencil Text', cursive;
}
<div id="footer">
<div class="Socials">
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook">
<a href="https://twitter.com/UlsterUni? ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img id="Twitter" src="Twitter.png" alt="Twitter">
<a href="https://www.instagram.com/ulsteruni/?hl=en">
<img id="Instagram" src="Instagram.png" alt="Instagram">
</div>
<p>Belfast Virtual Shopping Centre - Copyright 2020</p>
</div>
Close your hyperlinks with a </a>. For example:
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook">
</a>
Otherwise the browser is trying to correct the markup structure for you, and it may not always guess correctly.
You need to end the <a> tags in order for the "linking" to not continue.
<div id="footer">
<div class="Socials">
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook"
/></a>
<a
href="https://twitter.com/UlsterUni? ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
>
<img id="Twitter" src="Twitter.png" alt="Twitter"
/></a>
<a href="https://www.instagram.com/ulsteruni/?hl=en">
<img id="Instagram" src="Instagram.png" alt="Instagram"
/></a>
</div>
<p>Belfast Virtual Shopping Centre - Copyright 2020</p>
</div>
You should close your tags!
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook"/>
</a>
And if it does not require closing, like the image, you can put a slash in the opening tag, as showed in the code sample.
I have a bunch of images that are right next to each other to form a navigation bar. There are no gaps so it looks like one image while being able to make certain areas of it clickable and others not. How do I make it so if the navigation bar is too long for the window it gets smaller instead of some of the images going on a new line?
HTML/CSS:
.navbar-button {
margin: 0;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
<center>
<img src="Images/NavBar1.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="Images/NavBar2.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar3.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="Images/NavBar4.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar5.png" alt="" class="navbar-button" />
<img src="Images/NavBar6.png" alt="" class="navbar-button" />
<img src="Images/NavBar7.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="Images/NavBar8.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar9.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="Images/NavBar10.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar11.png" alt="" class="navbar-button" />
</center>
Instead of trying to prevent the linebreak with multiple images, you may want to take a look at the possibility to define clickable areas on a single image. You can define a map with different clickable areas. Take a look at the example below, where only the area around the text is actually clickable:
<img src="https://dummyimage.com/600x400/000/fff" usemap="#map">
<map name="map">
<area shape="rect" coords="100,150,500,250" href="#">
</map>
You can also define different shapes and sizes, for a better understanding, just take a look at the documentation
Please also note
If you define coordinates as pixels, this can lead to different clickable areas, if you resize the image. There is another question at StackOverflow, with a helpful discussion on how to create responsive image maps
I don't know if i got what you are trying to do but check this and let me if it works for you
jsfiddle link
<div class="my-navbar">
<center>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</center>
</div>
.navbar-button {
margin: 0;
padding: 0;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
float:left;
width:200px;
}
Try this
.navbar-button {
margin: 0 10px !important;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
I am trying to put multiple icons (pictures) in one line, and when I do that, I get underscores between each picture.
<img alt="Facebook" src="Facebook.png">
<img alt="Youtube" src="Youtube.png">
<img alt="Twitter" src="Twitter.png">
<img alt="Instagram" src="Instagram.png">
And this is how does it look like
See attached picture, notice the underscores between each picture.
Because of your spaces between <a> tags and <img> tags.
<img alt="Facebook" src="Facebook.png">
<img alt="Youtube" src="Youtube.png">
<img alt="Twitter" src="Twitter.png">
<img alt="Instagram" src="Instagram.png">
Browser considers you are in a link string, even if there is an image. So it will underline the link as usual.
a{
text-decoration:none;
}
<img alt="Facebook" src="Facebook.png">
<img alt="Youtube" src="Youtube.png">
<img alt="Twitter" src="Twitter.png">
<img alt="Instagram" src="Instagram.png">
Remove the space after the img tag within a tag which treated as a character and in default a tag has the underline(CSS text-decoration property).
<img alt="Facebook" src="Facebook.png">
<!-- -^- -^- -->
<img alt="Youtube" src="Youtube.png">
<img alt="Twit11ter" src="Twitter.png">
<img alt="Instagram" src="Instagram.png">
Use following code:
a {
text-decoration: none;
}
I am very new to html and css coding and recently i created my own website using wordpress.
In one of the pages in wordpress i wanted to add images next to each other separated with a small space; something that i did successfully but unfortunately the images are not horizontally aligned. The second and third images are positioned further down from the first image.
The html coding that i used without making any changes to css is the following:
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1-150x150.jpg" alt="Image_1" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2-150x150.jpg" alt="Image_2" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3-150x150.jpg" alt="Image_3" width="150" height="150" hspace="10/" />
</a>
Any help will be much appreciated.
Many Thanks
Demis
You need to write little CSS to do the Work. Here is detailed info how to do it.
# Punctweb
for some reason the following code worked Punctweb. I just added the images next to each other. although i think this code doesnt look very correct
<img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /> <img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />
Have you checked if there isn't already some other CSS rules that affect your elements in page? Also, as a side note, you have an extra slash (/) in your hspace attribute on your third image
Also, this example will help you http://jsfiddle.net/0fe0w32s/ ?
HTML
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>
CSS
.my_image {
display: block;
float: left;
margin-right: 10px;
}
.my_image img {
width: 150px;
height: 150px;
}
Edit 2: please, remove the BR tags that are present in the containing paragraph so that your final code will look like this
<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
</a>
</p>
I am trying to lower the image to the middle of text inside of anchor element
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span>testttttt</span>
<img src="/test.jpg" style="padding-top:5px;">
</a>
</td>
as you can see the Image has style="padding-top:5px;" but instead of lowering the image only, it's pushing the text too.
I can't use float because its suppose to work on email clients.
Thanks for any help
Baaroz
Edited: just set the align attribute for you img element: align="middle"
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span >testttttt</span>
<img src="/test.jpg" style="padding-top:5px;" align="middle">
</a>
</td>
Apply vertical-align: middle; to your image...
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;" href="">
<span>testttttt</span>
<img src="/test.jpg" style="vertical-align:middle;" />
</a>
</td>
fiddle