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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Instead of putting a set margin, anyway to have container fit to bottom of window?

    I don't know how to explain this well, but on my website I made (http://www.r3l4t3.com) I have a menu bar. You will only see it when you first get on the page if you have a 1920x1080 monitor. Is there anyway, I can set it so all monitor resolutions will be able to see it right when you go to the page, without have to scroll down?


    Here is the HTML for the nav:
    Code:
    <div id="nav">
    	<ul>
        	<li><a href="index.html"><img src="images/home.png" border="0" /></a></li>
            <li><a href="http://www.r3l4t3.bandcamp.com"><img src="images/music.png" border="0" /></a></li>
        	<li><a href="about.html"><img src="images/about.png" border="0" /></a></li>
        	<li><a href="contact.html"><img src="images/contact.png" border="0" /></a></li>
            <li class="liscroll"><a rel="nofollow" href="#footer" title="Scroll Down"><img src="images/scroll.gif" border="0" /></a></li>
        </ul>
        
    </div>
    And the CSS for that:
    Code:
    body {
    	background-image:url(images/bg.png);
    	background-repeat:no-repeat;
    	background-position:center top;
    	background-attachment:fixed;
    	background-color: #E8E8E8;
    	font-family: 'Open Sans', sans-serif;
    }
    
    #container {
    	width: 980px;
    	margin: 0 auto;
    	margin-top: 880px;
    	background-color: #E8E8E8;
    }
    
    #nav {
    	width: 980px;
    	padding: 0;
    	margin-bottom: 10px;
    	margin-left: 10px;
    }
    
    #nav ul {
    	list-style-type:none;
    	padding: 0;
    	margin: 0;
    }
    
    #nav ul li {
    	display:inline;
    }
    Want to make it turn from this: (Notice there is no navigation on the bottom of the screen)


    To This: (Notice the navigation at the bottom, but have to scroll down if you don't have a 1920x1080 monitor)



    Sorry I don't know how to explain this easily.


    Thank You!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Hey there,

    What you want is totally possible, and is what we call a sticky footer, even though one does not normally put the navmenu in that. I wrote a tutorial about it that is linked from my signature page.

    However, you should make the button icons white or another contrasting color, because they will overlap with the image on normal and small screens.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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