I am trying to make a website for the students in my school but

Question

0

Asked: June 13, 20262026-06-13T10:53:42+00:00 2026-06-13T10:53:42+00:00

I am trying to make a website for the students in my school but

0

I am trying to make a website for the students in my school but I am having a small problem. My when I scroll left or right my background does not cover the whole page it just stops where the side of the page was before scrolling but when you make the browser window wider the problem goes away.

the html

 <!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>SST Student Home</title>
        <LINK REL="SHORTCUT ICON" HREF="favicon.ico" type="image/x-icon"> 

        <link href="css/main.css" rel="stylesheet" type="text/css" /> 
            <!-- This CSS is just boring -->
        <link href="css/menu2.css" rel="stylesheet" type="text/css" /> 

        <link href="css/footer.css" rel="stylesheet" type="text/css" /> 



            <!-- CSS slider -->
        <link href="css/slider/reset.css" rel="stylesheet" type="text/css" /> 
            <!-- This CSS creates a ninja that kicks the butt of any browser that rebels against conformity *cough*IE*cough* -->
        <link href="css/slider/main.css" rel="stylesheet" type="text/css" />
            <!-- This CSS creates the magic for the slider -->
        <link href="css/scrollbar.css" rel="stylesheet" type="text/css" />


        <!-- Meta Tags -->
        <meta name="Description" content="The Beaverton School of Science and Technology's website for the students currently in attendence.  Contains information on school assignments, clubs, staff, and more!" ></meta>
        <meta name="Keywords" content="sst, student, science, technology, highschool"></meta>


        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Philosopher:400,700|Aldrich|Macondo|Akronim' rel='stylesheet' type='text/css'>


    </head>
    <body>
        <!-- <a href="http://www.google.com" class="roll"><span>hello</span></a> -->
        <!--[if IE]>
            Errors may occur in Internet Explorer. Assimilate <a href="https://www.google.com/intl/en/chrome/browser/">here</a> to properly view this page.
        <![endif]-->
        <noscript>
            Errors may occur if javascript is not enabled.
        </noscript>
        <header>
            <div id="headdiv" >
                <img id="headimage"  src="logo3croped2colorinvert.png" alt="logo3"/>
            </div>
        </header>

        <div body="backround">  
            <nav>
                <div menu="menu" >
                    <ul menu="menu">
                        <li menu="active"><a menu="active", href="#home">Home</a></li>
                        <li menu="null"><a menu="null", href="http://www.ssthub.com/homepage.html">News</a></li>
                        <li menu="null"><a menu="null", href="#clubs">Clubs</a></li>
                        <li menu="null"><a menu="null", href="#quotes">Quotesbook</a></li>
                        <li menu="null"><a menu="null", href="#contact">Contact</a></li>
                        <li menu="null"><a menu="null", href="#about">About</a></li>
                    </ul>
                </div>

            </nav>

            <br></br>
            <br></br>
            <br></br>

             <div class="container">
                 <div id="slider">
                     <div id="mask">
                            <ul>
                                <li>
                                    <a href="#" title="View my first image link"><img src="images/snow.png" /></a>
                                </li>
                                <li>
                                    <a href="#" title="View my second image link"><img src="images/robot.png" /></a>
                                    <span>
                                        <h2>Image Caption</h2>
                                        <p>Lorem ipsum dolor...</p>
                                    </span>
                                </li>
                                <li>
                                    <a href="#" title="OSU MoMo"><img src="images/momo.png" /></a>
                                    <span>
                                        <h2>Image Caption</h2>
                                        <p>Lorem ipsum dolor...</p>
                                    </span>
                                </li>
                                <li>            
                                    <a href="#" title="View my third image link"><img src="images/ball.png" /></a>
                                </li>
                            </ul>
                        </div>
                    <div id="progress">
                    </div>
                    <div id="overlay">
                    </div>
                    <div id="pause">
                    </div>
                </div>
            </div>

            <br></br>

            <center class="bodycontainer">

                <div body="c1" body="cbackround">

                Small batch assumenda messenger bag keytar, fingerstache laboris kale chips vinyl est selvage you probably haven't heard of them pop-up enim cliche mixtape. Cray stumptown narwhal mustache minim, bushwick nihil synth ut odd future est accusamus proident yr nisi. Cliche lo-fi messenger bag mixtape raw denim, vice ut pinterest fugiat biodiesel. Kale chips voluptate mixtape mumblecore, duis eiusmod aesthetic pop-up. Four loko skateboard direct trade sed labore +1, retro hoodie reprehenderit portland. Shoreditch incididunt sartorial jean shorts quis, organic deserunt PBR vinyl laborum helvetica sriracha. Ethical minim irure single-origin coffee magna gastropub mollit in, gentrify wayfarers pop-up qui aesthetic quis.

                </div>
                <div body="c23holder">
                    <div body="c2" body="cbackround">

                    Cray cardigan kogi kale chips brooklyn, anim lomo you probably haven't heard of them pour-over pickled sapiente incididunt id. Elit qui vice non magna occupy odio, post-ironic placeat. Excepteur williamsburg occupy, echo park post-ironic butcher authentic in irony ad brooklyn. Ethical nostrud consequat laborum, fingerstache next level food truck aliquip. Viral adipisicing consequat you probably haven't heard of them, narwhal fanny pack nulla mustache irure banh mi biodiesel. Gastropub voluptate godard, minim ethical +1 skateboard organic mustache put a bird on it post-ironic truffaut. Four loko truffaut helvetica street art VHS, irure small batch ethnic williamsburg synth consequat.
                    </div>
                    <div body="c3" body="cbackround">
                        Mixtape carles magna next level PBR, wolf placeat. Ethnic DIY swag carles mlkshk eiusmod, quis pour-over magna viral. Letterpress labore freegan, wes anderson mumblecore raw denim typewriter bushwick do ennui 3 wolf moon. Authentic kale chips odio fingerstache culpa, proident you probably haven't heard of them consequat beard ea ex velit. Voluptate street art tattooed, cillum quis terry richardson dreamcatcher wolf banksy mollit. Aliquip sint irure mollit non pop-up. Nostrud keytar synth duis williamsburg leggings butcher, delectus proident wes anderson.
                    </div>

                </div>
            </center>

            <footer class="footer">
                <div footer="1">
                    <div footer="image">
                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">
                            <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" />
                        </a>

                        <a href="http://www.w3.org/html/logo/">
                            <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics-multimedia-performance.png" width="107.3438" height="30" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, Multimedia, and Performance &amp; Integration" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, Multimedia, and Performance &amp; Integration">
                        </a>
                    </div>  
                </div>
                <div body="c23holder">
                    <div footer="2">
                        what
                    </div>
                    <div footer="3">

                    </div>
                </div>  
            </footer>
        </div>
    </body>
</html>

the css

  menubackround{

    }
    nav {
        clear:left;
        float:left;
        padding:0;
        border-top:5px solid #370070;
        width:100%;
        overflow:hidden;
        font-family: 'Marcellus SC', serif;
        position:relative;
    }

    div[menu]
    {
        height:60px;
    }

    ul[menu]
    {
        float:left;
        margin:0;
        padding:0;
        list-style:none;
        position:relative;
        left:5%;
        text-align:center;
    }
    ul[menu] li[menu] {
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:5%;
    }
    ul[menu] li[menu="null"] a[menu="null"] {
        display:block;
        float:left;
        margin:0 1px 0 0;
        padding:30px 10px 6px 10px;
        background:#A30001;
        text-decoration:none;
        color:#fff;
    }    
    ul[menu] li[menu="active"] a[menu="active"] {
        display:block;
        float:left;
        margin:0 1px 0 0;
        padding:35px 10px 6px 10px;
        background:#AA0000;
        text-decoration:none;
        color:#fff;
    }
    ul[menu] li[menu="null"] a:hover[menu="null"] {
        padding:35px 10px 6px 10px;
        background:#700000;
    }

    ul[menu] li[menu="active"] a:hover[menu="active"] {
        padding:40px 10px 6px 10px;
        background:#700001;

    *{
    margin: 0;
    padding: 0;
    background="fixed";
    }

    #headdiv{
    background-color:#000033;
    width: 100%;
    height:100px;
    }

    #headimage{
    background-color:#000033;
    clear:left;
    padding:0;
    width: 500px;

    }

    #ieerror{
    opacity: 0%;
    }

    center{
    height:400px;
    }

    div[body="backround"]{

    width: browserwidth px;

    height: browserheight px;
    background: -moz-linear-gradient(top,  #000033 0%, #005596 7%, #005596 26%, #005596     42%, #005596 57%, #008bb2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000033),   color-stop(7%,#005596), color-stop(26%,#005596), color-stop(42%,#005596), color-  stop(57%,#005596), color-stop(100%,#008bb2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #000033 0%,#005596 7%,#005596 26%,#005596   42%,#005596 57%,#008bb2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #000033 0%,#005596 7%,#005596 26%,#005596   42%,#005596 57%,#008bb2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #000033 0%,#005596 7%,#005596 26%,#005596 42%,#005596 57%,#008bb2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000033', endColorstr='#008bb2',GradientType=0 ); /* IE6-9 */
    }
    body {
    min-width: 700px;
    padding:0px;
    margin:0 auto;
    font-family:Tahoma, Geneva, sans-serif;
    \\\\\\background-color:#005596;   //#0033CC #FFCFA2 
    background: ##005596; /* Old browsers */

    font-size:16px;
    line-height:22px;
    text-shadow:1px 1px 1px #362c30;

    }
    .roll:hover {text-decoration:none;}

    .roll span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
    }
    .roll:hover span {
        background: #DD4D42;


        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
    .container {
    width:960px;
    margin:auto;
    overflow:visible;
    }

    .bodycontainer {
    width:1260px;
    margin:auto;
    overflow:visible;
    }

    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    li
    {
    display:inline;
    }

    a
    {
    text-decoration:none
    }

    #body{
    width:900px;
    height:400px;
    position:relative;
    margin:0px auto 0;
    }
    li[body="backround"]{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#EEEEEE;
    min-width:300px;
    border-radius:25px;
    -moz-border-radius:25px;
    }

    div[body="c1"]{
    float:left;
    float:up;
    position:relitive;
    top:0;
    width:400px;
    height:370px;
    border-radius:15px;
    -moz-border-radius:15px; /* Firefox 3.6 and earlier */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,     rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color- stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color-stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0', endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


    }
    div[body="c23holder"]{
    float:right;
    float:up;
    position:relitive;
    top:0;
    width:830px;
    }

    div[body="c2"]{
    float:left;
    position:relitive;
    float:up;
    top:0;
    width:400px;
    height:370px;
    border-radius:15px;
    -moz-border-radius:15px; /* Firefox 3.6 and earlier */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%, rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color-stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(192,192,192,0.88)     0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0',     endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    }
    div[body="c3"]{
    float:right;
    float:up;
    position:relitive;
    top:0;
    width:400px;
    height:370px;
    border-radius:15px;
    -moz-border-radius:15px; /* Firefox 3.6 and earlier */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%, rgba(192,192,192,0.88) 2%, rgba(192,192,192,0.17) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color- stop(0%,rgba(192,192,192,0.88)), color-stop(2%,rgba(192,192,192,0.88)), color- stop(100%,rgba(192,192,192,0.17))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(192,192,192,0.88) 0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(192,192,192,0.88)     0%,rgba(192,192,192,0.88) 2%,rgba(192,192,192,0.17) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c0c0c0',    endColorstr='#2bc0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    }

    div[nojs="nojs"]
    {
    font-family:Tahoma, Geneva, sans-serif;
    color:#ff0000;
    font-size:50px;
    }

    div[body="cbackround"]{
    background: -moz-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,   rgba(0,85,150,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-  stop(0%,rgba(1,3,5,1)), color-stop(100%,rgba(0,85,150,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1)   100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(1,3,5,1) 0%,rgba(0,85,150,1)      100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(1,3,5,1) 0%,rgba(0,85,150,1) 100%); /*     W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010305',   endColorstr='#005596',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

    footer
    {
    clear: both;
    z-index: 10;
    float:center;
    padding:-30;
    position: relative;
    width: 100%;
    bottom: 0;
    color:#ffffff;
    background-color:#000000;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:8px;
    max-height:30px;
    overflow:hidden;

    }

    div[footer="23holder"]{
    float:right;
    position:relative;
    text-align:center;
    text-decoration:none;
    width: 67%;
    left:75%;
    }

    div[footer="1"]{
    float:left;
    position:relative;
    text-align:left;
    text-decoration:none;
    width: 33%;
     }
     div[footer="2"]{
    float:left;
    position:relative;
    text-align:center;
    text-decoration:none;
    width: 33%;
      }
     div[footer="3"]{
    float:right;
    position:relative;
    text-align:right;
    text-decoration:none;
    width: 33%;
      }

    div[footer="small"]{
    font-size:12px;
    float:right;
    width: 1%;

     }
    div[footer="image"]{
    float:left;
    width: 99%;
    }

Also there is some css for the slider which I did not post if you need it I can post that as well.

I am new to this forum so pleas forgive my styling problems.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-13T10:53:44+00:00

You need to fix the width of the body, there are ways of doing it. Either you decide the best resolution for website and set the width accordingly, like for 1024x768 resolution choose the width as 1000px.

This can be done dynamically as well using JavaScript, where the width of the body is decided on runtime depending upon the resolution of the client machine.

JavaScript Code:

var theWidth, theHeight;
// Window dimensions:
if (window.innerWidth) {
  theWidth = window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
  theWidth = document.documentElement.clientWidth;
}
else if (document.body) {
  theWidth = document.body.clientWidth;
}
if (window.innerHeight) {
  theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
  theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
  theHeight = document.body.clientHeight;
}
if (screen.width > theWidth) {
  theWidth = screen.width;
}
cssCode = 'body{
             width:' + (theWidth - 20) + 'px;
             min-height:' + (theHeight - 50) + 'px;
             margin:0;
           }';
addCss(cssCode);

function addCss(cssCode) {
  var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am trying to make a website for the students in my school but

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply