X-Tream
03-13-2013, 11:16 AM
Hi,
My dropdown navigation (http://netti-tv.net/Teema/) is causing my web-site a problem with smaller screens. As you can see from this image (http://netti-tv.net/Teema/horizontal.jpg), you get a horizontal scroll at the bottom of the screen and when you move it the whole layout gets messed up. If you look at the site with a bigger screen (22 inch - should be enough) the site looks just like it should. With out the horizontal scroll.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Etusivu</title>
<link rel="stylesheet" type="text/css" href="tyyli.css" />
<script type="text/javascript">
image1=new Image();image1.src="kuvat/kaikki.png";
</script>
</head>
<body>
<div id="yla"></div>
<div id="main">
<div id="logo"></div>
<div id="menu">
<div class="nav11"><a href="/">Etusivu</a></div>
<div class="nav1"><a href="/yle">Yle</a></div>
<div class="nav1"><a href="/katsomo">Katsomo</a></div>
<ul class="dropdown"><li><div class="nav7"><a href="/ruutu">Ruutu</a></div>
<ul>
<div id="siirto">
<li><a href="/nelonen">Nelonen</a></li>
<li><a href="/jim">Jim</a></li>
<li><a href="/liv">Liv</a></li>
</div>
</ul>
</li>
</ul>
<ul class="dropdown"><li><div class="nav7"><a href="#">Muuta</a></div>
<ul>
<li><a href="/iltasanomat">Ilta-Sanomat</a></li>
<li><a href="/moontv">MoonTv</a></li>
<li><a href="/aluetv">AlueTv</a></li>
</ul>
</li>
</ul>
</div>
<div id="viiva"></div>
</div>
</body>
</html>
style.css / (tyyli.css)
*{margin:0;padding:0;}
#main{width:1000px;margin:0 auto;}
body{background:#f6f6f6 repeat-x;background-repeat:repeat;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;}
#hr{background:url('kuvat/kaikki.png') 0 -2px;height:1px;}
#yla{clear:both;margin:0auto;height:30px;width:100%;background:url('kuvat/yla.png') repeat-x;}
#logo{height:53px;background:url('kuvat/logo.png') no-repeat;width:276px;margin-left:50px;margin-top:45px;}
#menu{width:800px;margin-left:502px;}
#siirto{margin-left: -40px;}
#siirto2{margin-left: -240px;}
.nav1 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav1 a:hover{color:#ff7200;}
.nav7 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
.nav7 a:hover{color:#ff7200;}
.nav11 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav77 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
ul{list-style:none;}
ul li{position:relative;}
li ul{display:none;}
ul li a{display:block;text-decoration:none;color:black;margin-left:1px;white-space:nowrap;}
li:hover ul{margin-left:241px;margin-top:25px;display:block;position:absolute;}
li:hover li{padding:10px 15px 5px 15px;float:left;font-family:Tahoma;font-size:13px;border-top:1px solid #ff7200;background-color:#f6f6f6;}
li:hover li a:hover{color:#ff7200;}
#viiva{margin-top:25px;height:1px;width:1000px;background:url('kuvat/kaikki.png') 0 0;}
I have noticed that the problem is in the padding-bottom command, but I have no idea how to fix this problem. If I delete the padding-bottom the dropdown navigation will not work...
Here you can get all of the files:
http://netti-tv.net/Teema/Teema.zip
What should I change from the .css to remove the horizontal scroll for good?
Sorry for my bad English. I would really appreciate if somebody could help me out.
My dropdown navigation (http://netti-tv.net/Teema/) is causing my web-site a problem with smaller screens. As you can see from this image (http://netti-tv.net/Teema/horizontal.jpg), you get a horizontal scroll at the bottom of the screen and when you move it the whole layout gets messed up. If you look at the site with a bigger screen (22 inch - should be enough) the site looks just like it should. With out the horizontal scroll.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Etusivu</title>
<link rel="stylesheet" type="text/css" href="tyyli.css" />
<script type="text/javascript">
image1=new Image();image1.src="kuvat/kaikki.png";
</script>
</head>
<body>
<div id="yla"></div>
<div id="main">
<div id="logo"></div>
<div id="menu">
<div class="nav11"><a href="/">Etusivu</a></div>
<div class="nav1"><a href="/yle">Yle</a></div>
<div class="nav1"><a href="/katsomo">Katsomo</a></div>
<ul class="dropdown"><li><div class="nav7"><a href="/ruutu">Ruutu</a></div>
<ul>
<div id="siirto">
<li><a href="/nelonen">Nelonen</a></li>
<li><a href="/jim">Jim</a></li>
<li><a href="/liv">Liv</a></li>
</div>
</ul>
</li>
</ul>
<ul class="dropdown"><li><div class="nav7"><a href="#">Muuta</a></div>
<ul>
<li><a href="/iltasanomat">Ilta-Sanomat</a></li>
<li><a href="/moontv">MoonTv</a></li>
<li><a href="/aluetv">AlueTv</a></li>
</ul>
</li>
</ul>
</div>
<div id="viiva"></div>
</div>
</body>
</html>
style.css / (tyyli.css)
*{margin:0;padding:0;}
#main{width:1000px;margin:0 auto;}
body{background:#f6f6f6 repeat-x;background-repeat:repeat;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666666;}
#hr{background:url('kuvat/kaikki.png') 0 -2px;height:1px;}
#yla{clear:both;margin:0auto;height:30px;width:100%;background:url('kuvat/yla.png') repeat-x;}
#logo{height:53px;background:url('kuvat/logo.png') no-repeat;width:276px;margin-left:50px;margin-top:45px;}
#menu{width:800px;margin-left:502px;}
#siirto{margin-left: -40px;}
#siirto2{margin-left: -240px;}
.nav1 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav1 a:hover{color:#ff7200;}
.nav7 a{color:#191919;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
.nav7 a:hover{color:#ff7200;}
.nav11 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;}
.nav77 a{color:#ff7200;float:left;margin-left:35px;text-decoration:none;font-family:Tahoma;font-size:1.4em;padding-bottom:7px;}
ul{list-style:none;}
ul li{position:relative;}
li ul{display:none;}
ul li a{display:block;text-decoration:none;color:black;margin-left:1px;white-space:nowrap;}
li:hover ul{margin-left:241px;margin-top:25px;display:block;position:absolute;}
li:hover li{padding:10px 15px 5px 15px;float:left;font-family:Tahoma;font-size:13px;border-top:1px solid #ff7200;background-color:#f6f6f6;}
li:hover li a:hover{color:#ff7200;}
#viiva{margin-top:25px;height:1px;width:1000px;background:url('kuvat/kaikki.png') 0 0;}
I have noticed that the problem is in the padding-bottom command, but I have no idea how to fix this problem. If I delete the padding-bottom the dropdown navigation will not work...
Here you can get all of the files:
http://netti-tv.net/Teema/Teema.zip
What should I change from the .css to remove the horizontal scroll for good?
Sorry for my bad English. I would really appreciate if somebody could help me out.