I'm working on a page in html. I was able to include an image in a box but I don't know why it is not visible. Should I have to include it somewhere? It is in the directory with all the others images of the project. Here is the view in my page
And here is my code:
HTML
<div id="LibraryContent"style="text-align:center;">
<div id="adbox">
<img src="../images/thriller.jpg" align="left" style="width:100px;height:100px" />
</div>
<section class="container">
<nav>
<style>
div {
height: 650px;
width: 850px;
padding: 3px;
border: 3px solid;
vertical-align: middle;
}
</style>
</nav>
</section>
</div>
CSS:
#LibraryContent {
background: transparent;
vertical-align: top;
display: table-cell;
padding: 8px 0 0;
position: fixed;
top: 10%;
left: 50%;
margin-top: -50px;
margin-left: -300px;
}
#adbox {
width: 840px;
height: 150px;
margin-top: -9px;
background-color: dimgrey;
}
As I had some problem posting the code I take away the body part. Hope you can help me. It is just a bug or maybe something with the type of the image. All the images are in the directory ../Web/Music/images. I'm not using javascript (just to be precise)
according to the above shown image the problem is related to the path
try to check that the path is correct or not
check that the file type you used is correct or not
check the case of file like you used thriller.jpg instead of Thriller.jpg
Related
I'm stumped. I have no idea why this won't change the image source on mouse over ... I created a separate test page and did this no problem, but it won't work with my actual div page ...
HTML
<div id="nav">
<div id="nav_left">
<table class="nav_left">
<tr><td>
<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png'" onmouseout="this.src='arrowdown.png'"/>
</td></tr>
</table>
CSS
#nav {
background-color: #272729;
width: 99%;
margin: 0 auto;
height: 55px;
}
#nav_left {
width: 30%;
display: inline-block;
height: 55px;
}
table.nav_left {
padding: 0;
margin: 0;
border-right: 1px solid black;
height: 55px;
width: 10%;
text-align: center;
float: left;
margin-right: 1em;
}
If your image is not loaded or size of image is too small to recognize a mouseover event, it will fire the mouseout event as well.
your code looks fine just add some height and width to image.
Feedle shows working example of the same
<img style="height:100px; width:100px;" src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>
Throw in semi colons before you end the script as shown below and it should work.
<img src="arrowdown.png" onmouseover="this.src='arrowdownhover.png';" onmouseout="this.src='arrowdown.png';"/>
I actually had to add:
img {
position: relative;
z-index: 1000;
}
to get this to work.
I had thought that Mahesh was right, but as soon as I removed the <td> tags from the img, it worked perfectly fine at the size it was at.
I'm guessing the img was just behind the <td> cell. The img css was something I forgot to post, I had not specified a position.
Thanks for the help everyone!
I have the following fiddle
The HTML is created by javascript. I can add/change the styles to the div's if needed but I cannot change the order of the HTML code.
I know I can use:
text-align: center;
But there is a catch :) The div containing the 4 images is put in the HTML code before the <h3> is. Since I cannot edit the HTML order I figured to lower the DIV with the images using margin-top: 70px; The problem is that this has an effect on the text in the <h3> which isn't centered anymore.
How to solve this? (pref with css3)
It's okay if the values of the DIV's in the HTML need to be changed in order to fix it
(I can change them)
Thanks a lot
The HTML code:
<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
</div>
<h3>Options</h3>
<h4>Images for size 119</h4>
</form>
</div>
The CSS:
div.solitaireprefs {
background-color: #fff;
border-radius: 7px;
border: 1px solid #ddd;
}
div.solitaireprefs form {
padding: 0 15px;
}
div.solitaireprefs h3 {
background: #e9e9e9;
margin: 0 -15px;
padding: .7em 0;
text-align: center;
border-radius: 7px 7px 0 0 ;
}
The real answer to the question is to figure out how you can arrange the dom elements correctly. Semantics is more important than you think. But since you are already kinda hacking the visuals, the quickest and dirtiest hack is to fix your padding:
padding: .7em 45%;
on the div.solitairprefs h3
Tweak the percentage to get the middle, but the missing 10% of the sum of left and right padding on the h3 is the space between where the options text appears (so tweak accordingly).
And since you're already manually centering, you can go ahead and get rid of the
text-align: center;
Instead of float:right; and margin:top on the element that contains the images, position it absolutely.
{ position: absolute;
top: 70px;
right: 10px;
}
Using absolute positioning takes it out of the flow of the document; which is what is messing up the centering on your h3.
Before I put this code in:
<div id="bannerInRight"> <img src="images/race.jpg" width="475" height="258"/></div>
I had a "nivo slider" in its place. I tried to delete all the nivo code I could find, but now the image isn't appearing at all.
Below is my CSS:
#bannerInRight {
float: right;
height: 261px;
margin: 8px 28px 20px;
width: 475px;
}
And here is the live link if that helps at all: http://www.lymemd.org/indexmm6.php
Thank you in advance.
Your stylenew.css file includes:
#bannerInRight img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
which causes the image to remain hidden.
Remove this rule and the image shows up.
Here is my code.
HTML:
<div id="socmed">
<div id="icons">
<div id="fb"></div>
</div>
</div>
CSS:
#socmed {
height: 100px;
padding-top: 70px;
padding-bottom: 50px;
background-color:rgba(247, 34, 34, 0.7);
width: 100%;
}
#icons {
width: 300px;
height: 75px;
margin: 0px auto;
}
#fb {
height: .89in;
width: .89in;
background-image:url("../images/facebook_dark.png");
}
#fb:hover {
height: .89in;
width: .89in;
background-image:url("../images/facebook_active.png");
Currently, neither logo shows up in my "socmed" div. Anyone know what I'm doing wrong? Stumped.
check the following steps:
1.Image contains folder path (inspect the path)
2.If image size is big it won't appear full image.so it will appear partial image according the mentioned dimension.for that problem use background-size property
Take a look :DEMO
I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!