I create a website with a 1024 x 728 size. After I create the html amazingly, the horizontal space is more than 1024, larger than the background that I create. There are around 400 px more space to right side of the background which is filled with a blank white space ( I wonder why?).

I do not want to see horizontal scroll in my website only vertical scroll.

This is my whole website css.


body{background-image1:url('../images/indonusa3.jpg'); background-repeat: repeat-y; background-position: center top; height: 800px; }

#logo {margin: 10px 0 0 10px; }

#navigation {background-image:url('../images/nav.jpg'); background-repeat: repeat-x; width: 900px; height: 80px; z-index: 2; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 50px;}

#search {margin: -45px 0 0 720px;}
input {width: 100px; height:30px;}
#sbutton {margin: -28px 0 0 827px;}

#slidesnav {margin-top: 400px; }

#products { margin: 50px 0 0 250px; }

#fnav {background-color: white; width: 900px; height: 50px; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 20px;}

#fnav ul {list-style-type: none; margin:0; padding:0; text-align:right; margin-top:10px; margin-right:5px; }

#fnav ul li {display: inline; }

#fnav ul li a{text-decoration: none; color: black; font-family: arial; font-size: 11px; padding: .2em .5em;}

#fnav ul li a:hover{text-decoration: underline;}

/* special for slideshow navigation */

#slideshow { left: 35px; float: left; margin: 10px; z-index: 0;}
#nav { width: 270px; margin: 170px 0 0 225px; float: left; position: absolute; z-index: 1;}
#nav li { float: left; margin: 0 0 0 4px; list-style: none; background: url(../images/slidesnav1.jpg) no-repeat top;}
#nav a { width: 20px; height: 20px; padding: 0px; display: block; border: 0px solid #ccc;}
#nav li.activeSlide a { /* background: #88f */ background: url(../images/slidesnav2.jpg) no-repeat top;}
#nav a:focus { outline: none;}
#nav img { border: none; display: block;}
pre { clear: left }

/* end slideshow nav */

Recommended Answers

All 10 Replies

remove width:900; from navigation and give 100% width in body.

commented: u make a big mistake +0

ok, I did. I wonder why there is this around 400px blank white space on the right side of the body that I can't even trace it with css (firebug).

is your website online can you give me url so i can help you

Unfortunately, it's not online yet. It's something beyond the body width. Since the firebug highlight on the body width is smaller than the whole screen.

I wonder what that is.

do you have the html available, maybe that'll help us find the problem?

I think I find the part of the problem.


#cssmenu {padding: 0; margin: -50px 0 0 170px; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; } 
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} 
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 
#cssmenu ul ul li {float: none; font-weight: normal;} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } 
#cssmenu ul li:hover > ul { visibility: visible;} 
#cssmenu ul ul {margin-top: 0; bottom: 0; left: 0;} 
#cssmenu a { display: block; line-height: 2em; text-decoration: none; background-color: none; color: black; padding1: .5em 1em; padding: .5em 0em; font-family: arial; font-size:16px;} 
#cssmenu a:hover{ display: block; line-height: 2em; text-decoration: none; background-color: white; color: black; padding1: .5em 1em; padding: .5em 0em;font-family: arial;font-size:16px;} 

#cssmenu .onelayer{background-color: #c4f8f3; padding1: .5em 1em;} 
#cssmenu .onelayer a:hover{background-color: white; padding1: .5em 1em;}


<link href= "css/nav.css" rel="stylesheet" type="text/css" media="screen">

<div id="navigation">

<div id="logo"><img src="images/logo2.png" width="160" height="60"></div>

<div id='cssmenu'>
     <li class='active'><a href='index.php'>|    Home    |</a></li>
     <li class='has-sub'><a href='index.php'>    Product & Services    |</a>
           <li class='onelayer'><a href='connection.php'>    Connection       ></a>
                 <li class='onelayer'><a href='fo.php'>    Fiber Optic</a></li>
                 <li class='onelayer'><a href='wireless.php'>    Wireless</a></li>
           <li class='onelayer'><a href='collaboration.php'>    Collaboration         ></a>
                 <li class='onelayer'><a href='cloud.php'>    Cloud</a></li>
                 <li class='onelayer'><a href='email.php'>    Email</a></li>
                 <li class='onelayer'><a href='vcon.php'>    VCON</a></li>
                 <li class='onelayer'><a href='sharepoint.php'>    Sharepoint</a></li>
                 <li class='onelayer'><a href='crm.php'>    CRM</a></li>
                 <li class='onelayer'><a href='voip.php'>    Voice</a></li> 
           <li class='onelayer'><a href='solution.php'>    Solution         ></a>
                 <li class='onelayer'><a href='network.php'>    Network Solution</a></li>
                 <li class='onelayer'><a href='system.php'>    System Solution</a></li>
                 <li class='onelayer'><a href='surveillance.php'>    Surveillance</a></li> 
     <li><a href='agent.php'>    Agent    |</a></li>
     <li><a href='aboutus.php'>    About Us    |</a></li>
     <li><a href='contactus.php'>    Contact Us    |</a></li>

<div id="search">
<input type="text" name="search"></div>
<div id="sbutton"><img src="images/search button.jpg"></div>


It's in :

#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 

The part that I comment out:
/* width: 100%; */

If I include width: 100%; then, the horizonal scroll start appearing around 400 px larger to the right. Yet the navigation dropdown appears perfect.

If I comment out " width: 100% ", then the navigation appears imperfect (like in the link below) eventhough the horizontal scroll disappeared.


Any other idea to fix this?

Dear Check your Screen Resulation....

The deal is the background scretch larger than the wallpaper, If I include width: 100%;

If take the code off then, the navigation size start going into chaos just like the link above.

Nevermind, I use the exact width size, instead of percentage.

width: 170px;

you have to style your webpage in css
keep width 100% not in pixels

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.