html - Broken CSS - box with corner images -


edit:

used code tim , worked!!! question have how make header independent of rest of body , strech across screen in template image without padding top , sides?

here design template: design template

here updated code html + css:

            <!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>             <meta http-equiv="content-type" content="text/html; charset=utf-8" />             <title>rounded corner tutorial</title>             <style type="text/css">             body{padding: 10px; background-color: #e8e8e8; font-family: arial, helvetica, sans-serif; font-size:12px;}             h1{padding: 0px; margin: 0px;}              #container{                      margin:0px auto;                     border:0px solid #bbb;                     padding:0px;                     }             .white-box{width: 180px; margin: 0px;}               #main-header {                 border:1px solid #bbb;                 height:80px;                 padding:10px;                 background:#fff             }              #main-content {                 margin-top:10px;                 padding-bottom:10px;             }              #main-body {                 margin-left:10px;                 width:666px;                 height:150px;             }              #main-footer {                  margin-top:10px;                 margin-bottom:10px;             padding:10px;             border:1px solid #bbb;              }                  .box {                 padding: 8px;                 border: 1px solid silver;                 -moz-border-radius: 8px;                 -o-border-radius: 8px;                 -webkit-border-radius: 5px;                 border-radius: 8px;                 background-color: #fff;             }              .box1 {                 width: 200px;                 float: left;             }              .box2 {                 margin-left: 224px;              }               </style>             </head>             <body>              <div id="container">              <div id="main-header">main header</div>                 <div id="main-content">                      <div class="box box1">                     left                     </div>                      <div class="box box2">                     <p>main bbody 1...</p>                     </div>                  </div>                  <div id="main-footer">main footer</div>             </div>              </body>             </html>

use border-radius , ditch images. make life easier , sharp on displays high pixel density (unlike gif).

important part

.box {     padding: 8px;     border: 1px solid silver;     -moz-border-radius: 8px; /* older versions of ff */     border-radius: 8px; /* ie9+, webkit, etc. */     background-color: #fff; }

all css

i created rough css stylesheet match template.

body {      background-color: #eee;  }  .box {     padding: 8px;     border: 1px solid silver;     -moz-border-radius: 8px;     border-radius: 8px;     background-color: #fff; }  .box1 {     width: 200px;     float: left; }  .box2 {     margin-left: 224px;     }

html

<div class="box box1">     left </div>  <div class="box box2">     right </div>

Comments

Post a Comment