I'm trying to put an link below an image and for whatever reason, the link just keeps going to the side (right) of the picture. The image displays fine and the link works, but I just need it underneath the picture.
Any ideas?
HTML:
<div class="images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test</a>
</div>
CSS:
.images {
position: absolute;
left:10px;
top: 200px;
font-size: 120%;
}
I'm new to HTML/CSS so if anyone can explain in easy terms, I would really appreciate it. I have tried lots of different things such as span, align etc and it just won't work!
If I use a p statement instead of a ULR (h ref) the text does go below the image, so I'm baffled!
Images are by default inline-element 8though treated as inline-block). All you need to do, is to set the image as block-level element with : img { display: block; }
img {
display: block;
}
<div class="images">
<img src="https://via.placeholder.com/100.jpg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>
You can use display flex to make this a column.
Explanation: https://www.w3schools.com/css/css3_flexbox_container.asp
.images {
position: absolute;
left: 10px;
top: 200px;
font-size: 120%;
display: flex;
flex-direction: column;
}
<div class="images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href="https://www.google.com">Test </a>
</div>
You could add the break line tag below the image tag.
<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>
Related
Im new to css and trying to get an image to overlay another image multiple times. So the orange dots overlay the images. In the same spot for multiple images.
code
So what you need is to play with css position property.
give to parent element position: relative and to the overlaying child position: absolute, then play with the exact position using left and top properties.
should be something like this:
.parent {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
left: 10px;
top: 10px;
}
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
<div class="parent">
<img width="170" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img width="40" class="badge" src="https://image.flaticon.com/icons/png/512/1977/1977845.png"/>
</div>
Can someone show me how to put text under every individual image and also images must be in same line which is working? I understand that default display for "a" tag is block and for "img" tag is display inline.
This is my code:
HTML
<div class="other-content">
<div class="search">
<h1>We Offer best experience in the world</h1>
<img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">
</div>
</div>
CSS
.other-content .search {
background: #ffffff;
height: 300px;
text-align: center;
}
.other-content .search p{
display: inline;
}
Just put the picture with the text in separate divs and make the divs width smaller until the text is below the picture. And with these divs, assign display:inline-block;
Currently you can see on that the central image and the button underneath aren't grouped together which I would like them to be. Horizontally it spans fine but the button overlaps vertically onto the image depending on the window size. I would like the button to be in a fixed position directly underneath the image regardless of the window size.
You can see how I've placed the button underneath below. Can anyone see where I am going wrong? Cheers
Here is the relevant code
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
}
#mainText {
position: fixed;
top: 35%;
left: 33%;
}
#yesButton {
position: fixed;
top: 59%;
left: 33%;
}
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
================= HTML =================
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
</div>
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
Pol is correct, position absolute is what you're looking for.
But you need to change more than just CSS in this case.
Wrap your div mainText around your yesButton div and make sure your yesButton's position is set to absolute.
</div>
<div id="mainText">
<img src="images/mainText.png" height="160" width="340">
<div id="yesButton">
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a>
</div>
</div>
</div>
You will also need to reposition the yesButton but I have a fiddle that shows a good indication of where you might want it.
https://jsfiddle.net/pjcscc2a/
Moving the "yesButton" DIV into "mainText.png" and directly below the "maintext.png" image tag worked for me. I also had to comment out the CSS rule assigned to "yesButton"
So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.
This is the CSS:
<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
margin:auto, auto;
}
</style>
This is the HTML:
<div class="main_block">
<img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"> <img class="social" src="http://lorempixel.com/400/200/" alt="Google +"> </a>
</div>
Help is much appreciated.
FIDDLE
You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}
I'm not sure if you wanted them to stack over each other, or just to center them.
Stack them over each other
JSFiddle
To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.
Just center them
JSFiddle
This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.
You have to set a width on the main-block class and remove the comma.
Your style should look something like this:
.main_block
{
width: 40em;
margin:0 auto;
}
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.