need help for my css div borders and corners

Discussion in 'HTML' started by ataraxia2500, Jun 7, 2004.

  1. ataraxia2500

    ataraxia2500 Guest

    thanx to alistapart i've been able to find out how to do rounded corners,
    but I would also like to do left, right, top and bottom borders and how to
    "pixelize" the rest.

    for now this is what it looks like:
    http://www.prestigesecurity.biz/gg/index2.html

    this is what I want it to look like:
    http://www.prestigesecurity.biz/gg/example.png

    this is the slyle i use:
    http://www.prestigesecurity.biz/gg/test.css

    i use 9 images for that: 4 corners, 4 borders and the 'pixel' image for the
    middle (they're all here http://www.prestigesecurity.biz/gg/blue/From/).
    this is what my css look like:

     div.Article {
      background: 
            url(blue/From/tl.png) 
      top left no-repeat;
      width:35%;
      }
    div.Article h2 {
      background: 
            url(blue/From/tr.png) 
      top right no-repeat;
      font-size:1.3em;
      padding:15px;
      margin:0;
      }
    div.ArticleBody {
      background: 
            url(blue/From/mr.png) 
      top right repeat-y;
      margin:0;
      margin-top:-2em;
      padding:15px;
      
      }
      
      div.ArticleBodyLeft {
      background: 
            url(blue/From/ml.png) 
      top left repeat-y;
      margin:0;
      margin-top:-2em;
      padding:15px;
      }
      
    div.ArticleFooter {
      background: 
            url(blue/From/bl.png) 
      bottom left no-repeat;
      }
    div.ArticleFooter p {
      background: 
            url(blue/From/br.png) 
      bottom right no-repeat;
      display:block;
      padding:15px;
      margin:-2em 0 0 0;
      }

    div.ArticleFooterMiddle p {
      background: 
            url(blue/From/bm.png) 
      bottom middle no-repeat;
      display:block;
      padding:15px;
      margin:-2em 0 0 0;
      }
      
      div.ArticleHeaderMiddle p {
      background: 
            url(blue/From/tm.png) 
      top middle repeat-x;
      display:block;
      padding:15px;
      margin:-2em 0 0 0;
      }

    this is my html part:

    <div class="Article">
    <h2> <center>hey</center> </h2>
     <div class="ArticleBodyLeft">
     </div>
      <div class="ArticleBody">
     </div>
      <div class="ArticleFooter">
       
        </div>
      </div>

    tell me if u know :)

    thanx in advance
    ataraxia2500, Jun 7, 2004
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. kurt sune

    Rounded corners on panel/div etc

    kurt sune, Oct 12, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    5,977
  2. rf

    Round corners with CSS

    rf, Sep 14, 2003, in forum: HTML
    Replies:
    6
    Views:
    594
    e n | c k m a
    Sep 14, 2003
  3. Fluxcore

    CSS and rounded corners

    Fluxcore, Dec 2, 2003, in forum: HTML
    Replies:
    2
    Views:
    389
    Richard
    Dec 3, 2003
  4. George
    Replies:
    9
    Views:
    4,850
    George
    Oct 25, 2004
  5. Replies:
    2
    Views:
    1,038
    Nik Coughlin
    Mar 11, 2007
Loading...

Share This Page