Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left Navigation Lost in Small Window

    Hello,

    I was working on a site and everything was looking good until I tried viewing it in a smaller window. The left navigation can not be scrolled to.

    Can anyone suggest how I can keep the site looking the same but at the same time allowing users the ability to see the left links on a small screen.

    The code is inserted below.

    Many Thanks

    Ashley

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>CSS Fixed Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    
    * {
    margin:0;
    padding:0;
    }
    
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    background:#f38020;
    }
    
    #container {
    min-height:100%;
    background-color:#fff;
    width:760px;
    margin:0 auto;
    }
    
    #content {
    padding:30px;;
    }
    
    #leftcolumn {
    color:#333;
    background:#f38020;
    margin-left:-150px;
    width:150px;
    float:left;
    text-align:right;
    padding:0;
    }
    
    #leftnavlist {
    float:right;
    margin-top:50px;
    margin-right:0;
    margin-bottom:0;
    padding:0;
    }
    
    #leftnavlist li {
    list-style-type:none;
    padding-bottom:20px;
    }
    
    #leftnavlist a#current {
    color:#3a3a3a;
    text-decoration:none;
    }
    
    #leftnavlist a {
    padding-right:10px;
    }
    
    #header {
    width:760px;
    color:#333;
    border:0 solid #ccc;
    height:120px;
    background:#f38020;
    background-image:url('images/notabeneweb.png');
    background-repeat:no-repeat;
    background-position:bottom left;
    position:relative;
    margin:0;
    padding:0;
    }
    
    #navlist {
    float:right;
    margin-top:101px;
    padding-bottom:2px;
    padding-top:2px;
    }
    
    #navlist li {
    display:inline;
    list-style-type:none;
    }
    
    #navlist a#current {
    color:#3a3a3a;
    background-color:#fff;
    text-decoration:none;
    padding-bottom:2px;
    padding-top:2px;
    }
    
    #navlist a {
    padding:0 10px;
    }
    
    #footer {
    width:760px;
    clear:both;
    height:30px;
    text-align:center;
    position:relative;
    padding-top:10px;
    font-size:10px;
    margin:-40px auto 0;
    	background:#f38020;
    }
    
    #clearfooter {
    display:block;
    height:40px;
    }
    
    ul#navlist,ul#leftnavlist {
    margin-left:0;
    }
    
    #navlist li a:hover,#leftnavlist li a:hover {
    text-decoration:none;
    color:#3a3a3a;
    }
    
    #navlist a:link,#navlist a:visited,#leftnavlist a:link,#leftnavlist a:visited {
    color:#fff;
    text-decoration:none;
    }
    
    #definition {
    padding-top:50px;
    text-align:center;
    }
    
    p {
    padding-bottom:10px;
    }
    
    blockquote {
    padding-left:20px;
    padding-bottom:10px;
    }
    
    div.logo {
    line-height:100px;
    text-align:center;
    float:left;
    }
    
    div.logo img {
    vertical-align:middle;
    }
    
    div.circles {
    text-align:center;
    height:100px;
    padding-bottom:30px;
    border:0;
    }
    
    div.circles img {
    text-align:center;
    height:100px;
    border:0 none;
    padding:0 6px;
    }
    
    div.item {
    padding:5px;
    }
    
    div.item img {
    float:left;
    margin-right:5px;
    }
    
    div.item hr {
    display:block;
    clear:left;
    visibility:hidden;
    margin:-2px;
    }
    
    div.clearer {
    clear:left;
    line-height:0;
    height:0;
    }
    
    html,body,* html #container {
    height:100%;
    }
    
    
    </style>
    </head>
    <body>
    
    <div id="container">
    		<div id="header">
    			<ul id="navlist">
    				<li><a href="index.html">Home</a></li>
            		<li><a id="current" name="current">Promotional</a></li>
    				<li><a href="advertising.html">Advertising</a></li>
    				<li><a href="corporate.html">Corporate</a></li>
    				<li><a href="packaging.html">Packaging</a></li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
    		
    		<div id="leftcolumn">
    			<ul id="leftnavlist">
    				<li><a>Steam Museum</a></li>
    				<li><a href="humanrights.html">Human Rights</a></li>
    				<li><a href="christmascards.html">Christmas Cards</a></li>
    				<li><a href="hovis.html">Hovis</a></li>
    				<li><a href="sega.html">Sega</a></li>
    			</ul>
    		</div>
    <div id="content">
    	<h1>Test Page</h1>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
    	<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
    	
    	</div>
    	<div id="clearfooter"></div>
    	</div>
    <div id="footer">
    	<p>&copy; Nota Bene</p>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Wrap #container in another div and apply:

    Code:
    margin:0 auto;
    width:1050px
    to that div. The new outer div left nav gives sufficient width to include the left nav and hence it should remain on the page.You might want to check that 1050px is sufficient even if the text is zoomed.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the swift reply, it did as I wanted to the left column, but now the footer isn't pushed to the bottom of the window. Any sugestions how I can push the footer to the bottom whilst keeping the effect of the code above.

    Thanks

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Didn't see that.

    Make sure you wrap your outer div just around #container, not #footer, and add:

    min-height:100%

    to the css in my earlier post.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're going to hate me, that pushed the footer to the bottom great but the white space in the middle doesn't go to the bottom of the page now is there any way to fix this?. Your help is very useful.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Alright, try this:

    Lose that extra div, and instead make your css:

    Code:
    #container {
        background-color: #F38020;
        margin: 0 auto;
        min-height: 100%;
        width: 1060px;
    }
    
    
    #header {
        background: url("images/notabeneweb.png") no-repeat scroll left bottom #F38020;
        border: 0 solid #CCCCCC;
        color: #333333;
        height: 120px;
        margin: 0 auto;
        padding: 0;
        position: relative;
        width: 760px;
    }
    
    #leftcolumn {
        background: none repeat scroll 0 0 #F38020;
        color: #333333;
        float: left;
        padding: 0;
        text-align: right;
        width: 150px;
        margin-left:0
    }
    
    #content {
        background-color: white;
        margin-left: 150px;
        padding: 30px;
        width: 700px;
    }
    That removes the negative margin on #leftcolumn, which is the root cause of the problem.


  •  

    Posting Permissions

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