I'm in the process of learning but I have a problem. I have a footer done with the background-image in css, made into a link. Used text-indent: -9999px; to get rid of the H1 on top of the footer image. I was told to write the h1 in there to be semantically correct so search engines still see it. And then hide it with the text-indent. I want to put four social media icons on top of that footer that are clickable as a link. I keep getting stuck.
<footer id="footer">
<section id="socialmedia">
<a href="http://www.facebook.com/BenoitBelgium">
<img src="../images/facebook.png" width="56" height="54" alt="Facebook icon" title="Go to Facebook." />
</a>
<a href="http://www.facebook.com/brilliantben">
<img src="../images/pinterest.png" width="54" height="54" alt="Pinterest icon" title="Go to Pinterest" />
</a>
<a href="http://www.facebook.com/BenoitBelgium">
<img src="../images/twitter.png" width="54" height="54" alt="Twitter icon" title="Go to Twitter." />
</a>
<a href="http://www.facebook.com/BenoitBelgium">
<img src="../images/behance.png" width="55" height="54" alt="Behance icon" title="Go to Behance." />
</a>
</section>
<h1>Goodbye, feel free to follow</h1>
</footer>
And this is my CSS.
#footer {
background-image: url(../images/footer.png);
height:214px;
width: 960px;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
border-style: solid;
border-width: 1px;
}
#footer a {
text-indent: -9999px;
height:214px;
width:100%;
display:block;
}
This is the footer I am trying to make.
Thanks
It is the text-indent which makes the images invisible. Remove it.
#footer a {
height:214px;
width:100%;
display:block;
}
You need to create your icon links in css - you need one for each icon
.facebook a:link {
width: 214px;
height: add height here
margin-right: 15px;
display:block;
background:transparent url('../images/facebook.png')center bottom no-repeat;
background-size:25px 25px;
}
Put this div in you footer where you want it.
Repeat sets for other Icons
Matewka is right just remove the text-indent. You only need that to remove text you don't want to show on the site, but you want it there for seo bots to see.
Related
I am trying to add social media buttons to my WordPress page via HTML code:
However, they styling does not work, they take up the entire page and are much too big. Why does this happen, and can I fix it?
Here is the code:
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/facebook.png" width="35" height="35" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/google.png" alt="Google" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a>
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/pinterest.png" alt="Pinterest" />
</a>
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/email.png" alt="Email" />
</a>
</div>
When a style is being overwritten by another style, the best fix is to use a stronger selector:
#share-buttons a img { /* added 'a' */
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
For a more in-depth explanation of CSS specificity, read this CSS Tricks article.
instead, define a specific size for the 'a' tags and set the images to be 100% width.
#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}
also, remove the width parameter in the 'a' tags
Add this,
#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
text-decoration:none;
}
#share-buttons > a > img{
width:35px;
height:35px;
}
#share-buttons img {
max-width: 100%;
height: auto;
}
#share-buttons a {
width: 35px !important;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline-block;
}
I have looked around at google and looked at another question: Page elements moving on window resize and I still cannot find the answer to this. My problem is that when I resize the browser my top div element where my navigation bar is moves messing up how the website looks. Since the CSS has it a certain amount to the right CSS probably updates how the page looks since I am resizing it. How would I keep the elements from moving upon page resizing?
My current code
<div id="top" style="background-image: url(images/Home/space.gif); height: 120px; width: 100%; border: 1px solid black;">
<a href="contact.html">
<img id="buttoncontact" alt="Contact" src="images\Logo\contact.png">
</a>
<a id="plugins" alt="Plugins" href="http://bukkit.org/" target="_blank"> +Bukkit</a>
<img id="bukkiticon" src="images\Logo\bukkit.png">
<a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
<img id="twittericon" src="images\Logo\twitter.png">
<a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
<img id="yticon" src="images\Logo\youtube.png">
<img id="td6img" src="images\Logo\TD6.png">
<nav id="navigation">
<a id="navigation-anchor-normal" href="contact.html">
<img src="images\Home\mars.png">
</a>
<a id="navigation-anchor-normal" href="projects.html">
<img src="images\Home\merc.png">
</a>
<a id="navigation-anchor-current" href="home.html">
<img src="images\Home\sun.png">
</a>
<a id="navigation-anchor-normal" href="lessons.html">
<img src="images\Home\nept.png">
</a>
<a id="navigation-anchor-normal" href="donate.html">
<img src="images\Home\jupiter.png">
</a>
</nav>
</div>
CSS
#top
{
background-image: url("images/Home/stars.png");
height: 95px;
border: 1px solid black;
width: 100%;
position: fixed;
top:0;
left:0;
background: rgba(255,255,255,1);
z-index: 100;
-webkit-box-shadow:0px 0px 20px rgba(44,44,44,.3);
}
#buttoncontact
{
float:left;
}
#yticon
{
position:absolute;
right:300px;
}
#youtube
{
text-decoration:none;
position:absolute;
right:225px;
color:red;
}
#twittericon
{
position:absolute;
right:190px;
}
#twitter
{
text-decoration:none;
position:absolute;
right:130px;
color:aqua;
}
#bukkiticon
{
position:absolute;
right:95px;
}
#plugins
{
text-decoration:none;
position:absolute;
right:35px;
color:#FF8000;
}
#navigation
{
text-align:center;
}
#navigation-anchor-normal
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
#navigation-anchor-current
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
The only element that is not moving is the TD6img above the nav. Everything else is moving when I resize the window.
What I want to accomplish is having these elements stay put upon resizing the window and not move with the resizing.
This is only happening to this div element no other div element that I have under it.
What you are trying to do is creating a responsive site.
I highly suggest you to use existing framework for that, and not trying to redo all by your self.
For that, look at twitter bootstrap that is the most robust and efficient jquery / javascript responsive design framework.
If you still want help with your task have a look at this DEMO Not sure if this is what you were looking for but play around with it if you want. Also you can upvote my answer when you get enough rep. I swithed most of your position:absolute to float:right
If you are looking for something easy to use and doesn't require a lot of changes, you can also use the "framework" from here: http://www.responsivegridsystem.com/
It is not too heavy and only gives you what you need to make a site responsive. I am using this for a company.
Twitter bootstrap in my opinion is good but it is heavy and although most classes doesn't get loaded, changing/modifying the code is very hectic.
I want to have a button with an image and a link. Here is my style-code:
<style>
twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30%;
height: 30%;
}
</style>
and my body code:
<twitter href="#"> </twitter>
But it doesnt show any image. I tried a lot of different image-paths, but it just will not show...
oh. why not
<img src= "cima/social/twitter.png" />
<style>
a img {width:30%;height:30%;}
</style>
You HTML is invalid as you are using custom (non-valid) elements. Try
HTML
<a class="twitter" href="#"> </a>
CSS
.twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30px; /* or whatever value */
height: 30px;
}
I have following HTML output which i can not change. These are just two links, one of them is text link, while other is the image.
The problem is that the image is appearing bit higher position than the text. I am trying to align the text in the middle of the image but not getting any success.
I have tried setting the padding-top, margin-top and vertical-align to the image, but none of them seem to work. I'll appriciate any help.
HTML:
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
JSFiddle:
http://jsfiddle.net/e3vnQ/
Try using display: inline-block and vertical-align: middle: http://jsfiddle.net/e3vnQ/7/
add align="top"
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg" align="top">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
you can write the css like this :-
when anchor tag will come in p tag will stay vertical-align:middle; through mentioned below css
p{
font-size: 12px;
border: 1px solid red;
}
p a {
display:inline-block;
vertical-align:middle;
}
.link img{
margin-top: 5px;
}
or see the demo :- http://jsfiddle.net/e3vnQ/13/
I have the following code
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#Pictures {
position:absolute;
width:591px;
height:214px;
z-index:1;
left: 17%;
top: 30%;
text-align:center;
}
#Links {
width:600px;
height:30px;
z-index:2;
top: 184px;
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.links2 {
font-family: Broadway;
color: #FFFFFF;
text-decoration: none;
}
a:links2, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #333333;
}
#Main {
position:absolute;
width:800px;
height:600px;
z-index:2;
left: 15%;
top: 10%;
right: 15%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Logo {
position:absolute;
float: left;
width:104px;
height:100px;
z-index:2;
}
</style>
</head>
<body>
<div id="Main">
<div id="Pictures">
<div>
<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>
1
</div>
<div>
<img src="2.gif" alt="x" width="181" height="173" border="0" align="top" />
2
</div>
<div>
<img src="3.gif" alt="3" width="181" height="173" border="0" />
3
</div>
</div>
</div>
<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>
</div>
</body>
</html>
Which is displaying the picture layers vertically.
I am trying to make it o the 3 images are aligned horizontally with the text centered underneath them. Why are they defaulting to vertical, and can I change this behavior?
You don't actually need that much code to achieve what your're after. For example:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
One
</a>
<a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
Two
</a>
<a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
Three
</a>
<a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
Four
</a>
</div>
The trick to get the items to align horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as the containers instead of wrapping everything in extra <div>s. I have set the width to 25% (or 24.99% to avoid a rounding error in some browsers) so that they're spread out evenly across the page but you might want a different alignment which is easily done using margins/padding and/or a different width on the containers. Note also that when you set a text colour on the body {} you do not need to specify it again elsewhere apart from for links. Same thing goes for font-family, allthough this is also inherited by links. Good luck with the project!
Look at this code and test it: you can do the same thing in a more efficient, semantic and clean way:
Css:
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
Html:
<div class="imageBox">
<a href="#">
<img src="image1.gif" width="100" height="100"
alt="image 1" /></a>
<p>1</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image2.gif" width="100" height="100"
alt="image 1" /></a>
<p>2</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image3.gif" width="100" height="100"
alt="image 1" /></a>
<p>3</p>
</div>
That's all you need!
If you want to keep your code, there are no reasons to use the attribute align inside the img tag. You can use span instead of div, but in this case is better to keep using div and give them a width:
div#Pictures div
{
float: left;
margin-right: 5px;
}
This code:
a:links2
has no sense. links2 is a class made by you, not a pseudo-class or a pseudo-element.
I think a display: block; on your links2 class should put the links under the images correctly.
Also, to get the images to line up horizontally, use <span>s instead of <div>s inside the 'Pictures' div, and float them left.
#Pictures span
{
float: left;
margin-right: 5px;
}