Simplifying notification box

[arbitter]

Not sure whether this is in the right section, but I hope so.

 

The 'problem' is, that I have these PHP notifications, made with a $_SESSION['message']. If this var is set, it will echo an error or confirmation message. There's two types or error messages, a wrong and a correct one, displaying a text in a certain color. Each notification also has a closing image.

 

Here's an example of what I currently have to write for the message:

<div class='correctNotification'>Your password has been sent.    <img src='fotos/close.png' title='Sluiten' class='meldingImage' onclick=\"deletethisdiv(this)\" /></div>

Or

<div class='badNotification'>Your password was not reset.    <img src='close.png' title='Sluiten' class='imageNotification' onclick=\"deletethisdiv(this)\" /></div>

 

So in every notification I have to add the image. Also, the div has a fixed width, so to make the notification nicer I have to add spaces or make sure the text isn't too long so it would extend from the div.

 

Is there a way to incorporate the image in a div with css? Or perhaps something else? How would I make it easier for myself?

 

Here's some code that might be useful:

<style type='text/css'>
img.imageNotification{
opacity:0.4;
filter:alpha(opacity=40);
}
img.imageNotification:hover{
opacity:1;
filter:alpha(opacity=100);
cursor:pointer;
}
.badNotification
{	
background: #f97c6f;
color: #570f01;
border:1px solid #570f01;
position:relative;
top:0px;
width:350px;
left:222px;
margin-bottom:15px;
text-align:center;
padding: 5px 10px 5px 10px;
height:15px;
font-size:15px;
}
.correctNotification
{
background: #96f96f;
color: #045419;
border:1px solid #045419;
position:relative;
top:0px;
width:350px;
left:222px;
margin-bottom:15px;
text-align:center;
padding: 5px 10px 5px 10px;
height:15px;
font-size:15px;
}
</style>

[scootstah]

You mean like the background property?

[arbitter]

Well yes, but then I can't give the image a class, title or onclick event, and that's the crucial part..

[scootstah]

You could put it in a span or div and give that all those properties.

[arbitter]

But I only want the image to be clickable, not the whole div/span... Also, when hovering over the image, the opacity changes. I don't want this to be the case for the whole div. Or am I misunderstanding what you mean?

[scootstah]

<div class="correctNotification">
    Your password has been sent.
    <span class="close"></span>
</div>

 

.correctNotification .close {
    width:50px;
    height:50px;
    background:url(fotos/close.png);
    display:inline-block;
}

 

Then you can use an onclick event with the span.

[arbitter]

So then I should give the opacity change to the span, but that doesn't quite work.. And then I'm almost doing the same work as typing what I did before...

 

Is there a css way to set the width of the div to the width of the text + a few pixels or not?

[scootstah]

padding.