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 9 of 9
  1. #1
    afe
    afe is offline
    Banned
    Join Date
    Sep 2007
    Posts
    146
    Thanks
    43
    Thanked 0 Times in 0 Posts

    site help with layout

    Hello, this is my website. www.athletes4excellence.com/trackandfield.php
    I was wondering if anyone knew how to make the sides be as long as where the Copyright panel is. So I want it to be even on everypage with the content (middle part) and I also want that to be like that too to touch the Copyright panel.

    Thanks a lot.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Well, since you have a fixed width you could do a cheat. I would make a background image that's the same width as your #contentwrapper div, maybe 10px high, then then put the two bands of color or imagery, each 145px wide. Then I'd set the background of the #contentwrapper div to the following:

    #contentwrapper {background: #fff url(images/columns.gif) repeat-y; }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • Users who have thanked marilynn.fowler for this post:

    afe (09-23-2007)

  • #3
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    This should explain it.

  • Users who have thanked PappaJohn for this post:

    afe (09-23-2007)

  • #4
    afe
    afe is offline
    Banned
    Join Date
    Sep 2007
    Posts
    146
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Ohh ok thanks. http://www.athletes4excellence.com/trackandfield.php However, how do I make the middle part touch the copyright?

  • #5
    afe
    afe is offline
    Banned
    Join Date
    Sep 2007
    Posts
    146
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Anyone please and thanks very much.

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    It's not touching the copyright div because the main content divs aren't as long as the advert bar on the right.

    I'm with marilynn, you should put a faux column background on the back of the wrapper div that encapsulates everything.

    Dan from Simplebits wrote an article about this technique for ALA--you can find it here:

    http://www.alistapart.com/articles/fauxcolumns/

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    I think you missed an inner wrapper that is used in the bonrouge example.

    Code:
    <div id="wrap">
      <div id="header">Header</div>
      <div id="inner-wrap">
        <div id="left">Left</div>
        <div id="main">
          <div id="right">Right</div>
          <div id="content">Main Content</div>
        </div>
      </div>
      <div id="footer">Footer</div>
    </div>
    Notice how bonrouge closes the inner-wrap, which encloses the three columns, then inserts the footer div. After the footer the outer wrap is closed. This is important for the styling to work and let the columns flow down to touch the footer.

    In addition, you have some complex syntax errors to fix. You have duplicate <body> tags for one thing. No sense tweaking the html and css until this validates.

    Code:
    <body>
    <div id="maincontainer">
    
    <div id="topsection"><div class="top"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
    <!--
    body {
    	background-image: url(New%20Design/backgroundsmall5pxhigh.jpg);
    }
    -->
    
    </style></head>
    
    
    <body>
    <div align="center"><span class="style1"><img src="AFE/Banner/newtop750by140px.gif" width="750" height="114" /></span></div>
    </body>
    </html></div></div>
    Validate your code!

    Gary

  • #8
    afe
    afe is offline
    Banned
    Join Date
    Sep 2007
    Posts
    146
    Thanks
    43
    Thanked 0 Times in 0 Posts
    I don't understand how to validate. I tried the codes, but they did not work.

  • #9
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Touch this link.

    http://validator.w3.org/check?uri=ht...Inline&group=0

    That is the page which shows the validation errors. To get a page validated, browse to this link : http://validator.w3.org/ and enter the page URL into the input field, as per the page's instructions. The output page will be a list of the problems the validator has with your html page. Find the place in your source code and write new code to fix the problems and repeat the validation/repair steps until the page is valid.


  •  

    Posting Permissions

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