i am new to HTML 5 , but i want to place a text next to the logo image. I have tried the following code but does not work
<header>
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/cagd_logo.jpg" alt="CAGD logo"
style="width:30px;height:30px;"/>
</a>
<h1>CAGD Data Centre Access Form</h1>
</header>
the text is wrapped with the h1 element.
the css codes for the header
header {
background-color:ash;
text-align:left;
height:35px;
padding:12px;
}
any help for me.
h1 elements by default display as blocks. Use span
header {
background-color: ash;
text-align: left;
height: 35px;
padding: 12px;
}
<header>
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
</a>
<span>CAGD Data Centre Access Form</span>
</header>
If you have no options to change the element type to span, then use display:inline;
header {
background-color: ash;
text-align: left;
height: 35px;
padding: 12px;
}
h1 {
display: inline;
}
<header>
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
</a>
<h1>CAGD Data Centre Access Form</h1>
</header>
Or, use the :after pseudo selector
header {
background-color: ash;
text-align: left;
height: 35px;
padding: 12px;
}
#logo:after {
content: 'CAGD Data Centre Access Form';
}
<header>
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
</a>
</header>
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;
}
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I am new to html and css. I am trying to make a website. I have four images on a line that works as links. When you hold the mouse over them, they turn transparent. I also want a headline to show up over the transparent image when you hold the mouse over it. But when I put text there it ends up on the line over the images instead of on top of them. The text also do not appear only when the mouse is over it, but it is there all the time. Here is my css:
p2 {
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
Here is the html:
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Please help me if you know how to do this, thank you. <3
Try assigning z-index css property to text
You can set your top margin to a negative value.
margin-top: -100px;
This is wrong:
p2 {
Change it with:
p {
You need to nest all the <a>s correctly. You didn't close a lot.
And a solution for you would be, you might need to change the code a little bit:
a {
position: relative;
}
span {
position: absolute;
color: white;
font-size: 15px;
font-family: 'Verdana';
bottom: 0;
left: 0;
right: 0;
background: #000;
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214" />
<span> TITLE THAT I WANT OVER THE FIRST IMAGE </span>
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214" />
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214" />
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214" />
</a>
You can use position:absolute and put <p> child of <a> with a class
CSS
p2{
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
.LINK1 p {
position: absolute;
top: 20px;
padding: 0px 20px;
}
HTML
<a href="LINK1" class="LINK1">
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Note: Adjust your needs
DEMO HERE
I have a collection of images sorted into three groups; a group with all the images, a group with the first half of the images and a group of the second half of the images. I want to put the images in a line, but the last image keeps dropping to the bottom... how do I fit this is the same line?`
#firstlot {
z-index: 10;
position: absolute;
left: 61%;
top: 3.5%;
}
#secondlot {
z-index: -5;
position: absolute;
left: 61%;
top: 3.5%;
}
#home {
width: 17.5%;
}
#home2 {
width: 17.5%;
}
#thecoopertimes {
width: 38.5%;
}
#thecoopertimes2 {
width: 38.5%;
}
#aboutme {
width: 25%;
}
#aboutme2 {
width: 25%;
}
#contact {
width: 21%;
}
#contact2 {
width: 21%;
}
<div id="allbuttons">
<div id="firstlot">
<a href="http://www.coopertimewell.com/index">
<img id="home" src="coopertimewell/buttons/home1.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes" src="coopertimewell/buttons/coopertimes1.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme" src="coopertimewell/buttons/aboutme1.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact" src="coopertimewell/buttons/contact1.png" />
</a>
</div>
<div id="secondlot">
<a href="http://www.coopertimewell.com/index">
<img id="home2" src="coopertimewell/buttons/home22.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme2" src="coopertimewell/buttons/aboutme22.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact2" src="coopertimewell/buttons/contact22.png" />
</a>
</div>
</div>
I know when you look at the code you will say to make an unsorted list instead, but I'm doing it this way for a reason.
It's because you have extra spaces in your code, check here :
Removing whitespace between HTML elements when using line breaks
Thus you can remove them or give a smaller width for each elements.
Example, if you don't format the HTML you won't have your problem:
<img id="home2" src="coopertimewell/buttons/home22.png" /><img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
The problem is that if you adds all the numbers % on your images, it provides over 100%. Then you have space between your images, which you should also take into account.
I have tried and it resolves itself when you corrects the numbers.
Please try a vertical-align:top; to all div that is getting aligned to bottom
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.
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;
}