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;
}
Related
I have an image and I'm looking at basic customisation for a small website I'm creating in HTML.
I understand you can chamfer an image, as seen on this question here, that gives a 45Degree cut.
I'm hoping for a more rounded Chamfer on each corner? (I believe it's called a Fillet but I'm not 100% sure of the correct terminology.
As seen in the second picture:
Using border-radius: 16px 16px 16px 16px; works by putting it in the img class, but I don't want all images affected.
What do I need to do to allow only select images to be chamfered?
I tried this, but it didn't work:
.img-chamfer {
border-radius: 16px 16px 16px 16px;
}
<div class="img-chamfer">
<img src="Test.png" >
</div>
My exact code can be found here: https://jsfiddle.net/netazv40/
.main {
color:#29abe2;
text-align: center
}
.img-wrapper {
display: inline-block;
}
.img-wrapperPadding {
display: block;
margin: 0 auto 32px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div class="main">
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
</div>
I only need the larger image to be affected/chamfered.
solution after providing your fiddle
You can use the following CSS rule:
.img-wrapperPadding img[width="350"] {
border-radius:16px;
}
Demo: https://jsfiddle.net/netazv40/3/
... or add a class to your image and solve it like the following:
.rborder {
border-radius:16px;
}
<img class="rborder" src="http://placehold.it/100x100"/>
Demo: https://jsfiddle.net/netazv40/1/
solution #1 (using flexbox):
.img-chamfer {
border-radius:16px;
display:inline-flex;
overflow:hidden;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
solution #2 (using inline-block):
.img-chamfer {
border-radius:16px;
display :inline-block;
overflow:hidden;
font-size:0;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
You can use border-radius like,
div {
border: 3px solid;
border-radius: 30px;
}
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 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>
I need to align image on left and text on right. I am using the following css.
body {} #slideshow-nav {
width: 700px;
height: 30px;
position: absolute;
z-index: 999;
bottom: 0;
left: 11px;
text-align: center;
text-decoration: none;
}
#slideshow-nav a {
background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
width: 26px;
height: 26px;
text-indent: -999px;
display: inline-block;
text-decoration: none;
margin: 7px;
text-indent: -9999px !important;
margin: 7px;
text-decoration: none;
background-position: center;
border: none;
outline: none;
}
#slideshow-nav a.activeSlide {
background-position: 0 -1000px;
background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
display: inline-block;
background-position: center;
text-decoration: none;
border: none;
outline: none;
}
.page-slideshow {
position: relative;
margin-bottom: 15px;
text-decoration: none;
background: #d4ecef;
}
.page-slideshow.narrow #slideshow-nav {
width: 460px;
left: 0;
text-decoration: none;
}
.di-hero {
background: transparent;
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}
p.more {
margin: 8px 0 0 0;
float: right;
overflow: hidden;
color: #BC1E04;
text-decoration: none;
color: #bc1e04;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
h3 {
display: block;
color: #514c44;
font: 18px/24px Georgia, "Times New Roman", Palatino, "Palatino Linotype", "Book Antiqua", serif;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
div.slide-content img {
margin: 0 20px 0 0;
border: 5px solid #5999a2;
}
p {
color: #2e2e2a;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
font: 12px/18px Helvetica, "Lucida Sans", "Trebuchet MS", Arial, Verdana, sans-serif;
text-align: center;
float: right;
}
p.more:hover {
text-decoration: underline;
}
.slide-content {
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}
<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<img src="." width="152" height="150" alt="Meal Planning Made Simple">
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<img src="" width="152" height="150">
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We’ve got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>
Now my image is on the Left and text on the right. But it is not properly aligned. I need text on the same line and on the right to the image. Which style element is missing ..? please help me.
Here is the fiddle link
just added following css
.imgDes {
margin-left: 180px;
overflow: hidden;
text-align: left;
}
.imgDes p {
text-align: right;
}
<div class="slide-content">
<img src="http://static.adzerk.net/Advertisers/fdec4733b4814d9e958b7f86c25020b5.jpg" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<div class="imgDes">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</div>
I'm not sure if this actually helps you but here is how I probably would have done it:
.container {
width:500px;
}
.imageclass {
float:left;
width:200px;
height:20px;
}
.textclass {
float:left;
width:300px;
height:20px;
}
<div class="container">
<p class="imageclass"><img src... /></p>
<p class="textclass">text...</p>
</div>
I used this exact code in one page I did, and it worked fine getting the paragraphs in the same line. You can probably change the paragraphs for divs, and you of course have to change the numbers so it fits on your page.
<table width="100%">
<tr>
<td align="left" valign="top">image</td>
<td align="left" valign="top">text</td>
</tr>
</table>
this way the text and the picture are in the same line
You could allways use tables in divs (Fiddle example here) like this:
<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com" style="float:left" >
</td>
<td>
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Meal Planning Made Simple" style="float:left">
</td>
<td>
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" style="float:left" >
</td>
<td>
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
</td>
<td>
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We’ve got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</td>
</tr>
</table>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>