SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Error Container

  1. #1
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Error Container

    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.

    Code:
    <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>

    Code:
    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.
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    This gets what you were asking for, according to your screenshot
    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>
    <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>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd simplify it like this:

    Code:
    <!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. #6
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Albablue89 View Post
    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!!!!!!
    Just to move the text up a little higher for aesthetic reasons.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •