homepage Welcome to WebmasterWorld Guest from 54.234.67.55
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
Problem with webpage scrolling left to right
lloyd




msg:4029244		 9:43 am on Nov 21, 2009 (gmt 0)

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>

 

birdbrain




msg:4029323		 3:16 pm on Nov 21, 2009 (gmt 0)

Hi there lloyd,

as your drop down menu does not work in IE6, which, unfortunately, only recognizes
pseudo class hover on the a element, I have reworked your code somewhat. ;)

It now works in Firefox, Safari, Opera and IE6, but I have not tested it in IE7,IE8 or Chrome.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="Compare the latest hotel deals.">
<meta name="keywords" content="hotel deals, hotel deals, hotel deals">

<title>Hotel Deals</title>

<style type="text/css">
* {
margin:0;
padding:0;
border:0;
list-style-type:none;
text-decoration:none;
}
body {
margin-top:8px;
font-family:verdana,arial,sans-serif;
background-color:#333;
}
#container {
width:750px;
margin:auto;
background-color:#fff;
}
#header{
line-height:60px;
background-color:#ffc;
font-size:20px;
text-align:center;
}
#adbanner img {
float:right;
width:120px;
height:60px;
}
#positioner {
position:relative;
height:25px;
}
#menuHolder {
position:absolute;
z-index:100;
border-top:1px solid #fff;
font-size:10px;
font-weight:bold;
line-height:25px;
}
ul.ulTop {
float:left;
width:150px;
overflow:hidden;
}
ul.ulTop li.liTop {
float:left;
width:300px;
margin:-32767px -150px 0 0;
background-color:#00f;
}
ul.ulTop a {
padding-left:5px;
text-decoration:none;
color:#fff;
}
ul.ulTop li.liTop a.aTop {
position:relative;
z-index:50;
float:left;
display:block;
width:145px;
margin-top:32767px;
background-color:transparent;
}
ul.ulTop li.liTop a.aTop:hover,
ul.ulTop li.liTop a.aTop:focus,
ul.ulTop li.liTop a.aTop:active {
margin-right:1px;
background-color:#f00;
}
ul.sub {
float:left;
padding:25px 0 0 0;
margin-top:-25px;
}
ul.sub li a {
clear:left;
float:left;
width:145px;
border-top:1px solid #fff;
background-color:#009;
}
ul.sub a:hover,
ul.sub a:focus,
ul.sub a:active {
margin-right:1px;
background-color:#f00;
}
#navcontainer {
float:left;
width:145px;
padding:10px 0 0 5px;
}

#navcontainer a {
font:normal 15px 'lucida grande','lucida sans unicode',verdana,lucida,sans-serif;
color:#ffa500;
}

#navcontainer ul li a:hover {
color:#f00;
}
#maincontent {
float:left;
width:590px;
padding:5px;
background-color:#ccf;
font-size:12px;
}
#maincontent h2 {
margin-bottom:20px;
font-size:18px;
}
#maincontent a {
display:block;
font-size:14px;
font-weight:bold;
color:#306;
text-decoration:underline;
}
#maincontent p {
padding:10px 0 20px;
}
#left {
float:left;
width:285px;
padding:5px;
margin-top:30px;
background-color:#fff;
font-size:12px;
}
#right{
float:left;
width:285px;
padding:5px;
margin-top:30px;
background-color:#ffc0cb;
font-size:12px;
}
#footer {
clear:both;
}
#footer span {
float:left;
width:250px;
line-height:25px;
background-color:#008000;
text-align:center;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#maincontent p {
zoom:1;
}
</style>
<![endif]-->

</head>
<body>

<div id="container">

<h1 id="header">
<a id="adbanner" href="http://www.webmasterworld.com/">
<img src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</a>
What Are We Going To Call It?
</h1>

<div id="positioner">

<div id="menuHolder">

<ul class="ulTop">
<li class="liTop"><a class="aTop" href="#">Home</a></li>
</ul>

<ul class="ulTop">
<li class="liTop"><a class="aTop" href="#">Bar2</a>
<ul class="sub">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
</ul>

<ul class="ulTop">
<li class="liTop"><a class="aTop" href="#">Bar3</a>
<ul class="sub">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
</ul>

<ul class="ulTop">
<li class="liTop"><a class="aTop" href="#">Bar4</a>
<ul class="sub">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
</ul>

<ul class="ulTop">
<li class="liTop"><a class="aTop" href="#">Bar5</a>
<ul class="sub">
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
<li><a href="#">Sub3</a></li>
<li><a href="#">Sub4</a></li>
</ul>
</li>
</ul>

</div><!--end #menuholder -->

</div><!--end #positioner -->

<div id="navcontainer">

<ul>
<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><!--end #navcontainer -->

<div id="maincontent">

<h2>Hotels</h2>

<a href="#">Hotels</a>

<p>
offer individual and stylish mid-market hotels in key locations across...
</p>

<a href="#">Es Hotels</a>

<div id="left">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!--end #left -->

<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!--end #right -->

</div><!--end #maincontent -->

<div id="footer">

<span>Site Map</span>
<span>Privacy</span>
<span>Contact</span>

</div><!-- end #footer -->

</div><!-- end #container -->

</body>
</html>


birdbrain

lloyd




msg:4029513		 6:01 am on Nov 22, 2009 (gmt 0)

Hi Brirdbrain

Many thanks for your very kind help.

Greatly appreciated.

birdbrain




msg:4029557		 9:18 am on Nov 22, 2009 (gmt 0)

No problem, you're very welcome. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved