Skip navigation
shay14
Currently Being Moderated

My website is TOO WIDE (help)

Apr 30, 2013 9:06 PM

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

 
Replies
  • Currently Being Moderated
    Apr 30, 2013 10:48 PM   in reply to shay14

    Whoa! Where to start!

     

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

     

    Then come back here for the rest.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 11:07 PM   in reply to shay14

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 11:42 PM   in reply to shay14

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 11:47 PM   in reply to shay14

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 12:20 AM   in reply to shay14

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 12:35 AM   in reply to shay14

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:36 AM   in reply to shay14

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points