CSS to design like this?

HTML & CSS
1

Hi all,
I don’t know about CSS.
I want to design box like this, (added an image preview)

To develop like that, i want css and related images…

Help me to solve this…
Thanking you…

2

That looks pretty straightforward. The first thing to do is to get your basic HTML in order. Then perhaps post that, and we can guide you through the styling of it.

3

This code is working nicely in IE but not in Mozilla…
but rounded corner are not effecting in IE but working in Mozilla…(this css is removed from this code).

Help me to set nicely…

another problem is, header part is not decreasing the height…

As of now my code is;


<html> 
<head> 
<title>Simple Box CSS layout</title> 
<style type="text/css"> 
#header { 
 font-family: Arial, Helvetica, sans-serif; 
 color: #FFFFFF; 
 background: #666666; 
 width: 450px; 
 float: none; 
 border-top: thin solid #000000; 
 border-right: thin solid #000000; 
 border-left: thin solid #000000; 
 border-bottom-width: thin; 
 border-bottom-style: none; 
 }
#body { 
 background: #FFFFFF; 
 height: 200px; 
 width: 450px; 
 color: #000000; 
 font: 12px Verdana, Arial, Helvetica, sans-serif; 
 margin: 0px; 
 padding: 20px; 
 border-style: none solid; 
 border-width: thin; 
 text-align: left; 
   
 /*text-indent: 10px;  - this will also indent the descendent scroll box*/ 
 }
#footer { 
 color: #FFFFFF; 
 background: #999966; 
 width: 450px; 
 background-color: #999999; 
 border-top: thin none #000000; 
 border-right: thin solid #000000; 
 border-bottom: thin solid #000000; 
 border-left: thin solid #000000; 
 }
</style> 
</head> 
<body> 
<center> 
<div id="header"> 
<h1> Header Graphic to go here</h1> 
</div> 
<div id="body"> 
<p><strong>WELCOME</strong></p> 
  <p><strong>Butterflies   represent Natures' art</strong>, their wings advertise that   they are 
ready for  
business. Most businesses also need to advertise their   products and services in order to 
compete in  
today's technology driven society.   For many businesses a web site has become an essential  
marketing tool. Web sites   are being used to sell products and services, display color catalogs,  
educate   your customers, recruit new customers and new employees. The world wide web now    
exceeds 500 million and is expected to reach 1 Billion in 2004 - this is a vast   market that is still  
growing exponentially. </p> 
</div> 
</center> 
<center> 
<div id="footer"> 
</div> 
</center> 
</body> 
</html>
4

HI,

I assume that’s supposed to be a scrollbox of some sort and you could do it like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple Box CSS layout</title>
<style type="text/css">
.scrollbox h1, .scrollbox h2 {
    margin:0
}
.scrollbox {
    width:450px;
    border:1px solid #000;
    margin:auto;
}
.scrollbox h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background: #666;
    width: 450px;
    text-align:center;
    padding:5px 0;
}
#body {
    background: #FF;
    height: 200px;
    overflow:auto;
    width: 410px;
    color: #000000;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    padding: 20px;
}
</style>
</head>
<body>
<div class="scrollbox">
    <h1> Header Graphic to go here</h1>
    <div id="body">
        <h2>WELCOME</h2>
        <p><strong>Butterflies   represent Natures' art</strong>, their wings advertise that   they are 
            ready for  business. Most businesses also need to advertise their   products and services in order to 
            compete in     today's technology driven society.   For many businesses a web site has become an essential  
            marketing tool. Web sites   are being used to sell products and services, display color catalogs,  
            educate   your customers, recruit new customers and new employees. The world wide web now    
            exceeds 500 million and is expected to reach 1 Billion in 2004 - this is a vast   market that is still  
            growing exponentially. </p>
        <p><strong>Butterflies   represent Natures' art</strong>, their wings advertise that   they are 
            ready for  business. Most businesses also need to advertise their   products and services in order to 
            compete in     today's technology driven society.   For many businesses a web site has become an essential  
            marketing tool. Web sites   are being used to sell products and services, display color catalogs,  
            educate   your customers, recruit new customers and new employees. The world wide web now    
            exceeds 500 million and is expected to reach 1 Billion in 2004 - this is a vast   market that is still  
            growing exponentially. </p>
    </div>
</div>
</body>
</html>

The h1 and h2 should only be at the appropriate level (e.g. h3 and h4 perhaps) if this isn’t the only element on the page.