|
CSS - Css Onmouseover Using Both Image And Text
hello,
I did search the forum for this but it may be unique, I am using css onmouseover effect to change the background image of my menu from one image to the other to ceate the lighted effect. I am also using text display over these images. The text also "lights-up" with the hover effect. the problem i have though is I would like the text part to "light-up" with the image when the cursor is over the image.... not like it is now with the image lighting up before the text. see URL for details. I realize I could just use an image entirly, but since my menu is generated by php, this is not an option. Edit I did find one source for getByID, but i cannot seem to make it work.... help is appreciated. Thanks in advance, Similar TutorialsGood Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. I finished a website for a friend located at www.woodenitbenicecfw.com and on all my systems I have tested it looks fine but my friend says that some people are telling her that the image is over the text and I am not sure why I dont know why I cant see it because on my end it looks fine. Can someone please have a look and let me know what they see and what the problem is I am sure that it is probably a problem with the div. Thanks Tim Hello all, I have this code that works well on IE and not on FF , I simple want to have the text to have a background image. Code: <img style="position:absolute; z-index:0;" src="images1.gif" alt="" />
<p style="position:absolute; z-index:1">
<%
response.Write("This text has a background image from images1.gif")
%>
</p>
Here is what I have now... Code:
<style type="text/css">
#outter {
width : 400px;
height : 80px;
padding : 0;
margin : 0;
background-image: url(your image);
border : 1px solid green;
position : relative;
}
#inner {
position:absolute;
z-index : 2;
left: 50%;
top: 50%;
border : 1px solid blue;
margin-top : -10px;
margin-left : -75px;
}
</style>
<div id="outter">
<div id="inner">Needlepoint Shop Guilford</div>
</div>
How would I do the same thing, but with an actual image, not a background image? Thank You! Cam What is the css to make it so text sits next to an image rather than automatically being placed underneath. Im not really sure how to explain it. I do know that before i made use of hspace and align to make it work... I'm trying to do a layout like this: wink zone. net / ap.jpg I know how to do the header part of it but the end of the image of the person and the text parts are bit harder. Could you give me some help? I guess the best way to do this is use floats? Hi there, I am having trouble making a nimage appear on the top of some text. I have a transperent image, but the text is appearing ontop... I need the image to appear on top. This is the code: Code:
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td style="BACKGROUND-IMAGE: url(img/template/bg_one.jpg); WIDTH: 357px; " align="center">
<div style="position: relative; z-index: 1000; BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE: url(img/template/image_to_appear_on_top.gif); WIDTH: 357px; height: 275px; BACKGROUND-REPEAT: no-repeat;"> <table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td valign="top" align="center">
<div style="z-index:-900;">
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
<p>test text </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Any ideas what I have wrong? Hey folks, if you look at this page in FF, it's doing what i want. Specifically, the first bike is 'SOLD'. However, in IE it displaces the magnifying glass/info icon, as well as the text in the box. How do i got about positioning the text so it doesn't do that? Here's the CSS; Code:
.sold {
position:relative;
top:-115px;
left:10px;
z-index:100;
color:#ff0000;
font-size:60px;
font-weight:bold;
}
* html .sold {
left:-190px;
top:-50px;
height:1%;
}
Thanks! will some one please guide and advise me is it possible to have image on the left side and the text relating to that image on the right side to match both width and height without using tables.If it is possible please advise me the code. thanks Right now, I'm using CSS to have text overlap an image. I did this simply by having the placement code for the text appear after the placement code for the image in my .shtml file. Is this the correct way of doing this? Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible? ljCharlie Hello, I have a <h2> header consisting of "Contacts". I want an add button to the right of the header. The add button should be an 32 px image which changes upon hover, and the words "new" below the image. The image "new.png" is 32 px wide and 64 px high, and consists of the two images on top of each other. The following code is close but not perfect, and have several questions: How should I push the text under the image? Should the anchor go inside of the h2 tag? Any other improvements? Thank you Code: <style type="text/css">
a.button{
background-repeat: no-repeat;
background-position: 100% 0px;
height: 24px;
width: 24px;
margin: 0 0 10px 0;
padding: 4px;
}
a.button:hover{background-position: 100% -32px;}
.icon-32-new { background-image: url(new.png); }
</style>
<h2>Contacts
<a href="index.php?page=add_contact" class="button icon-32-new">New</a></h2>
I figured out how to put the text on top of my background Div tag image from a previous post, but this has now shown me another problem. I now need the text to be on top of the white shape only, and not spill onto the gray area. If I remember correctly (I don't have the .ai file any more) the white area is about 500px in width. But whenever I adjust the margins to reflect this, the right side just will not comply. I'll post the two div classes' code below and maybe someone can lend me a hand. Code:
#mainContent {
background-color:transparent;
background-image:url((URL address blocked: See forum rules));
background-repeat:no-repeat;
background-attachment:scroll;
background-position:0% 0%;
height:610px;
margin: 10px;
margin-right: 1cm;
overflow:auto;
padding-top: 1cm;
padding-left: .6cm;
width:550px;
}
#mainContentWrapper {
float:left;
margin-right:11px;
min-height:100%;
width:550px;
}
I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div. http://kansasoutlawwrestling.com/v3/index.html |
|||||||