Results 1 to 5 of 5
  1. #1
    Newbie
    Join Date
    May 22nd, 2009
    Posts
    11
    S.O.S. Newbie Technical Question : Here Is The Code
    A few days ago I explained that I was having a problem with my footer popping up mid page when I pasted banner codes.

    several responders suggested I show you all the code to see were I might have went wrong.

    I had a lght bulb moment, I know very little about html, but is it possible that the page is actually set to be a certain height? and I've exceeded the height limit? my pages are very long. is there a way to re- set it longer.


    HELP!










    **********Below is the original layout**********



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Layout 25</title>

    <style type="text/css" media="screen">
    html, body { margin: 0; padding: 0; }
    body { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
    h2 { color: #333; }
    a { color: #337810; }
    p { margin: 0 0 18px; }
    #wrapper { float: left; width: 100%; margin-left: -33%; }

    /* Header */
    #header { background: #eee; border-bottom: 2px solid #ddd; }
    #header h1 { color: #004b6f; margin: 0 0 3px; padding: 24px 18px 0; }
    #header p { color: #666; font-size: 11px; font-weight: bold; padding: 0 18px; }

    /* Content Style */
    #navigation { border-bottom: 1px solid #ccc; padding-right: 18px; }
    #navigation ul { padding: 0 18px 9px; }
    #extra { border-bottom: 1px solid #ccc; padding-right: 18px; }
    #extra small { font-size: 11px; line-height: 18px; }
    #content p, #extra p { padding-right: 18px; }

    /* Content Positioning & Size */
    #navigation { float: right; width: 30%; }
    #content { margin-left: 34.3%; }
    #extra { float: right; clear: right; width: 30%; } /* Footer */
    #footer { background: #333; border-bottom: 2px solid #999; clear: both; width: 100%; }
    #footer a { color: #eee; }
    #footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
    #footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
    #footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #navigation, #content, #extra { margin-top: 20px; }
    </style>
    <![endif]-->
    </head><body>
    <div id="container">
    <div id="header">


    <h1>This is the header.</h1>
    <p class="description">Usually some sort of tagline or description is placed here.</p>
    </div>
    <div id="wrapper">

    <div id="content">

    <h2>Content Goes Here</h2>
    <p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, <a href="">Followed by an example of a link.</a> There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>



    <div id="navigation">

    EVERYTHING BELOW THIS AREA IS ALIGNED RIGHT- NAVIGATION IS UPPER RIGHT ********************
    <h2>Navigation Here</h2>
    <ul>
    <li><a href="">Navigation 1</a></li>
    <li><a href="">Navigation 2</a></li>
    <li><a href="">Navigation 3</a></li>
    <li><a href="">Navigation 4</a></li>
    <li><a href="">Navigation 5</a></li>
    <li><a href="">Navigation 6</a></li>
    </ul>
    </div>
    <div id="extra">




    <h2>Extra Stuff Goes Here</h2>
    <p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things &ndash; hence it being a called a sidebar.</p>
    <p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>



    ************** BELOW IS WHERE I PRE-COPIED AND PASTED SEVERAL ROWS OF

    <p><div align ="right"></align> IN WAIT FOR THE BANNER CODES. IT WORKS

    GREAT UNTIL THE FOOTER POPS UP.

    **************************************************************************




    <p>div align ="right"
    <p>
    <p>
    <p>
    <p>div align ="right"
    <p>
    <p>
    <p>
    <p>div align ="right"
    <p>
    <p>
    <p>
    <p>div align ="right"
    <p>
    <p>
    <p>




    *************** BELOW IS THE AREA THAT POPS UP MID PAGE *************



    </div>
    <div id="footer">
    <ul>
    <li><a href="">Navigation 1</a></li>
    <li><a href="">Navigation 2</a></li>
    <li><a href="">Navigation 3</a></li>
    <li><a href="">Navigation 4</a></li>
    <li><a href="">Navigation 5</a></li>
    <li><a href="">Navigation 6</a></li>
    </ul>
    <p>Footer stuff goes here. Copyright, disclaimers &ndash; stuff like that.</p>
    </div>
    </div>
    </body>
    </html>

  2. #2
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    Your problem is with CSS. Footers have always been a problem with me when using CSS, because when you use CSS, the browser can sort of forget where the bottom is because css moves things from their natural placement, especially when things are floating around.

    I'm not going to look through your entire code to find how to solve this in a perfect solution. But I do suggest until you learn how css works in more depth to use css to hard code the position of your footer. I don't mean top: 100% but to use top: 500px and then keep changing it to a lower number until you find the perfect placement.

    I do suspect that the optimal solution contains the statement clear: float; in there somewhere.
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  3. #3
    ABW Ambassador 2busy's Avatar
    Join Date
    January 17th, 2005
    Location
    Tropical Mountaintop
    Posts
    5,636
    <p><div align ="right"></align> IN WAIT FOR THE BANNER CODES. IT WORKS
    You have closed a <div> tag with </align> which is not a html tag. An unclosed div tag can be the cause of your problem.
    I did not check out anything else, and it could be that your css is is doing naughty things too, but that one is obvious.

  4. #4
    Newbie
    Join Date
    May 22nd, 2009
    Posts
    11
    Thanks!
    Thanks alot 2busy your telling me that </align> tag was not a legit html code helped me figure it out- while I still had hair left.

    Thanks again for taking the time to respond.

  5. #5
    Affiliate Manager keystrokes's Avatar
    Join Date
    June 15th, 2006
    Location
    VA
    Posts
    128
    2busy is correct and you should not be using a <p> and a <div> tag together in the same declaration.

  6. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Technical question on tracking
    By hazlcha in forum Commission Junction - CJ
    Replies: 2
    Last Post: September 12th, 2006, 09:04 PM
  2. Technical Question!!!!!! Please help!!!!!
    By master_watchmaker in forum ShareASale - SAS
    Replies: 5
    Last Post: June 12th, 2004, 07:48 PM
  3. Technical cookie question
    By Elisac in forum Commission Junction - CJ
    Replies: 5
    Last Post: July 18th, 2003, 07:43 PM
  4. Technical CJ Cookie question
    By br33526 in forum Commission Junction - CJ
    Replies: 16
    Last Post: October 30th, 2002, 12:32 PM

Posting Permissions

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