how to get rid of long horizontal long pages

Giganews Newsgroups
Subject: how to get rid of long horizontal long pages
Posted by:  soraino‚Ķ@gmail.com
Date: Wed, 13 May 2015

Hi, my webpage right now have some abnormally long page horizontally and i really don't know what is causing it so i hope that you guys can help me out here.

my html look like this

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stuff.css">
<title>My profile</title>
</head>

<body>
<!--my navigation tab-->
<div id="navtab1">
  <p>
    <a id="navtag" href="aboutme.html"><img src="images/aboutme.gif"></a>
    <a id="navtag" href="achievment.html"><img src="images/myachievement.gif"></a>
    </div>
    <div id="myprofile">
    <a id="navtag" href="wcdca1.html"><img src="images/myprofile.gif"></a>
    </div>
    <div id="navtab2">
    <a id="navtag" href="acknowlegdement.html"><img src="images/myacknowledgement.gif"></a>
    <a id="navtag" href="album.html"><img src="images/myalbum.gif"></a>
  </p>
<!--end of my navigation tab-->
</div>
<!--div tag for paragraph-->
  <div id="parabox">
  <p id="para1">When I get <span id="popup">Sad</span> , I stop being sad and be <span id="popup">Awesome</span> instead.</p>
  <p id ="para2"> -Barney Stinson,<br>(How I Met Your Mother) </p>
  </div>

</body>
</html>

my external css file looks like this

@charset "utf-8";
/* CSS Document */

body{
    background-image:url(images/background_2.jpg);

/*i try to use this line below to solve the problem but didnt work*/    

    background-repeat:no-repeat;
    }

/*i manually adjust the position of my nav bar*/

#navtab1{
    border-width:0em;
    border-style:hidden;
    margin-left:auto;
    margin-right:auto;
    width:900em;
    padding:1em;
    position:absolute;
    left:35%;
        top:23%;
        margin:-100px 0 0 -251px;
}

#navtab2{
    border-width:0em;
    border-style:hidden;
    margin-left:auto;
    margin-right:auto;
    width:900em;
    padding:1em;
    position:absolute;
    left:35%;
        top:26%;
        margin:-100px 0 0 293px;
}

#myprofile{
    position:absolute;
    z-index:20;
    left:21.4%;
        top:16%;
        margin:-100px 0 0 299px;
}

/*just to make my nav tab look nicer*/

img{
    float:left;

}

#popup{
                  font-weight:bold;
                  color:white;
          -moz-transition:0.2s all;
          -webkit-transition:0.2s all;
          -o-transition:o.4s ease;
          position:relative;
}

#parabox:hover #popup{
              font-size:22px;
          display:inline-block;
          background-color:hsla(359,88%,55%,0.78);
  }
#para1,#para2{
    color:white;
}

#para1{
    text-align:center;
    font-size:18px;
}
        
#para2{
    text-align:right;
}
#parabox{
    border-width:0em;
    border-style:hidden;
    margin-left:10em;
    margin-right:10em;
    border-radius:10px;
    padding:1em;
    position:absolute;
        width:500px;
        height:100px;
        z-index:10;
        top:57%;
        left:50%;
        margin:-100px 0 0 -253px;
        background-color:hsla(0,0%,0%,0.33);
        
}

please help me as this is my school project.

Replies