[Wordpress] Adding a Border Around the Main Area

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by jmixmaster29, Feb 28, 2011.

  1. jmixmaster29

    jmixmaster29 New Member

    Messages:
    29
    Likes Received:
    0
    Trophy Points:
    0
    I am trying to add a CSS border around my site (which is using Wordpress) to create a break-way between the main website block and the background color. I am still quite new to HTML/CSS but I do know how to read it and what most of it does. I wrote this style for the border:

    Code:
    #border{
    	border: 1px solid #000;
    	position: absolute;
    }
    I then created a div and wrapped it around "<?php get_header(); ?>" and "<?php get_footer(); ?>" because I want to use the same border to surround the header and footer and everything in between. If you go here: http://gotdocs.co.cc/2011/02/26/hello-world/ you will see what happened. Any idea of what could be wrong?
     
  2. misson

    misson Community Paragon Community Support

    Messages:
    2,572
    Likes Received:
    72
    Trophy Points:
    48
    #border has a border, there's just no space outside of it; the border is against the window. If you give #border a margin, you'll see the border.

    Header templates generally include antecedents, such as the DOCTYPE declaration, <head> elements and <html> open tag. By placing your #border div before get_header, you're creating an invalid HTML file. Browsers are free to interpret this how they will, including placing all the elements that should go in <head> in the <body> instead, or ignore the elements entirely. A simpler solution would be to place your open and close tags in the header and footer templates (header.php and footer.php, respectively), if no suitable element already exists there. You could also target <body> with your styling.
     

Share This Page