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.
Related
I have the following html snippet:
<figure>
<img src='image.png' height="250" width="250">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
And the following css:
figure {
display: inline-block;
border: 1px;
margin: 20px; /* adjust as needed */
}
figure img {
vertical-align: top;
}
figure figcaption {
border: 1px;
text-align: center;
}
It would end up looking like this:
How can I set it up so that if a user clicks on the image or the caption under it they get directed to a new page.
You can just put it inside an anchor tag like:
<figure>
<a href="https://www.google.com">
<img src='image.png' height="250" width="250">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</a>
</figure>
You can use <a target="_blank" href="link_here">your image code</a> Also you need to use target="_blank" to open new browser window.
<figure>
<a target="_blank" href="your_link_here">
<img src='image.png' height="250" width="250">
...
...
</a>
</figure>
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'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
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;}
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>