HTML Forum

**ADeacon** · 10-21-2008, 04:10 PM

For some reason, only a portion on the images that I am using as links under "What Are You Looking For?" are being displayed. Any thoughts?

http://www.drawninwardmedia.com/nursecore/index.html

I'll include the HTML/CSS below:

HTML
_____

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome to NurseCore</title>
<link href="styles/site-style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

<div id="nav">

<div class="left"></div>

<div class="right"><img src="images/home_right_apply_top.jpg" /><br /><a href="#" style="text-decoration:none;"><img src="images/home_right_apply_button1.jpg" /></a><img src="images/home_right_apply_bottom.jpg" />

</div>

</div>

<div id="flash_content">



</div>

<div id="right_content">

<div id="find">

<ul>

<li class="find_job"><a href="#"><i>Find a Job</i></a></li>
<br />
<li class="find_nurse"><a href="#"><i>Find a Nurse</i></a></li>

</ul>

</div>

<div class="recentnews">

<ul>
<li><span><strong>July 2008:  </strong>New Office Opening…</span></li>
<br />
<li><span><strong>May 2008:  </strong>Celebrate Nat'l Nurse's Week…</span></li>
<br />
<li><span><strong>July 2008:  </strong>Staffing Solutions for Nurses…</span></li>
</ul>

</div>

</div>

<div id="info">

<div class="welcome">

<p align="left">

NurseCore is a national leader in the medical staffing and home care services industry. We are committed to exceeding the expectations of our customers, clients and employees through ethical and professional conduct. If you are a healthcare professional looking to <a href="#">find a job,</a> or if you need to <a href="#">find a nurse</a> for your facility or for <a href="#">home care assistance,</a> you have come to the right place.

</p>

</div>

<div class="locations">

<a href="#">Texas</a> <br />
<a href="#">Arizona</a> <br />
<a href="#">New York</a> <br />
<a href="#">Florida</a> <br />
<a href="#">Colorado</a> <br />
<a href="#">Nevada</a> <br />
<a href="#">California</a> <br />

</div>

</div>

<div id="footer">

Questions? Call us at 800-XXX-XXXX or <a href="mailto:contactus@nursecore.net">contactus@nu rsecore.net</a>        & nbsp;       &nb sp;       &nbsp ; © 2008 NurseCore all rights reserved

</div>

</div>

</div>

</body>
</html>

CSS
_____

/*--------------------

Site Style Sheet

version 1.1
authours: andrew deacon and james avery
email: deacon@drawninwardmedia.com/avery@drawninwardmedia.com
website: drawninwardmedia.com

--------------------*/

/*-----Body Styles-----*/

* {
margin: 0;
padding: 0;
}

body {
font-family:Arial, Helvetica, sans-serif;
text-align: center;
background-color: #F5F6FA;
}

/*-----end of body styles-----*/

/*-----HTML Styles-----*/

a {
text-decoration: none;
}

h1 {

}

h2 {

}

h3 {

}

/*-----end of html styles-----*/

/*-----CSS Styles-----*/

#container {
position: relative;
text-align: left;
width: 1024px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 768px;
}

#nav {
width: 1024px;
text-decoration: none;
}

#nav a {
text-decoration: none;
}

#nav a img {
border: none;
}

#nav .left {
background: url(../../nursecore/images/home_header_left.jpg) no-repeat;
height: 132px;
}

#nav .right {
left: 513px;
position: absolute;
top: 0;
}

#flash_content {
background: url(../../nursecore/images/home_flash_placeholder.jpg) no-repeat; /* This is for testing purposes */
height: 224px;
width: 513px;
}

#right_content {
background: url(../../nursecore/images/home_right_bg2.jpg) no-repeat;
height: 480px;
position: absolute;
left: 513px;
top: 132px;
width: 277px;
}

#info {
background: url(../../nursecore/images/home_left_bg.jpg) no-repeat;
height: 254px;
width: 513;
}

#info .locations {
color: #FFFFFF;
height: 175px;
left: 73px;
padding: 0 5px 0 5px;
position: absolute;
top: 394px;
text-align:center;
width: 100px;
line-height: 24px;
}

.locations a:link, a:visited {
color: #FFFFFF;
font-size: 12px;
}

.locations a:hover {
color: #F9BD43;
}

#info .welcome {
height: 156px;
left: 215px;
position: absolute;
top: 411px;
width: 260px;
line-height: 15px;
}

.welcome p {
color: #FFFFFF;
font-size: 10px;
}

.welcome a {
color: #F9BD43;
}

#find {
height: 150px;
margin: 0;
padding: 0;
position: absolute;
top: 75px;
width: 205px;
left: 15px;
}

#find i {
visibility: hidden;
}

#find a img {
border: none;
}

#find li {
height: 39px;
list-style: none;
width: 212px;
}

#find ul {

}

#find .find_job a:link, a:visited {
background: url(../images/home_findajob_button1.jpg);
height: 39px;
width: 212px;
}

.find_job a:hover {
background: url(../images/home_findajob_button-RO.jpg);
height: 39px;
width: 212px;
}

.find_nurse a:link, a:visited {
background: url(../images/home_findanurse_button1.jpg);
height: 39px;
width: 212px;
}

.find_nurse a:hover {
background: url(../images/home_findanurse_buttonRO.jpg);
height: 39px;
width: 212px;
}
#right_content .recentnews {
font-size: 10px;
height: 144px;
padding: 5px;
position: absolute;
top: 280px;
width: 234px;
}

.recentnews a {
color: #F9BD43;
}

.recentnews li {

}

.recentnews span {
color: #FFFFFF;
}

.recentnews ul {
color: #F9BD43;
}
#footer {
color: #FFFFFF;
font-size: 10px;
height: 22px;
left: 180px;
padding: 10px 5px 2px 5px;
position: absolute;
top: 574px;
width: 569px;
}

#footer a:link, a:visited {
color: #FFFFFF;
}

#footer a:hover {
color: #F9BD43;
}

/*-----end of css styles-----*/

Thanks in advance.

/*----------END OF DOCUMENT----------*/

**Brian07002** · 10-21-2008, 04:21 PM

check to make sure the image exists in that path

**WindFleur** · 10-21-2008, 04:24 PM

Just a quick feeling as to the problem, so take with pinch of salt:

You are using the hover effect of the div to do a rollover, yes?

If so the div has to be dimensioned to the size of the image.

Now, you will need to put something in at least that takes up a minimum of 1 x 1 pixel.

and CSS controls are:

height :
min-height :
width:
min-width :

You could do a rollover with javascript, but the CSS is sort of ok.

**ADeacon** · 10-21-2008, 04:44 PM

Thanks for the replies. So far I have had no luck. The only thing that seems to expose more of the image is text in the <i> tag. The more text I put in, the more of the image reveals itself. I know this isn't the appropriate way to solve this problem so I'll keep working. Any help would be greatly appreciated.

**Decaf** · 10-21-2008, 07:48 PM

use this:

Code:

<!-- Head Section -->
<script language="javascript">
var rightArrow = new Image(); //Create Image Object
</script>
<!-- End Head Section -->
<!-- Body -->
<a href="#"><img name="RightArrow" src="RightArrow.png" onmouseover="document.RightArrow.src='RightArrowOver.png';" onmouseout="document.RightArrow.src='RightArrow.png';" border="0"></a>
<!-- End Body -->

In fact, you don't even need the javascript but it will get rid of having to load the image once the mouse goes over the link.

Enjoy!

**Invictus** · 10-22-2008, 10:14 AM

Quote:

<ul>

<li class="find_job"><a href="#"><i>Find a Job</i></a></li>
<br />
<li class="find_nurse"><a href="#"><i>Find a Nurse</i></a></li>

</ul>

#find .find_job a:link, a:visited {
background: url(../images/home_findajob_button1.jpg);
height: 39px;
width: 212px;
}

.find_job a:hover {
background: url(../images/home_findajob_button-RO.jpg);
height: 39px;
width: 212px;
}

.find_nurse a:link, a:visited {
background: url(../images/home_findanurse_button1.jpg);
height: 39px;
width: 212px;
}

.find_nurse a:hover {
background: url(../images/home_findanurse_buttonRO.jpg);
height: 39px;
width: 212px;
}

I'm not sure but I don't think you can do it like that with a li element, I've always styled a div into a button by giving it a fixed width and height and a different background image for the a: hover attribute and the a:link attribute.

Clearly the li is not taking the height and width attributes you are trying to give it, I think this is because it's not a block level element.

My advice, use divs, they work.

J.