SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS to design like this?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 Code:
    <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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

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

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


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
  •