Results 1 to 3 of 3

Thread: Dropdown navigation causing problems.

  1. #1
    Join Date
    Apr 2011
    Posts
    23
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Dropdown navigation causing problems.

    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
    HTML Code:
    <!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)
    Code:
    *{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.
    Last edited by X-Tream; 03-13-2013 at 07:30 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    I think the issue is with this;
    Code:
    #menu{width:800px;margin-left:502px;}
    Your #main div wrapper is only 1000px wide but the #menu within it is occupying 1302px width (width + margin) so its expanding the boundary. Remove the width:800px; and that should fix things.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    X-Tream (03-13-2013)

  4. #3
    Join Date
    Apr 2011
    Posts
    23
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Thank you so much for the help (Again ). I was clearly looking from the wrong place.

Similar Threads

  1. Replies: 9
    Last Post: 10-29-2009, 04:01 AM
  2. #increment code causing problems in IE
    By Daniel Thomas in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-15-2009, 06:30 AM
  3. PHP Header file causing problems?
    By oregonduck in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-21-2007, 08:42 PM
  4. script causing security problems
    By dwsmark in forum JavaScript
    Replies: 1
    Last Post: 10-28-2005, 04:26 AM
  5. script causing security problems
    By dwsmark in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-28-2005, 04:26 AM

Bookmarks

Posting Permissions

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