Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Easy Fix

  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Easy Fix

    I have my page perfectly coded exactly how I want it, except there is one mishap. The page is scrolling horizontally and I don't know why! There is nothing over there, so there is no need for it to scroll at all, can you please check my code to remove this annoying thing? Should be an easy fix... or I would think.

    #containermain {
    position:relative;
    width: 1024px;
    height: 760px;

    }

    I believe it has to do with that line of code, not sure what to change.


    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title>Everlasting Sacred Path</title>
    <script type="text/javascript" src="java.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="images/flavicon.png" type="image/png" />
    
    </head>
    
    <body>
    
    <div id="containermain">
    
    <div id="logo"><img src="images/esp.png"></div>
    
    <div id="navbar"><img src="images/navbar.png"></div>
    
    <div id="bodytop"><img src="images/bodytop.jpg"></div>
    
    <div id="navtop"><img src="images/navtop.png"></div>
    
    <div id="navbottom"><img src="images/navbottom.png"></div>
    
    <div id=home><a href="index.html" onmouseover="image1.src='images/home2.png';"
    onmouseout="image1.src='images/home1.png';">
    <img name="image1" src="images/home1.png" border=0></a>
    </div>
    
    <div id=about><a href="about.html" onmouseover="image2.src='images/about2.png';"
    onmouseout="image2.src='images/about1.png';">
    <img name="image2" src="images/about1.png" border=0></a></div>
    
    <div id=lore><a href="lore.html" onmouseover="image3.src='images/lore2.png';"
    onmouseout="image3.src='images/lore1.png';">
    <img name="image3" src="images/lore1.png" border=0></a></div>
    
    <div id=alliance><a href="allies.html" onmouseover="image4.src='images/alliance2.png';"
    onmouseout="image4.src='images/alliance1.png';">
    <img name="image4" src="images/alliance1.png" border=0></a></div>
    
    <div id=members><a href="members.html" onmouseover="image5.src='images/members2.png';"
    onmouseout="image5.src='images/members1.png';">
    <img name="image5" src="images/members1.png" border=0></a></members></div>
    
    <div id=forums><a href="forums.html" onmouseover="image6.src='images/forums2.png';"
    onmouseout="image6.src='images/forums1.png';">
    <img name="image6" src="images/forums1.png" border=0></a></div>
    
    
    <div id="topleft"><img src="images/topleft.png"></div>
    
    <div id="topright"><img src="images/topright.png"></div>
    
    <div id="content">TEST TEXTTEST TEXTTEST TEXT
     the following rules and standards of conduct.  Our rules and simple, and rely upon a certain degree of common sense and courtesy.  If you are accepted into the guild, then chances are it is apparent that this is no issue for you.
    
        *
     No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.
    
     No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.
    No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.No game cheats or exploits of any kind are allowed.  Anyone found to be taking an unfair advantage through these means will be removed from the guild.  Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.
    
    
    </div>
    
    <div id="footer"><img src="images/bodyfooter.png"></div>
    
    </div>
    </body>
    
    
    </html>
    CSS
    Code:
    a {
        outline:none; /* FF1.5+ IE7+*/
        -moz-outline: /* FF<=1.5*/
    }
    
    body
    {
    background-image:url('images/sylvthackerybg.jpg');
    background-attachment: fixed;
    background-position: center top;
    background-color: black;
    color:#c0b79a;
    font-family:georgia, "times new roman", serif;
    }
    
    #containermain {
    	position:relative;
    	width: 1024px;
    	height: 760;
    
    }
    
    #navbar {
     position: absolute;
     top: 12%;
     left:  1%;
     width: 977px;
     height: 50px;
    }
    
    
    #logo {
     position: absolute;
     top: 0px;
     left: 30%;
     width: 330px;
     height: 75px;
    }
    
    #bodytop {
     position: absolute;
     top: 19%;
     left: 1%;
     width: 977px;
     height: 67px;
    }
    
    #middle {
     position: absolute;
     top: 59%;
     left: 33.2%;
     width: 636px;
     height: 279px;
    }
    
    #navtop {
     position: absolute;
     top: 25%;
     left: 5%;
     width: 150px;
     height: 72px;
    }
    
    #navbottom {
     position: absolute;
     top: 40%;
     left: 5%;
     width: 636px;
     height: 279px;
    }
    
    #home {
     position: absolute;
     top: 13.8%;
     left: 7.2%;
     width: 132px;
     height: 33px;
    }
    
    #about {
     position: absolute;
     top: 13.8%;
     left: 20.2%;
     width: 132px;
     height: 33px;
    }
    
    #lore {
     position: absolute;
     top: 13.8%;
     left: 33.2%;
     width: 132px;
     height: 33px;
    }
    
    #alliance {
     position: absolute;
     top: 13.8%;
     left: 51.2%;
     width: 132px;
     height: 33px;
    }
    
    #members {
     position: absolute;
     top: 13.8%;
     left: 64.2%;
     width: 132px;
     height: 33px;
    }
    
    #forums {
     position: absolute;
     top: 13.8%;
     left: 77.2%;
     width: 132px;
     height: 33px;
    }
    
    #content {
     position:relative;
     top: 225px;
     left:27%;
     width: 65%;
    }
    
    
    #footer {
     position:relative;
     left:.9%;
     padding-top:250px;
    }
    
    #container {
    position:relative;
    background: url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
    left:1.1%;
    top:199px;
    }
    
    #topright {
     position: absolute;
     top: 25%;
     left: 67%;
     width: 659px;
     height: 179px;
    }
    
    #topleft {
     position: absolute;
     top: 25%;
     left: 24%;
     width: 659px;
     height: 179px;
    }
    
    #containermain {
    	position:relative;
    	width: 1024px;
    	height: 760px;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    Jave
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    
    image1 = new Image();
    image1.src = "images/home2.png";
    
    image2 = new Image();
    image2.src = "images/about2.png";
    
    image3 = new Image();
    image3.src = "images/lore2.png";
    
    image4 = new Image();
    image4.src = "images/allies2.png";
    
    image5 = new Image();
    image5.src = "images/members2.png";
    
    image6 = new Image();
    image6.src = "images/forums2.png";
    
    // End -->
    </script>
    Last edited by celexia; 07-02-2010 at 09:23 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The horizontal scrollbar appears for me at 1280/800 because of the absolutely positioned div #topright, which is 659px wide and positioned with a left value of 67%.

    You will get a scrollbar even without this at 1024/768 as #containermain is itself 1024px wide - and that doesn't leave any space for scrollbars, browser windows etc etc.

    You have an awful lot of absolute positioning in your code - it's easier and simpler to avoid this in most cases, as it can lead to a lot of issues downstream - have a look here.


  •  

    Posting Permissions

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