Creating a page border?

Discussion in 'CSS' started by ASM Design, Jun 17, 2008.

  1. #1
    Hi all,

    Im looking to create a border around the main content of a site and was wondering if anyone can advise me how to do this?

    Here is an image showing what I mean, I just posted this in HTML and its gone missing so im guessing it was in the wrong section! Hopefully this is the correct one.

    [​IMG]

    Thankyou for any help,
    Alex
     
    ASM Design, Jun 17, 2008 IP
  2. MoT

    MoT Peon

    Messages:
    97
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You could try:
    
    <html>
    <head>
    <title>Hi</title>
    <style type="text/css">
    #wrapper {
      width: 100%;
      height: 100%;
      border: 20px solid #000;
    }
    </style>
    </head>
    <body>
      <div id="wrapper">
         hello
      </div>
    </body>
    </html>
    
    Code (markup):
     
    MoT, Jun 17, 2008 IP
  3. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here goes html file (index.html or index.html or index.php):

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head profile="http://gmpg.org/xfn/11">
      <title>[b]Your title goes here[/b]</title>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="en" />
      <meta name="copyright" content="Copyright © 2008 [b]Your name here[/b]. All rights reserved." />
      <meta name="author" lang="en" content="[b]Your name here[/b]" />
    
      <meta name="robots" content="all,noodp" />
      <meta name="description" content="[b]Your description goes here.[/b]" />
      <meta name="keywords" content="[b]Your keywords go here.[/b]" />
    
      <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
      <div id="wrapper">
    
        [b]Your content goes here...[/b]
    
      </div><!-- close wrapper -->
      </body>
    </html>
    
    Code (markup):
    And here is a stylesheet (style.css):

    
    * {margin:0;padding:0;}
    body {background:#e4c987;color:#333;font:10pt arial, sans-serif;}
    #wrapper {width:[b]90%[/b];height:auto;margin:[b]10%[/b] auto;background:#fff;}
    
    // ... the rest of the stylesheet
    
    Code (markup):
    Might need some minor modifications... it's just from the top of my head. Also the formatting is what I'm used to - it might not be the best.

    Of course, change the bold width and margin in stylesheet to achieve the look you need... I don't know how big border you want. And change the background color, too.
     
    risoknop, Jun 17, 2008 IP
  4. newgenservices

    newgenservices Well-Known Member

    Messages:
    862
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    105
    Digital Goods:
    1
    #4
    I am looking for something similar and here is what i am looking forward to.

    [​IMG]

    Please ignore this. I found the way myself :) Thanks for help risoknop.
     
    newgenservices, Jun 18, 2008 IP
  5. ASM Design

    ASM Design Peon

    Messages:
    502
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for all the help :D - managed to get the desired result!
     
    ASM Design, Jun 19, 2008 IP