Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How do I do this?

    Hey guys,

    First of all I am pretty new to the whole coding game. I have taken two college classes about how to create web pages (I'm a Senior in High School -- Running Start program). So I am still learning. I aim to get a degree in some type of Computer Science, I haven't decided yet. Anyways, on to my question:

    I am designing version 2.0 of my website and want to incorporate what I would consider a "highlight/border" on my content. Here's an example: http://www.bespokecycling.com

    The "black" part (grey color is the background) of that website covers all of the content and even extends when there is more content as seen on it's other pages. How would I create something like this? I don't even know if it is HTML/CSS (if not could some point me in the right direction?).

    Thanks guys!

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    What the author of the example page did was apply a background color to the html tag via css:

    Code:
    html {
    background-color:#242929;
    text-align:center;
    }
    Then the body tag was given a specific width:

    Code:
    body {
    font-family:Verdana,Arial,sans-serif;
    margin:0pt auto;
    position:relative;
    text-align:left;
    width:935px;
    Then a box was created to house the content:

    Code:
    <div id="primary">
    and styled like so:

    Code:
    #primary {
    background-color:black;
    margin:0pt;
    padding:0pt 30px;
    top:0pt;
    width:875px;
    }
    Inside that box goes all the content, which can be as tall as you want when you don't define a specific height. Notice only the width was defined in this example. It is 60px narrower than its immediate ancestor, the body, and it has 30px of padding on each side. This padding forces the content in from the sides, allowing the background color (black) to show thru the box. It is a nice effect, looks very stylish.

    One of the best free tools you can use to examine and deconstruct web pages is the Firebug addon to Firefox.

    Gary

  • Users who have thanked garydarling for this post:

    Warblade (09-26-2007)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://litmusapp.com/cssvista/

    This program will also enable you to edit in IE

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by effpeetee View Post
    http://litmusapp.com/cssvista/

    This program will also enable you to edit in IE

    Frank
    What does this have to do with the question? Please only contribute if you actually have something to contribute (to the solution of the respective problem/question). If you donít, wellÖ just donít reply.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Guys,

    Thanks a lot. Now I know what I'm doing for the next while or so!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •