CSS - Css Rollovers

Been toying with this for awhile now and looking at different tutorials but no such luck.

What I have so far:
http://www.archanix.com/root/
http://www.archanix.com/root/root.css

What I need it to look like:


It should turn pink when rolled over.

I have been trying various things all night but I cannot figure it out.... Here is the link to the page in question:

http://www.atlantahrd.com/index_new.htm

In Safari and IE6 it looks right - horizontal navigaiton bar across the top. In IE/Mac (5.2) the navigation bar just centers itself on the screen and shows up as a vertical list. It is driving me crazy! Can anyone point me in the right direction? Thank you so much!

Also, the CSS file is as follows:

Code:

.Name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #990000;
}
.Address {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #990000;
}
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #990000;
	background-color: #FFFFFF;
	padding: 0px;
	margin-top: 0px;
	margin-right: 10%;
	margin-bottom: 0px;
	margin-left: 10%;
}
#logotext {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 32px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: capitalize;
	color: #000000;
	letter-spacing: 2px;
}
#logotextCaps {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 50px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: capitalize;
	color: #000000;
}

#navlist {
font-size: .9em;
position: absolute;
left: 0px;
top: 87px;
margin: 0;
width: 750px;
}
#navlist li {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	text-align: center;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
	padding: 0px 15px 0px 16px;
	border: 1px solid;
	border-color: #000000;
	background-color: #000000;
	text-decoration: none;
}
#navlist a:link, #navlist a:visited {
color: #ffffff;
}
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #ffffff;
color: #000000;
}
#logostripetop {
	background-color: #990000;
	position:absolute;
	left:0;
	top:3px;
	width:750px;
	height:17px;
	z-index:1;
	visibility: visible;
}
#logostripebottom {
	background-color: #990000;
	position:absolute;
	left:0;
	top:60px;
	width:750px;
	height:17px;
	z-index:2;
	visibility: visible;
}
#homeresourcebox {
	position:absolute;
	left:4px;
	top:10px;
	width:364px;
	height:30px;
	z-index:3;
	visibility: visible;
}
#atlantabox {
	position:absolute;
	left:45px;
	top:7px;
	width:85px;
	height:24px;
	z-index:4;
	background-image: url(images/atlanta.gif);
	layer-background-image: url(images/atlanta.gif);
	border: 1px none #000000;
	visibility: visible;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
}
#directorybox {
	position:absolute;
	left:226px;
	top:58px;
	width:85px;
	height:24px;
	z-index:5;
	background-image: url(images/directory.gif);
	layer-background-image: url(images/directory.gif);
	border: 1px none #000000;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	visibility: visible;
}
#leftbox {
	position:absolute;
	left:0px;
	top:125px;
	width:150px;
	height:300px;
	z-index:8;
	overflow: visible;
	visibility: visible;
}
#centerbox {
	position:absolute;
	left:160px;
	top:125px;
	width:460px;
	min-height:300px;
	z-index:7;
	overflow: visible;
	visibility: visible;
}
#rightbox {
	position:absolute;
	left:630px;
	top:125px;
	width:120px;
	text-align:center;
	height:300px;
	z-index:6;
	overflow: visible;
	visibility: visible;
}
#copyright {
	position:relative;
	width:250px;
	text-align:center;
	height:20px;
	margin-top:0;
	z-index:9;
	visibility: visible;
}

Hi,

Now that the Information bar in IE blocks script from running, my usual Fireworks rollovers always produce the error.

I have heard CSS is a good alternative.
The code below shows how i have 5 images with links.

These are what i would like to be rollovers.

Could anyone give me some help on this?

Cheers.


Code:

<tr>
        <td><img name="index_r2_c1" src="images/index_r2_c1.gif" width="7" height="30" border="0" alt=""></td>
        <td><a href="index.htm"><img src="images/index_r2_c2.gif" width="82" height="30" border="0" class="rollover"></a></td>
        <td><img name="index_r2_c3" src="images/index_r2_c3.gif" width="22" height="30" border="0" alt=""></td>
        <td><a href="about.htm"><img name="index_r2_c4" src="images/index_r2_c4.gif" width="128" height="30" border="0" alt=""></a></td>
        <td><img name="index_r2_c5" src="images/index_r2_c5.gif" width="24" height="30" border="0" alt=""></td>
        <td><a href="catalogue.htm"><img name="index_r2_c6" src="images/index_r2_c6.gif" width="150" height="30" border="0" alt=""></a></td>
        <td><img name="index_r2_c7" src="images/index_r2_c7.gif" width="15" height="30" border="0" alt=""></td>
        <td><a href="order.htm"><img name="index_r2_c8" src="images/index_r2_c8.gif" width="92" height="30" border="0" alt=""></a></td>
        <td><img name="index_r2_c9" src="images/index_r2_c9.gif" width="15" height="30" border="0" alt=""></td>
        <td><a href="contact.htm"><img name="index_r2_c10" src="images/index_r2_c10.gif" width="121" height="30" border="0" alt=""></a></td>
        <td rowspan="2" colspan="2"><img name="index_r2_c11" src="images/index_r2_c11.gif" width="144" height="44" border="0" alt=""></td>
      </tr>

Hi all,

I've got a simple menu where the buttons are all in HTML text, but I want to put a rollover image behind them - is this possible?

Cheers.

I'm trying to get my buttons to rollover using a single image and change the background position on a:hover... and I'm having a bitch of a time figuring out why they're not working. I'm building them almost exactly how I always do, but I can't for the life of me see what's going wrong here.

Hoping somebody can take a peek at my code and tell me what I did wrong here...

http://www.crackin.com/dev/index.html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Melt Away Massage</title>

<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000;}
body {margin: 0px; background: url(images/pageBg.jpg) no-repeat center top fixed #fff;}
img {margin:0px; padding:0px; border:none;}

.float img, .float div {float:left;}
.clear {clear:both; height:0px;}

#nav1 div {width:223px; height:98px; margin:0 0 13px 10px;}
#nav1 a {display:block; width:100%; height:100%; background-position:left;}
#nav1 a:hover {background-position:right;}

#nav2 div {width:161px; height:34px; position:relative; top:-12px;}
#nav2 img {position:relative; top:-12px;}
#nav2 a {display:block; width:100%; height:100%; background-position:top;}
#nav2 a:hover {background-position:bottom;}

#content_frame {position:relative; top:-12px; margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgStretch.jpg) repeat-y;}
#content_subFrame {margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgTop.jpg) no-repeat top;}

#footer_wrap {width:100%; height:140px; background:url(images/foot_bg.png) repeat-x; position:relative; margin-top:-133px;}
#footer {min-height:121px; min-width:955px;}
#footer div {position:relative; z-index:10; padding:60px 60px 0;}
-->
</style>

</head>

<body>
<div id="wrapper" style="width:100%;">

	<div style="position:absolute; width:100%; height:33px; top:175px; background:#fff;"></div> <!-- SUB TITLE STRIPE -->

	<div id="content_wrap" style="width:955px; margin:0 auto;">
		
        <!-- SEARCH BAR -->
        <span class="float">
            
            <form style="position:absolute;">
                <a href="#"><img src="images/index_01.png" width="129" height="32" /></a>
              	<div style="width:394px; height:32px; background:#fff;">
                    <input name="search" type="text" style="margin-top:7px;" /> &nbsp; INSERT DATE CODE
                </div>
            </form>
            
            <span style="float:right;">
            	<img src="images/index_02.png" width="432" height="32" />
            </span>
            
        </span> <!-- END FLOAT -->
        <div class="clear"></div>
        <!-- END SEARCH BAR -->
        
  		<img src="images/index_03.png" width="955" height="143" /><br /> <!-- MAIN TITLE -->
        <img src="images/index_04.png" style="position:relative; left:373px;" /><br /> <!-- SUB TITLE -->
        
        <!-- REDUCED WIDTH CONTENT WRAP -->
        <div id="sub-content_wrap" style="width:936px; margin:0 auto;">
        	<span class="float">
            	<div style="background:url(images/index_MainImg.jpg); width:703px; height:321px;"></div>
                
                <span id="nav1">
                    <div><a href="#" style="background:url(images/nav_1services.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_2rates.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_3book.jpg);"></a></div>
                </span> <!-- END NAV1 -->
                
                <span id="nav2">
	                <img src="images/index_05.png" />
                    <div style="width:160px;"><a href="#" style="background:url(images/nav_4new.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_5specials.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_6about.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_7contact.jpg);"></a></div>
                    <img src="images/index_06.png" />
                </span> <!-- END NAV2 -->
                
            </span> <!-- END FLOAT -->
            <div class="clear"></div>
            
            <!-- MAIN CONTENT FRAME -->
            <div id="content_frame">
            	<div id="content_subFrame">
					<div style="padding:10px; min-height:300px;">
	                    INSERT CONTENT HERE
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT FRAME -->
            
		</div> <!-- END SUB-CONTENT_WRAP -->
        <!-- END REDUCED WIDTH CONTENT WRAP -->
        
	</div> <!-- END CONTENT_WRAP -->
    
	<div style="background:url(images/foot_bgMid.jpg); width:955px; height:121px; margin:0 auto; position:relative; top:-12px; z-index:5;"></div> <!-- BODY BASE -->
    
    <div id="footer_wrap">
        <div id="footer">
            <div style="float:left;">
            	FOOTER CONTENT GOES HERE
            </div>
            <div style="float:right;">
            	FOOTER CONTENT GOES HERE
            </div>
                        
        </div> <!-- END FOOTER -->
    </div> <!-- END FOOTER_WRAP -->
    
</div> <!-- END WRAPPER -->
</body>
</html>

Hello all
I'm putting together a site and would like to make my HTML pages use an external style sheet (the site's pages will have exactly the same content and button links at the top 1/4 of the page).

I am unsure how to get my rollovers to work using a style sheet. Currently, my HTML has an internal script that does the job... Is it possible to set my rollovers in the external style sheet, thus allowing me to have that content easily updated for all pages on the site? I know this is a fundamental CSS question but bear with me, I'm still learning the code, thanks! Even if I can code one of the buttons to have the rollover in CSS, I could do the rest.

Here is my code that works for HTML; it needs to be transferred to CSS as a base style sheet... can it be done? Thanks in advance!

Code:

<html>
<head>
<title>MY SITE EXAMPLE</title>

<SCRIPT language="JavaScript"> 
<!--

  if (document.images)
   {
     homeon= new Image(98,40);
     homeon.src="images/b-home-on.jpg";  
     aboutuson= new Image(98,40); 
     aboutuson.src="images/b-aboutus-on.jpg";
     productson= new Image(98,40);
     productson.src="images/b-products-on.jpg";
     servsuppon= new Image(98,40);
     servsuppon.src="images/b-servsupp-on.jpg";
     downloadson= new Image(98,40);
     downloadson.src="images/b-downloads-on.jpg";
     custinqon= new Image(98,40);
     custinqon.src="images/b-custinq-on.jpg";
     dealerinqon= new Image(98,40);
     dealerinqon.src="images/b-dealerinq-on.jpg";
     contacton= new Image(98,40);
     contacton.src="images/b-contact-on.jpg";
      
     
     homeoff= new Image(98,40);
     homeoff.src="images/b-home.jpg";
     aboutusoff= new Image(98,40);
     aboutusoff.src="images/b-aboutus.jpg";
     productsoff= new Image(98,40);
     productsoff.src="images/b-products.jpg";
     servsuppoff= new Image(98,40);
     servsuppoff.src="images/b-servsupp.jpg";
     downloadsoff= new Image(98,40);
     downloadsoff.src="images/b-downloads.jpg";
     custinqoff= new Image(98,40);
     custinqoff.src="images/b-custinq.jpg";
     dealerinqoff= new Image(98,40);
     dealerinqoff.src="images/b-dealerinq.jpg";
     contactoff= new Image(98,40);
     contactoff.src="images/b-contact.jpg";
   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>
</head>

<body bgcolor="#000000" background="images/bglines.jpg" text="000000" topmargin="0">

<font face="Arial, Helvetica, Sans-Serif">
<center>

<table border="0" cellspacing="0" cellpadding="0" width="784">
	<tr>
		<td bgcolor="FFFFFF"> 


	<table border="0" bgcolor="FFFFFF" cellspacing="0" cellpadding="0">
	<tr>
		<td width="784" height="150" background="images/gb-top-bar.jpg">
			
		</td>
	</tr>

	<tr>
		<td width="784" height="40" border="0" cellspacing="0" cellpadding="0">
<a href="index.htm" onMouseover="lightup('home')" onMouseout="turnoff('home')"><img src="images/b-home.jpg" name="home" width="98" height="40" border="0"></a><a href="aboutus.htm" onMouseover="lightup('aboutus')" onMouseout="turnoff('aboutus')"><img src="images/b-aboutus.jpg" name="aboutus" width="98" height="40" border="0"></a><a href="products.htm" onMouseover="lightup('products')" onMouseout="turnoff('products')"><img src="images/b-products.jpg" name="products" width="98" height="40" border="0"></a><a href="support.htm" onMouseover="lightup('servsupp')" onMouseout="turnoff('servsupp')"><img src="images/b-servsupp.jpg" name="servsupp" width="98" height="40" border="0"></a><a href="downloads.htm" onMouseover="lightup('downloads')" onMouseout="turnoff('downloads')"><img src="images/b-downloads.jpg" name="downloads" width="98" height="40" border="0"></a><a href="custinq.htm" onMouseover="lightup('custinq')" onMouseout="turnoff('custinq')"><img src="images/b-custinq.jpg" name="custinq" width="98" height="40" border="0"></a><a href="dealerinq.htm" onMouseover="lightup('dealerinq')" onMouseout="turnoff('dealerinq')"><img src="images/b-dealerinq.jpg" name="dealerinq" width="98" height="40" border="0"></a><a href="contact.htm" onMouseover="lightup('contact')" onMouseout="turnoff('contact')"><img src="images/b-contact.jpg" name="contact" width="98" height="40" border="0"></a>
		</td>
	</tr>
	<tr>
</table>
<table>
	<tr width="784">
		<td width="392"><font size="1"><a href="dealerlocator.htm">Find a dealer near you!</a>
		</td>
		<td width="392" align="right"><font size="1">
<font size="2">
<SCRIPT>
document.write(Date())
</SCRIPT>
</font>
		</td>
	
	</tr>

	</table>

		</td>
	</tr>
</table>

</center>

</body>
</html>

Hi, I have the following CSS code: Code:

a.HomeBN{
background: url('../images/common/nav/btn_home.gif');
width:62px;
height:42px;
}
a.HomeBN:hover{
background: url('../images/common/nav/btn_home_hover.gif');
width:62px;
height:42px;
}

then on my page, I have the following: Code:

<a class="HomeBn" href="index.php"></a>

The problem is that the home button does not appear at all.

what am I doing wrong?

thanks

Using either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?:

image1 and image2 are laid out horizontally across the top of the page.

When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears.

When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves.

I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions!

Is there a way in CSS to set rollover effects on form buttons?

Such as different bg colour, diff fonts, etc..

Hi There,

I am working on a new layout for a control panel.

I have the basic layout coded up:

http://www.lampdesign.co.uk/desdev/ss/

I am now needing to put a row of icon images in for the various sections of the control panel - here is an example of what they look like:

http://lampdesign.co.uk/desdev/ss/images/buttonbar.png

Is it possible to do a rollover image list?, I have looked on listomatic and there are image lists with rollover bg images but no actual image rollovers.

I am not 100% sure what to do - I could do tables but I'd rather not!

Any ideas?

Thanks

Hi,

I am trying to create a menu, and I would like to try to do it without using Javascript.

I a number of menu items, that each has three states - first state is just white text, second state needs to fade from white to blue text when mouse is rolled over. Third state needs to fade from blue to white text when mouse is taken off each menu item. I have the three images for that (white, white-blue, blue-white).

I have read up on a few image rollover guides using CSS, but they all involve putting outlines around an existing image etc. As the images need to be links, they can't be background images (can they?), they have to be just images.

So, can anyone point me in the right direction on how to swap an image with another when one a) an image is rolled over, and also b) when the mouse is removed from over the image.

Thanks

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

I'm trying to create a very simple navbar with css rollovers. I made one based on a tutorial on the macromedia website but it's not quite right (in Internet Explorer anyway)

If you have a look here you can see what I want it to look like:

http://www.eveythingfree.buildtolea...ieds/index2.php

Now here is my attempt:

http://www.eveythingfree.buildtolea.../whynotwork.php

It looks fine in Mozilla but in IE the right hand side of the table doesn't exist (there is no 1 pixel black line).

What have I done wrong?

Heres the css properties:

Code:

.button a {
	background-color: #e9e9e9;
	border: 1px solid #333333;
	display: block;
	text-decoration: none;
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align: center;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
}


.button a:hover {
   background-color: #DDDDDD; 
   border: 1px solid #333333; 
   color: #CC0000;
   text-decoration: none 
}

Can anyone spot it?

Unlike in the design I'm trying to replicate, I want to have 1px lines dividing the links. This works in the 2nd example except for the problem on the right.

I really hope someone can shed some light on all this.

Thanks in advance,
Robert

Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time.

I'm trying to put it on a WordPress site ...

Any links or help would be much appreciated!

Laura S.