I have a selection of social media icons which I wish to position at the bottom of my website centrally, inside a box div.
My code looks right to me but I'm sure I'm missing something.
Any help would be greatly appreciated.
HTML
<div id="footerBar">
<div id="icons">
<a href="https://youtube.com/MYPROFILE"><img class="socialicon" <img src="images/icons/youtube_dark.png" onmouseover="this.src='images/icons/youtube_red.png'" onmouseout="this.src='images/icons/youtube_dark.png'" alt="Subscribe on YouTube" width="32" height="32">
<a href="https://twitter.com/MYPROFILE"><img class="socialicon" <img src="images/icons/twitter_dark.png" onmouseover="this.src='images/icons/twitter_blue.png'" onmouseout="this.src='images/icons/twitter_dark.png'" alt="Follow on Twitter" width="32" height="32">
<a href="https://instagram.com/MYPROFILE"><img class="socialicon" <img src="images/icons/instagram_dark.png" onmouseover="this.src='images/icons/instagram_beige.png'" onmouseout="this.src='images/icons/instagram_dark.png'" alt="Follow on Instagram" width="32" height="32">
<a href="https://behance.com/MYPROFILE"><img class="socialicon" <img src="images/icons/behance_dark.png" onmouseover="this.src='images/icons/behance_blue.png'" onmouseout="this.src='images/icons/behance_dark.png'" alt="Follow on Behance" width="32" height="32">
<a href="https://uk.linkedin.com/in/MYPROFILE/"><img class="socialicon" <img src="images/icons/linkedin_dark.png" onmouseover="this.src='images/icons/linkedin_blue.png'" onmouseout="this.src='images/icons/linkedin_dark.png'" alt="Connect on LinkedIn" width="32" height="32">
<a href="https://vimeo.com/MYPROFILE"><img class="socialicon" <img src="images/icons/vimeo_dark.png" onmouseover="this.src='images/icons/vimeo_blue.png'" onmouseout="this.src='images/icons/vimeo_dark.png'" alt="Subscribe on Vimeo" width="32" height="32">
<a href="https://dribbble.com/MYPROFILE"><img class="socialicon" <img src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src='images/icons/dribbble_dark.png'" alt="Follow on Dribbble" width="32" height="32">
</div>
</div>
CSS
#footerBar
{
padding:5px;
width:75%;
height:50px;
margin:10px auto;
border:1px solid #1e1e1e;
background-color: #f3f3f3;
}
.socialicon
{
float:left;
width:32px;
height:32px;
margin:auto;
}
.socialicon a
{
float:left;
width:32px;
height:32px;
margin:auto;
vertical-align: middle;
}
http://jsfiddle.net/7U4aE/4/
By adding #icons { text-align: center; } and a { display: inline-block; }, it aligns all of the child elements to the center of the div. You can then add spacing between each icon if necessary.
Also, I fixed the <img> tags, as your implementation was a bit broken/messy. You don't need to nest the <img <img ...> as you did, just have one like this:
<img class="socialicon" src="..." onmouseover="..." onmouseout="..." alt="Subscribe on YouTube" width="32" height="32" />
You also didn't close your <a> tags, which I added.
I would try removing float: left; from .socialicon .
Also, fix the image tags
<img class="socialicon" <img src=
to
<img class="socialicon" src= ...
and end the tag
<img class="..." src="..." />
Brynn
Try remove float: left from .socialicon and use text-align: center to #footerbar
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 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>
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;}