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 10 of 10
  1. #1
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    image/button position for all resolutions.

    Hi.

    I have been trying to figure out how to get an image that I use as a button to stay at the same positions in whatever resoultion the visitor is using, but I can't get it to work. It keeps changing posistion. So, can somone please take a look at my html and CSS and tell me what I need to do?




    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Eternal Online</title>
    
    <link rel="stylesheet" href="styles.css" />
    </head>
    
    <body>
    
    <div id="header">
    	<div id="headerpic"></div>
    </div>    
        
    
    <div id="wrapper">
    
    <ul id="navigation">
    	<li><a href="#home" class="home">Home</a></li>
        <li><a href="#faq" class="faq">FAQ</a></li>
        <li><a href="#forums" class="forums">Forums</a></li>
        <li><a href="#download" class="download">Download</a></li>
        <li><a href="#usercp" class="usercp">UserCP</a></li>
        <li><a href="#vote" class="vote">Vote</a></li>
        <li><a href="#info" class="info">Info</a></li>
    </ul>
    
    </div>
    
    <div id="vote">
    	<a href="http://www.hyperlinkcode.com"><img src="images/vote-button.png"></a>
    </div>
    
    </body>
    </html>
    CSS
    Code:
    * { margin: 0; padding: 0; } /* Reset stuff */
    
    
    ul#navigation {
    	width: 902px; margin ;
    	list-style: none;
    	background-position:center top;
    }
    
    ul#navigation li { display: inline; }
    	
    ul#navigation li a {
    	display: block; float: left; height: 64px;
    	background-image: url(images/navigation-bar.png); text-indent: -9999px;
    }
    
    	ul#navigation li a.home {
    		width: 113px; background-position: 0 0;	
    	}
    	
    	ul#navigation li a.faq {
    		width: 113px; background-position: -113px 0;	
    	}
    	
    	ul#navigation li a.forums {
    		width: 113px; background-position: -226px 0;	
    	}
    	
    	ul#navigation li a.download {
    		width: 113px; background-position: -339px 0;	
    	}
    	
    	ul#navigation li a.usercp {
    		width: 113px; background-position: -452px 0;	
    	}
    	
    	ul#navigation li a.vote {
    		width: 113px; background-position: -565px 0;	
    	}
    	
    		ul#navigation li a.info {
    		width: 111px; background-position: -678px 0;	
    	}
    	
    	
    	ul#navigation li a.home:hover, ul#navigation li a.home:focus {
    		background-position: 0 -64px;	
    	}
    	
    	ul#navigation li a.faq:hover, ul#navigation li a.faq:focus {
    		background-position: -113px -64px;	
    	}
    	
    	ul#navigation li a.forums:hover, ul#navigation li a.forums:focus {
    		background-position: -226px -64px;	
    	}
    	
    	ul#navigation li a.download:hover, ul#navigation li a.download:focus {
    		background-position: -339px -64px;	
    	}
    	
    	ul#navigation li a.usercp:hover, ul#navigation li a.usercp:focus {
    		background-position: -452px -64px;	
    	}
    	
    	ul#navigation li a.vote:hover, ul#navigation li a.vote:focus {
    		background-position: -565px -64px;	
    	}
    	
    	ul#navigation li a.info:hover, ul#navigation li a.info:focus {
    		background-position: -678px -64px;	
    	}	
    	
    
    a { outline: none; }
    
    #header {
    
    }
    #header #headerpic {
    	background-image: url(images/header.png);
    	background-position: center top;
    	height: 400px;
    	width:744px;
    	margin-right:auto;
    	margin-left:auto;
    }
    
    
    #wrapper {
    	width: 789px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    body {
    	background-image: url(images/background.png);
    	background-position: center top;
    	background-color:#000000;
    	background-repeat:no-repeat;
    }
    
    #vote { position:absolute; left:auto; bottom:auto;}

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Your #wrapper should be
    Code:
    margin: 0 auto;
    and the vote position should not be absolute, it should be relative

  • #3
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Like this?

    Code:
    #vote { position:relative; margin: 0 auto;}

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by USB View Post
    Like this?

    Code:
    #vote { position:relative; margin: 0 auto;}
    Just position:relative; will do, but if you want it in the middle too, then yes that will work

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello USB,
    When you make a container relative, the ap element inside it positions itself relative to it's container. Make sense?
    Try it like this -
    Code:
    #wrapper {
    	width: 789px;
    	margin-right: auto;
    	margin-left: auto;
    position: relative;
    }
    #vote { 
    position:absolute; 
    top: 400px;
    left: 200px; 
    }
    Adjust that top and left px to suit.

    Learn positioning here.

    It would probably be better not to use positioning at all. Just float that left and margin it around a bit and see how you like it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I did that melloror, but it just changed to the other side

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by USB View Post
    I did that melloror, but it just changed to the other side
    Ahh I missed something! You have closed your wrapper before you used the vote div, the wrapper should be closed after the vote div:

    Code:
    <div id="wrapper">
    
    <ul id="navigation">
    	<li><a href="#home" class="home">Home</a></li>
        <li><a href="#faq" class="faq">FAQ</a></li>
        <li><a href="#forums" class="forums">Forums</a></li>
        <li><a href="#download" class="download">Download</a></li>
        <li><a href="#usercp" class="usercp">UserCP</a></li>
        <li><a href="#vote" class="vote">Vote</a></li>
        <li><a href="#info" class="info">Info</a></li>
    </ul>
    
    
    <div id="vote">
    	<a href="http://www.hyperlinkcode.com"><img src="images/vote-button.png"></a>
    </div>
    
    </div>

  • #8
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ok, now I get it to the position that I want it to be.. but it only stay there when i'm using full screen.



    else it looks like this:



    I want the vote button to stay at the same position as it is in full screen, even if I make my screen smaller.

  • #9
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Whats the CSS code for that button now?

  • #10
    USB
    USB is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Now I got it thank you both


  •  

    Tags for this Thread

    Posting Permissions

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