10 Replies Latest reply: May 1, 2013 10:36 AM by Nancy O. RSS

    My website is TOO WIDE (help)

    shay14

      I'm a beginner as you can probably tell, and i hate the fact that my site has an horizontal scroll bar, what can i do to resize it so it would dissapear.  the easiest way would be preferable as I have got a project to hand in 2 days

       

      the website is www.fitnesscovered.co.uk

       

      thanks

        • 1. Re: My website is TOO WIDE (help)
          Ben Pleysier CommunityMVP

          Whoa! Where to start!

           

          Fix these first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.fitnesscovered.co.uk%2F

           

          Then come back here for the rest.

          • 2. Re: My website is TOO WIDE (help)
            shay14 Community Member

            jesus, that's a hell of a lot

             

            do you know the answer to my question?

            • 3. Re: My website is TOO WIDE (help)
              Ben Pleysier CommunityMVP

              Yes!

               

              Fix the errors first. Like there is no proper document structure that contains all of the following

              <!doctype html>

              <html>

              <head>

              <meta charset="utf-8">

              <title>Untitled Document</title>

              </head>

               

              <body>

              </body>

              </html>

              Over use of absolute positioned elements (AP's) is to be discouraged. In a normal layout like yours, there is no need for AP's

              • 4. Re: My website is TOO WIDE (help)
                osgood_ CommunityMVP

                shay14 wrote:

                 

                jesus, that's a hell of a lot

                 

                do you know the answer to my question?

                 

                As Ben says you don't have any valid doctype declared in the page. Even if you do insert one that won't fix your problems.

                 

                You have a <div> set at 1495px in the code:

                <div id="apDiv51"><img src="linebottom.jpg" width="1495" height="23" />

                 

                You really need to position all those absolutely positioned <divs> further to the left. Using AP <divs> is not the way to construct websites. The max-width I build my websites at exceeds no more that 980px. I think you can be a little more generous than that but 1495px is way to wide. I'd stick to around 1000px max.

                • 5. Re: My website is TOO WIDE (help)
                  shay14 Community Member

                  so where do i place this code?

                   

                  im really new to this whole coding

                  • 6. Re: My website is TOO WIDE (help)
                    osgood_ CommunityMVP

                    This goes at the start of your page:

                     

                    <!doctype html>

                    <html>

                    <head>

                    <meta charset="utf-8">

                    <title>Untitled Document</title>

                     

                     

                    Followed by your css and scripts

                     

                     

                    The closing head tag goes after the closing </script> tag.

                     

                    </head>

                     

                     

                     

                     

                    The closing </body> and closing </html> tag goes after the last closing </div> tag on your page.

                     

                    </body>

                    </html>

                     

                     

                    But as I say that won't fix the width issue.

                    • 7. Re: My website is TOO WIDE (help)
                      shay14 Community Member

                      thanks, so what will fix the issue, its very important to me, because once its fixed, then i can add my content, which i have to do now

                      • 8. Re: My website is TOO WIDE (help)
                        Ben Pleysier CommunityMVP

                        Copy and paste the following in a new document called junk.html or similar. Then view in your favourite browser.

                        <!doctype html>

                        <html>

                        <head>

                        <meta charset="utf-8">

                        <title>Untitled Document</title>

                        <style>

                        html {

                            background: url(http://www.fitnesscovered.co.uk/bg.png);

                        }

                        body {

                            width: 876px;

                            margin: auto;

                        }

                        .header {

                            background: url(http://www.fitnesscovered.co.uk/logofit.png) no-repeat;

                            height: 120px;

                        }

                        .header .searchbox {

                            color: white;

                            text-align: right;

                            padding: 50px 60px 0 0;

                        }

                        .nav {

                            background: url(http://www.fitnesscovered.co.uk/navbar.png) no-repeat 20px;

                            height: 85px;

                        }

                        .nav .menu {

                            color: white;

                            padding: 20px 0 0 60px;

                        }

                        .banner {

                            background: url(http://www.fitnesscovered.co.uk/HEADER1.jpg) no-repeat;

                            height: 379px;

                        }

                        </style>

                        </head>

                         

                        <body>

                        <div class="header">

                            <div class="searchbox">Search Box goes here</div>

                        </div>

                        <div class="nav">

                            <div class="menu">Menu Items go here</div>

                        </div>

                        <div class="banner"></div>

                        </body>

                        </html>

                        • 9. Re: My website is TOO WIDE (help)
                          osgood_ CommunityMVP

                          shay14 wrote:

                           

                          thanks, so what will fix the issue, its very important to me, because once its fixed, then i can add my content, which i have to do now

                          The problem is you have set the construction up incorrectly so there is no quick fix.

                           

                          I'm assuming that you want the page horizontally centered on the screen, not stuck to the left hand edge of the browser window. If you just re-position all of your absolutely positioned <divs> back over to the left more and reduce the width of the <div> that is set at 1495px this will STOP the horizontal scroll bar BUTthe page is then 'stuck' to the left side of the browser window.

                           

                          IF you want to continue to use absolulety poositioned <divs> AND want the page horizontally centered in the browser then you have to wrap ALL of the absolutely positioned <divs> in a 'wrapper' <div>

                           

                          <div id="wrapper">

                           

                          ALL of the absolutely positioned <divs> go here

                           

                           

                          </div><!-- end wrapper -->

                           

                          Set the wrapper css: (the max-width is 980px so no <div>  inside should exceed this width)

                           

                          #wrapper {

                          width: 980px;

                          margin: 0 auto;

                          position: relative;

                          }

                           

                          Now because the position of the wrapper is set to relative you can re-position your absolutely positioned <divs> inside it. Their left/top co-ordinates take their position from the top/left of the wrapper <div>

                           

                          Would I do it like this NO because using absolutely positioned <divs> to construct a web page is flawed as you are now beginning to understand at a cost - a time cost.

                          • 10. Re: My website is TOO WIDE (help)
                            Nancy O. CommunityMVP

                            This is old ground which we've already covered in one of your previous threads. 

                            http://forums.adobe.com/message/5261529#5261529

                             

                            Avoiding the truth won't make these problems go away.  You must rebuild your layout.  No way around it.

                             

                             

                            Nancy O.