...

View Full Version : CSS Layout & change image on mouse over



kiwidj
05-11-2010, 12:02 AM
Hi,

I'm having trouble getting this CSS layout to work:

here's the HTML:


<div id=preF_computername>
<fieldset>
<legend>Please enter a valid computer name:</legend>
<div id=preF_computername_embed_1>
<input name="preF_PCName"></input>
</div>
<div id=preF_computername_embed_2>
<span id=preF_PCNameBtn class=btn></span>
</div>
</fieldset>
</div>

Here's the CSS layout:


#preF_computername {
width: 100%;
height: 100px;
padding: 4px 10px 4px 10px;
}
#preF_computername_embed_1 {
width: 500px;
height: 100px;
float:left;
}
#preF_computername_embed_2 {
width: 250px;
height: 100px;
float:right;
}
preF_PCNameBtn.btn {
position:relative;
top:15px;
left:15px;
background-image:url('img/arrow.jpg');
}
preF_PCNameBtn.btn:hover {
position:relative;
top:15px;
left:15px;
background-image:url('img/arrow_onhover.jpg');
background-repeat:no-repeat;
}
legend {
border: 1px solid rgb(55, 116, 171);
padding: 2px 6px;
}
fieldset {
border: 1px solid rgb(55, 116, 171);
width: 20em;
height:80px;
width:780px;
padding: 2px 20px 4px 20px;
}

The Problem I'm having is the CSS layout is not applying for the span 'preF_PCNameBtn.btn' or 'preF_PCNameBtn.btn:hover', I'm pretty sure there's some basics that I've missed here..?

also I would like the arrow.jpg to change on mouse over, I want to make sure the code is correct for this also.?

Thanks!

frankle
05-11-2010, 05:02 AM
Any link please.

Regards.

kiwidj
05-11-2010, 05:07 AM
this is for an HTML application - so I can't provide a link sorry

kiwidj
05-11-2010, 05:41 AM
okay I've got the CSS styles working now but I've got a different issue now:

I'm now using the following:



<div id=preF_computername>
<fieldset>
<legend>Please enter a valid computer name:</legend>
<div id=preF_cname_1><input name="preF_PCName"></input></div>
<div id=preF_cname_2><a href="default.asp"></a></div>
</fieldset>
</div>





#preF_computername {
width: 100%;
height: 100px;
padding: 4px 10px 4px 10px;
}
#preF_cname_1 {
width: 500px;
height: 70px;
float:left;
}
#preF_cname_2 {
width: 250px;
height: 70px;
float:right;
}
a {
position:relative;
top:15px;
left:15px;
background-image:url('img/arrow.jpg');
}
a:hover {
position:relative;
top:15px;
left:15px;
background-image:url('img/arrow_onhover.jpg');
}


The problem I have now is that the background image is not displayed at all unless there is text in the <a> tag

e.g. if I use:



<div id=preF_computername>
<fieldset>
<legend>Please enter a valid computer name:</legend>
<div id=preF_cname_1><input name="preF_PCName"></input></div>
<div id=preF_cname_2><a href="default.asp"></a></div>
</fieldset>
</div>


..then NO image (arrow.jpg) is displayed??

whereas if I use:



<div id=preF_computername>
<fieldset>
<legend>Please enter a valid computer name:</legend>
<div id=preF_cname_1><input name="preF_PCName"></input></div>
<div id=preF_cname_2><a href="default.asp">SOMETEXT</a></div>
</fieldset>
</div>


..then part of the image is displayed but only behind the text and not in the rest of the div..?

the main trouble with that is I dont' want any text as the image is going to be a link to a vbscript subroutine...

kiwidj
05-11-2010, 06:38 AM
I managed to solve the problem, for some reason the CSS wasn't inheriting the size of the background image..

once I specifically declared a height and a width all started working I am not 100% sure as to why I needed to do that but it solved my problem..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum