Problem with webpage scrolling left to right

Discussion in 'CSS' started by Abertawe, Nov 21, 2009.

0
  1. #1
    Hi

    I am new to this webdesign stuff and have been trying to write my site in css.

    I have the page looking the way I want it. Have it centred but it is scrolling left to right.

    I have noted that if I switch off the command - position:relative - the scrolling stops but then my horizontal drop down menu doesnt work.

    I have added the page code below. If someone can kindly let me know what I need to do to change in the code to stop the scrolling and ensure the drop down menu works, I would be most grateful.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <title>test form</title>
    <style type="text/css">
    <head>
    <title>Hotel Deals</title>

    <meta name="description" content="Compare the latest hotel deals.">

    <meta name="keywords" content="hotel deals, hotel deals, hotel deals">

    <!-- Compare the latest hotel deals. -- >

    <style type="text/css">
    a {text-decoration: none;}


    body {
    margin-left: 10%;
    margin-right: 10%;
    background-repeat: no-repeat;
    }

    #header{
    height:60px;
    width: 630px;
    background-color: yellow;
    float: left;
    }

    #adbanner{width: 120px;
    hight: 60px;
    float: left;
    }


    #menu {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    }


    #menu ul {
    padding: 0px;
    margin: 0px;
    width: 750px;
    list-style-type: none;
    float:left;

    }


    #menu ul li {
    width: 150px;
    position:relative;

    }

    #menu li {
    float: left;
    width: 185px;
    background: blue;
    border-top: white 1px solid;

    }



    #menu li ul li {
    float: none;
    }

    #menu a {
    color: #EFEFEF;
    width: 150px;
    text-indent: 5px;
    line-height: 25px;
    display: block;
    text-decoration: none;
    }

    #menu a:hover {
    color: #FFFFFF;
    background-color: #FF0000;
    }

    #menu ul li ul {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    }

    #menu ul li:hover ul {
    visibility: visible;
    }



    #navcontainer ul
    {
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 0;
    width: 150px;
    float: left;
    }

    #navcontainer ul li a
    {
    background: left no-repeat;
    text-align: left;
    font: normal 15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    text-decoration: none;
    color: orange;
    float: left;
    width: 150px;


    }

    #navcontainer ul li a:hover
    {
    background: left no-repeat;
    color: red;
    }

    #maincontent {
    background-color: blue;
    padding: 5px;
    font-size: small;
    float: left;
    width: 590px;
    margin: 0px;
    }



    #footer{
    background-color: white;
    font-size: small;
    float: left;
    margin-left: 200px;
    width: 275px;
    }

    #footer2{
    background-color: pink;
    font-size: small;
    float: right;
    width: 275px;
    }

    blockquote {
    background-color: green;
    }

    #container {
    margin:0 auto;
    width: 750px;

    }

    #contactfooter {
    background:green;
    width:750px;
    float:left;
    }


    #contactfooter div {
    float:left;
    width:250px;
    text-indent:50px;
    }

    </style>
    </head>
    <body>

    <div id="container">

    <div id="header">
    What Are We Going To Call It
    </div>

    <div id="adbanner">

    <a href='http://'><img border=0 src='http://'></a>
    </div>

    <div id="menu">
    <ul>
    <li><a href="#Bar1">Home</a> </li>

    <li><a href="#Bar2">Bar2</a>
    <ul>
    <li><a href="#Sub3">Sub3</a></li>

    <li><a href="#Sub4">Sub4</a></li>
    </ul>
    </li>

    <li><a href="#Bar4">Bar3</a>
    <ul>
    <li><a href="#Sub1">Sub1</a></li>
    <li><a href="#Sub2">Sub2</a></li>
    </ul>
    </li>

    <li><a href="#Bar4">Bar4</a>
    <ul>
    <li><a href="#Sub1">Sub5</a></li>

    <li><a href="#Sub2">Sub6</a></li>
    </ul>
    </li>

    <li><a href="#Bar4">Bar5</a>
    <ul>
    <li><a href="#Sub1">Sub7</a></li>

    <li><a href="#Sub2">Sub8</a></li>
    </ul>
    </li>

    </ul>

    </div>


    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>



    <div id="maincontent">
    <font size="4" face="verdana" font color="#330066" valign=center><b>Hotels</b></font>
    <br>
    <br>
    <a href='http://' target="_blank">
    <font size="3" face="verdana" font color="#330066"><u><b>Hotels</b></u></a>
    <br>
    <font size="2" face="verdana" font color="#330066">
    offer individual and stylish mid-market hotels in key locations across...
    <br>
    <br>
    <a href='http://' target="_blank">
    <font size="3" face="verdana" font color="#330066"><u><b>Es Hotels</b></u></a>
    <br>
    <br>
    <br>
    </div>

    <div id="footer">
    This is page one
    <br />
    this is page two
    <br />
    this is page three
    <br>
    This is page one
    <br />
    this is page two
    <br />
    this is page three
    <br>
    This is page one
    <br />
    this is page two
    <br />
    this is page three
    </div>

    <div id="footer2">
    This is page one
    <br />
    this is page two
    <br />
    this is page three
    </div>

    <div id="contactfooter">
    <div>Site Map</div>
    <div>Privacy</div>
    <div>Contact</div>
    </div>
    </div>

    </body>
    </html>
     
    Abertawe, Nov 21, 2009 IP
  2. ralph.m

    ralph.m Greenhorn

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #2
    Your submenus are inheriting the width:750px of the main #menu ul rule, which is causing the problem. Insert this rule into your CSS:

    
#menu ul ul {
  width: 150px;
}
    Code (markup):
     
    ralph.m, Nov 21, 2009 IP