Error Container

HTML & CSS
1

Hi,

I’m having a little trouble creating this container - View @ http://i39.tinypic.com/5f41oz.jpg

Here’s what I’ve laid out so far, I’m not sure if I’ve got the right idea or not, but whenever I get to span for the icon and h2 for the header, everything is way out of place.

<div id="error-alert">
          <div class="alert-heading">
                <span></span><h2>Confirmation</h2>
          </div>
          <div class="inner-msg">
                <p>The messages has been deleted.</p>
          </div>
</div>


div#error-alert {
background: #ececec;
width: 550px;
height: 130px;
margin: 0 auto;
border: 2px solid #8f2203;
-moz-border-radius: 1em 1em;
border-radius: 1em 1em;
}

div#error-alert .alert-heading {
background: #c12d02 url("images/error-background.png") repeat-x 0 0;
width: 100%;
height: 31px;
margin: 0;
position:relative; top:0px;
}

View and Edit @ http://cssdesk.com/aM89M

Any tips?

Thanks.

2

Can you provide us with the images somehow so this can be easier to test?

You need to remove the default margins on the header element because that’s pushing it away from the container.

I’d honestly use images for the border radius for this.

3

Here are some images (Icon and Header bar) -> http://www.awblue.com/test/images/

The plan was to create a container for different type of messages, I.E. Error -> Confirmed -> Info etc etc. So I was thinking of doing id=alert class=error so on and so forth.

I’ve never done rounded corners with images so I don’t really know how to do that, the rounded corners to be honest I’m not too fussed about, it’s morely just a matter of aesthetics.

4

This gets what you were asking for, according to your screenshot :slight_smile:

<!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>
<title>Untitled Document</title>

<style type="text/css"> 
*{margin:0;padding:0;}

div#error-alert {
background: #ececec;
width: 550px;
height: 130px;
margin: 0 auto;
border: 2px solid #8f2203; 
border-top:0
-moz-border-radius: 1em;
border-radius: 1em;
}

div#error-alert .alert-heading { 
background: #c12d02 url("http://www.awblue.com/test/images/error-background.png") repeat-x 0 0;
width: 100%;
border-radius:1em 1em 0 0;
height: 31px;
margin: 0;
position:relative; top:0px;
}
</style>
</head>

<body>
<div id="error-alert">
          <div class="alert-heading">
                <span></span><h2>Confirmation</h2>
          </div>
          <div class="inner-msg">
                <p>Sorry - $PHP MESSAGE HERE</p>
          </div>
</div>
</body>
</html>
5

Hi,

I’d simplify it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style tpe="text/css">
.error {
	background:#ececec url(http://www.awblue.com/test/images/error-background.png) repeat-x 0 0;
	width: 550px;
	min-height:130px;
	margin: 0 auto;
	border: 2px solid #8f2203;
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
	border-radius:1em;
}
.error h3 {
	margin:0;
	height:32px;
	line-height:31px;
	color:#fff;
	font-size:140%;
	padding:0 0 0 45px;
	background:url(http://www.awblue.com/test/images/error-icon.png) no-repeat 15px 50%;
}
.error p {
	padding:20px;
	margin:0;
	font-size:120%;
	color:#000;
}
</style>
</head>

<body>
<div class="error">
		<h3> Error Message</h3>
		<p>Sorry - you have a fatal error</p>
</div>
</body>
</html>
6

Thanks Guys, I can see know that I’ve over-complicated it a bit much.

@Paul O’B - Can you explain the reason why height is 32px and line-height is 31px?

Thanks!!!

7

I’m guessing that’s just a typo. Setting line height and height to be the same results in vertical centering of text. I’m guessing he just typo’d :). There’s no difference between the two values if you test it.

8

Just to move the text up a little higher for aesthetic reasons. :slight_smile: