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
Related
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 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;
Not sure what's wrong with this because currently it's not responding to the CSS. It just overlaps all the images and text on top of each other and the images are original size rather than the 50px by 50px as indicated in the CSS.
HTML:
<p> Connect with Steven on </p>
<div class=socialmedialinks>
<a href="https://www.facebook.com/Established.in.1995" class=links> <img src="FBProfilePic.jpg" alt="Facebook">
</a> Facebook
<a href="http://twitter.com/stevenperkinsii" class=links> <img src="TwitterProfilePic.jpg" alt="Twitter">
</a> Twitter
<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=links> <img src="LinkedInProfilePic.jpg" alt="LinkedIn">
</a> LinkedIn
<a href="http://www.stevensperkins.wordpress.com/" class=links> <img src="WordPressProfilePic.jpg" alt="WordPress">
</a> WordPress
</div>
CSS:
.socialmedialinks {text-align:justify; width:50px}
.links{
display: inline-block; width:50px; height:50px;
}
Steven do you have an example of the output you're looking for? You've got a wide variety of issues going on here that are creating issues with your output if I understand correctly what you're trying to do.
First and foremost, you don't have any styles constraining the size of the images, you need the following style definition:
.links img {
max-width:50px;
max-height:50px;
}
Regarding positioning of the text relative to the images, you've got structural issues preventing things from displaying the way you want them to. You also need to surround your class names with quotes really, though that's not a factor here. I've reworked your code slightly to make what I think you want, if there are specifics to what I've done that aren't what you're looking for let me know and I'll help you get where you want to be: https://jsfiddle.net/7k5nn1n7/
Is this what you are trying:
<p> Connect with Steven on </p>
<div class="socialmedialinks">
<div class="links"><img alt="Facebooki" src="FBProfilePic.jpg">Facebook</div>
<div class="links"><img alt="Twitter" src="TwitterProfilePic.jpg">Twitter</div>
<div class="links"><img alt="LinkedIn" src="LinkedInProfilePic.jpg">LinkedIn</div>
<div class="links"><img alt="WordPress" src="WordPressProfilePic.jpg">WordPress</div>
</div>
CSS:
.socialmedialinks {
width:100%;
}
.links{
float:left;
padding-left:2%;
}
.links img {
width:50px;
height:50px;
}
You can give each link a class name.
add title="" for the link instead of alt="".
remove the image tags.
you can use the CSS to add the image to the link.
here is the code for html:
here is the CSS:
.socialmedialinks a:link,
.socialmedialinks a:active
.socialmedialinks a:visited{
text-indent: -9999em;
width:50px;
height:50px;
margin-right: 3px;
float: left;
padding:0;
}
.facebook {background: url('FBProfilePic.jpg') no-repeat;}
.twitter{background: url('TwitterProfilePic.jpg') no-repeat;}
.linkedin{background: url('LinkedInProfilePic.jpg') no-repeat;}
.wordpress{background: url('WordPressProfilePic.jpg') no-repeat;}
Please if you have any question let me know. thanks
Try The Following code:
HTML
<p>Connect With Steven on </p>
<h4 class="social">
<img src="facebook.jpg" alt="Facebook">Facebook</h4>
<h4 class="social">
<img src="twitter.png" alt="Twitter">Twitter</h4>
<h4 class="social">
<img src="youtube.png" alt="Youtube">Youtube</h4>
<h4 class="social">
<img src="instagram.jpg" alt="Instagram">Instagram</h4>
CSS
img{
height: 50px;
width: 50px;
margin-right: 4px;
}
h4{
width: 150px;
float:left;
}
Here is the sample Fiddle: Fiddle
i want to make image in center but not able to do it
my aspx code is
<figure class="centercarosal">
<img src="UImages/<%#Eval("Logo") %>" style="height: 100px" alt="">
</figure>
and the class for centercarosal is
.centercarosal{
text-align:center!important
}
I think you are missing the browser specification for both please try this
.centercarosal {
text-align: -moz-center;
}
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>