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;
}
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%;
}
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Why does the float:left and float:right element cause my web page to become squashed?
This is what happens when I try to float:left or float:right.
http://prntscr.com/3fx03d
The page seems to forget the images take up space on the page
The only way to fix this is to use "<p>...</p>" at the very bottom of the images in the HTML Code then it will look like this.
http://prntscr.com/3fx13l
What is going on here?
Yes I have ensured to specify the size of the images beforehand.
HTML
<div id="main-content">
<h2>Images</h2>
<div class="images">
<img src="images/Home_Pic1.jpg" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic2.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic3.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic4.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic5.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic6.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic7.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic9.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic8.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic10.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic11.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic12.png" alt="Motivational Image" width="250" height="150">
</div>
<p align="center">...</p>
</div>
<footer>
<p>© Copyright 2014 All rights reserved </p>
<ul>
<li><img src="images/rss.png" width="16" height="16" /></li>
<li><img src="images/facebook.png" alt="Facbook" width="16" height="16" /></li>
<li><img src="images/twitter.png" alt="Twitter" width="16" height="16" /></li>
<li><img src="images/share.png" width="16" height="16" /></li>
<li><img src="images/bloggr.png" width="16" height="16" /></li>
<li><img src="images/google-plus.png" width="16" height="16" border="0" /></li>
</ul>
</footer>
</div> <!--end of wrapper-->
CSS:
div.images{
position:relative;
left:0px;
float:left;
width:765px;
margin:0px -5px;
}
If I am understanding your problem correctly, in a nutshell, floated elements do not add height to the container. There are a number of ways to correct this behavior. Float the parent element, specify overflow: hidden on the parent or use a clearfix hack http://css-tricks.com/snippets/css/clear-fix/.
There is a pretty indepth article on this here at stackoverflow:
Why doesn't the height of a container element increase if it contains floated elements?
I am trying to align several images that I have nested in a figure element side-by-side. I would like for each image to have its own, individual caption. However, when I add in the they stop aligning side-by-side. This is my current code;
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</figure>
Hope this can help, at least it works for me. I had the same problem in a bootstrap proyect and I've solved it using this code:
<ul class="list-unstyled list-inline text-center">
<li>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</li>
<li>
<img src="image1.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</li>
<li>
<img src="image3.jpg" alt= "image3" width="195" height="195">
<figcaption>image1</figcaption>
</li>
<li>
<img src="image1.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</li>
</ul>
The css for these classes in bootstrap.css is :
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.text-center {
text-align: center;
}
As already stated before, you should not/ must not use multiple figcaption tag inside a single figure.
You could bundle your images and their figcaption tags inside nested figure tags.
<figure>
<figcaption>Caption for the bundle of images</figcaption>
<figure>
<img src="picture1.jpg" alt="Description of picture 1">
<figcaption>Caption for Picture 1</figcaption>
</figure>
<figure>
<img src="picture2.jpg" alt="Description of picture 2">
<figcaption>Caption for Picture 2</figcaption>
</figure>
</figure>
You could do the following...
Do not include more than on figcaption in the figure. See http://html5doctor.com/the-figure-figcaption-elements/
Wrap the figures in divs and spans.
<div>
<span>
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</figure>
</span>
<span>
<figure>
<img src="image2.jpg" alt= "image1" width="195" height="195">
<figcaption>image2</figcaption>
</figure>
</span>
</div>
Then align it using css. See Align span next to each other
vertical-align:top;
You can play around with this here
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption
You shouldn't use more than one figcaption within figure
The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>).
see http://html5doctor.com/the-figure-figcaption-elements/
but if you insist on using multi figcaption per figure, you can do that by using css float:left
<figure>
<div style="float:left" >
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</div>
<div style="float:left" >
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</div>
<div style="float:left" >
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
</div>
<div style="float:left" >
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</div>
</figure>
http://jsfiddle.net/ZQLCq/1/
This doesn't answer your question, but... don't do that.
Only one element may be nested within a <figure>
You can have many images, but each figure should have a single caption.
Either use a single figcaption for the figure, or change your markup to this:
<figure>
<img src="image1.jpg" alt= "image1" width="195" height="195">
<figcaption>image1</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt= "image2" width="195" height="195">
<figcaption>image2</figcaption>
</figure>
<figure>
<img src="image3.pjg" alt= "image3" width="195" height="195">
<figcaption>image3</figcaption>
</figure>
<figure>
<img src="image4.jpg" alt= "image4" width="195" height="195">
<figcaption>image4</figcaption>
</figure>
If your images are displaying like zigzag in a row even after using the figure and figurecaption tags with css display:inline-block then do the following
<div class="container">
<figure>
<img src="image.jpg" width=150px; height=150px;>
<figcaption>image.jpg</figcaption>
</figure>
</div>
css:
.container{
display: flex
}
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