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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position and size fixed within container

    I have a problem. I'm trying to contain the dpad and the buttons within their container while being fixed so that when the user scrolls, it follows the page. It works. However, when the page is resized, it gets screwed up. I have no idea how to fix it. If you have google chrome, you can experiment with the code.

    Here's the link:

    http://www.kazecompany.com/wp-conten..._template2.php

    Here's the CSS:

    Code:
    body {
    	font-family: Verdana, Geneva, sans-serif;
    	line-height: 150%;
    }
    
    a {
    	color:#000;
    	text-decoration:none;	
    }
    
    #bg-overlay {
    	position: relative;	
    }
    
    /* HEADER */
    #header {
    	margin-top: 20px;
    	position: relative;
    }
    
    #access {
    	top: 30%;
    	background:url(nav.png) center no-repeat;
    	background-size: 100% auto;
    	height: 250px;
    	max-width: 250px;
    	width: 100%;
    	position: fixed;
    }
    
    #access ul {
    	list-style-type:none;
    	text-align:center;
    	display: block;
    }
    
    #access ul a {
    	display: block;
    	background:#CCCCCC;
    	width: 60px;
    }
    
    #team, #shop {
    	margin-left: 38%;	
    }
    
    #team {
    	margin-top: 30%;
    }
    
    /* CONTENT */
    
    #content {
    	margin-top: 20px;
    }
    
    #content h1 {
    	font: normal 32px/125% Verdana, Geneva, sans-serif;
    }
    
    #content h3 {
    	font: 90%/130% Arial, Helvetica, sans-serif;	
    }
    
    /* FOOTER */
    #footer {
    	background:#999;
    	position: relative;
    }
    
    #footer ul {
    	list-style-type:none;
    	text-align:center;
    	display: inline;
    }
    
    #footer ul a {
    	display: block;
    	background:#CCCCCC;
    	width: 75px;
    }
    
    #google, #top {
    	margin-left: 35%;	
    }
    
    #social {
    	top: 30%;
    	max-width: 250px;
    	width: 100%;
    	background:url(social.png) center no-repeat;
    	background-size: 100% auto;
    	height: 250px;
    	position: fixed;	
    }
    Thank you guys in advance!

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post
    im not understanding what the problem is. what do you mean by "screwed up"? what is supposed to happen vs what is happening?

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize. I completely forgot to mention the problem. If you resize your browser, the dpad and the button's width and height don't adjust accordingly. it should be that as you resize your browser, the dpad get's smaller, same as the width of the div. but it's not.
    Last edited by mbayabo; 06-11-2012 at 05:32 AM.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump please? sorry. i really really need some help.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    May I ask ? what is the dpad ? I will skip to mention about it for now, seem like you want your button and content resize when browser window resize, in this case you need to config your button's height and width as percent not pixel, to do that you need to add this config into you css for set height as percent.

    Code:
    html, body {height:100%;}


  •  

    Posting Permissions

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