CSS & HTML Square Background -


can guide me, how can create 'almost' square background in css?

i want brown background , have text on error bullets , how create dotted yellow on top right in css?

my working progress here:

html:

<body>     <div id="contentcontainer">         <div id="setbackground">             <div id="header"> <span class="style1">this logo </span>                  <hr />                 <div id="body_block">                     <p class="intro">introduction</p>                      <h1> </h1>                     click here                      <h2> next </h2>                     click here                      <p>more web design:</p>                     <p>• bla bla bla... .</p>                     <p>contact:</p>                     <p>• bla bla bla...</p>                     <div id="footer">                         <!--hr class="footer"/-->                         <p>&copy; copyright 2013                         <a href="">sample.com </a>|                         <a href="">more site </a>                         </p>                     </div>                 </div>             </div>         </div>     </div> </body> 

css:

@charset"utf-8";  /* css document */  hr {     clear:both;     border: 0;     height:12px;     width:100%;     background-color: #993300; } .intro {     color: #1e2a74;     font-size:16px;     font-weight:bold;     font-family:arial, helvetica, sans-serif; } #footer {     background-color:#6994af;     clear: both;     color: #ffffff;     font-size: 0.8em;     margin: 0;     padding: 0;     font-family:arial, helvetica, sans-serif; } #footer p {     border-top: 1px solid #83cde1;     margin: 0;     padding: 15px 0;     text-align: left; } #footer {     text-align:right; } .style1 {     font-size: 24px;     font-weight: bold;     font-family: arial, helvetica, sans-serif;     background-color: #ffffff; } 

the border radius css attribute can obtain rounded corners - should trick pink element containing else.

div {     /* border-radius: top-left , top-right, bottom-right, bottom-left */     border-radius: 20px 5px 20px 5px; } 

i break few divs, header , body. put background yellow dots color on top div , apply border radius top pieces.

then place content other divs within body , apply border styles each case.

this 1 way sure there plenty of other wayas.

more info css rounded borders here


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -