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.
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!
This is my first time using the service, so I'll try to be specific.
I'm trying to create a land page for my domain, but when I place the logo for the top menu, and add another element, the element does not respect the space of the logo, and it stays in front of the logo.
Here's the CSS I'm using:
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
}
#header .hwrap {
display: block;
width: 980px;
height: 40px;
margin: 0 auto;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
And here is an excerpt of the HTML I'm using:
<body>
<div id="header">
<div class="hwrap"><h1 class="menuLogo">fhtgames.com</h1>Random text</div>
</div>
</body>
Fairly simple.
EDIT: What I want is the logo to overflow the menu bar, and add the menu options to the right of the logo, still inside the .hwrap element. I used the logo with an <h1> element and placed the image as a background to avoid the image to be right-clicked and be saved.
But when I try to add the menu and the link to the logo, I notice that Google Chrome renders the page with the logo link for the full width of the .hwrap element, and adding anything else, makes the logo to stay behind the new elements.
Here's a link of the screen: http://img.fhtcentral.com/stack/screen001.png
I am using an HTML5 Reset stylesheet (found here) and I'm pulling the latest jQuery library from Google servers.
I've done this lots of times before, without any problems whatsoever, so I really don't know what am I doing wrong. I am sorry if this looks completely noobie question, but I just can't see the mistake.
Thank you for you time.
EDIT: The problem has been solved. The answer is right below. Thank you all for your elp :D
The text appears above the logo, because you have set the logo image as a background. So html intends that you want, as the word says, the image as background!
To avoid this I guess you have set the display: block to your h1.menuLogo. The right way would be display: inline-block.
#header .menuLogo {
display: inline-block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
You can find a working fiddle right here.
The rest is about adjusting with margin and padding.
For further information about your problem you can read about the difference of block/inline-block here.
If you need other suggestions please let me know!
Best regards, Marian.
Hope this help you.
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
overflow:hidden;
position:relative;
}
#header .hwrap {
display: block;
width: 980px;
margin: 0 auto;
color:#fff;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5);
text-indent: -9999px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}
JSFiddle Link.
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
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
On a webpage I've got a list of thumbnails with link boxes on top of them. The are wrapped by a link tag and are clickable. However, in the link boxes on top of them which has a slightly transparent background it is only the text and not the entire box which is clickable.
This is the HTML code for one set of thumbnail and link box:
<article class="recent-post-item">
<h2>
Something
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
And this is the corresponding stylesheet:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
And heres a working site showing the problem: http://fuckthepony.dk/wordpress/ (the thumbnails I'm talking about are those in the middle column)
Some people have told me that they do not experience the problem. I've tested on Linux with both Opera, Chrome and Firefox and the problem is persistent across all of these browsers.
I concur with the comments above but to make the whole transparent block clickable you would need to also take the padding off of the h2 and add the padding to the a tag instead.
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
This is because a elements are inline elements, so they don't take all parent's width available. You can add this rule to your css:
#column-2 h2 a {
display: block;
}
That's just because the a element has not display:block by default.
Just add this little line :
#column-2 h2 a { display:block; }