How to make a border around a page?

Discussion in 'HTML & Website Design' started by PeterA, Nov 23, 2008.

  1. #1
    Hi ,

    I want to make up a sales page, and would like a border on the page.

    I would like to have rounded corners.

    How do I do this? What is the code etc. I think I might have to draw the top and bottom parts and then the sides or something.

    Peter

    Australia
     
    PeterA, Nov 23, 2008 IP
  2. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you show me a URL or page, and which block your want to apply the border to, i can tell you better :)
     
    markupdude, Nov 23, 2008 IP
  3. PeterA

    PeterA Guest

    Messages:
    107
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Like the border shown here. http://splashpagetemplates.com/

    I think that I need to draw the top, bottom and sides in coreldraw. Then after that I get lost.

    Peter
     
    PeterA, Nov 23, 2008 IP
  4. Ant-Lion

    Ant-Lion Well-Known Member

    Messages:
    164
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    120
    #4
    Ant-Lion, Nov 23, 2008 IP
  5. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ah nice link Ant-Lion has pointed. Will get the job done for you.

    Or to do it manually, See the MainImage.gif

    <div class="main">

    <div class="topBorder">Crop top line Image and use in this block, like TopImage.gif</div>

    <div class="middleContent">Repeat-y the body background Image, like MiddleRepeatImage.gif </div>

    <div class="bottomBorder">Crop bottom line Image and use in this block, like BottomImage.gif</div>

    </div> <!-- Main Ends -->

    I wish i could show some more illustration.
     

    Attached Files:

    markupdude, Nov 23, 2008 IP
  6. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Also if you want to make simple rounded corners with CSS only, no image, CSS3 has new border-radius properties.

    But, this is only supported in latest versions Firefox & Safari so far. IE & Opera users will see normal straight border.

    And you have to write two separate CSS lines for Firefox & Safari, like this :

    { border:1px solid #000; -moz-border-radius:10px; -webkit-border-radius:10px; }

    Code explained here - css3.info/preview/rounded-border

    And a preview can be found on markupdude.com my incomplete website's [shameless self-promotion] Orange color sidebar.

    [use Firefox or Safari, or else you will see straight borders.]
     
    markupdude, Nov 23, 2008 IP
  7. PeterA

    PeterA Guest

    Messages:
    107
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    hmm, got that sort of.

    Now I want to use that border around a page for an ebay add. But How will I use the css in a plain html file.

    I understand that you have eg. and index.html file then say navigation.css, main.css etc etc.

    So how can I get that border on an ebay add?

    Peter
     
    PeterA, Nov 23, 2008 IP