I have this demo: http://vestigedayz.com/sys/adminexec/Test/
I have put a image on it (right, that folder icon) but i don't want to make it move when I randomly type on the keyboard.
.image{
padding-left:1100px;
position:fixed;
}
<a href="">
<div class="image">
<img src="images/suspect.png" width="160" height="140" alt="">
</div>
</a>
Change right and top to what you want.
position: absolute;
right: 50px;
top: 10px;
Lose the:
padding-left:1100px;
position:fixed;
Related
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>
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>
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"
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.
Im pretty new to html/css so maybe this is a really simple thing but none of my images links on one page of the site show up when I try to click on them the image shows but the link never appears and the cursor never changes anyway here is the relevant section of code
<div id="content">
<div id="imagelink">
<img border="0" src="Images/pic.png" alt="A Picture" />
</div>
#imagelink {
background-image:url("Images/file.png");
display:block;
height:224px;
width:401px;
text-indent:-9999px;
position:absolute;
left:15%;
top:25%;
}
<div id="imagelink">
<img border="0" src="Images/pic.png" alt="A Picture" />
</div>
Try not to use the img tag and instead, use a div for your image:
<a href="#" target="_BLANK">
<div class="myImage"></div>
</a>
.myImage{
background: url(Images/file.png) no-repeat top center;
height: 224px;
width: 401px;
}
if your server is case sensitive change Images to images
add ./ or http://domain.com/path/to/images/ to the paths