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
    Jun 2012
    Location
    United States the State of Georgia
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation My button is out of position?

    This just randomly happened, and I don't know whats wrong. I've triple checked over all my code and couldn't find what was wrong. What I am working on here is for my client and I really need to get this fixed so I can finish the rest of it. So whatever help will be greatly appreciated . Thanks in advance!

    Here is what is happening Note its the blue box that is messing up



    Here is my CSS Code

    Code:
    /* CSS Document */
    * {
    	padding:0;
    	margin:0;
    }
    
    body {
    	background-color:#ebebeb;
    }
    
    #graphic-container {
    	margin-top:70px;
    	vertical-align:middle;
    	height:531px;
    	max-height:531px;
    	max-width:494px;
    	width:494px;
    	background-color:#fdeada;
    	background-image:url(../images/inside-background.png);
    	background-repeat:no-repeat;
    	background-position:center center;
    	border:4px solid #395e8a;
    }
    
    #red_btn {
    	background-image:url(../images/red_btn.png);
    	background-repeat:no-repeat;
    	height:168px;
    	width:171px;
    	margin-top:75px;
    	margin-left:70px;
    	float:left;
    }
    
    #green_btn {
    	background-image:url(../images/green_btn.PNG);
    	background-repeat:no-repeat;
    	height:180px;
    	width:168px;
    	margin-top:75px;
    	margin-right:70px;
    	float:right;
    }
    
    #purple_btn {
    	background-image:url(../images/purple_btn.PNG);
    	background-repeat:no-repeat;
    	height:168px;
    	width:173px;
    	margin-top:9px;
    	margin-left:70px;
    	float:left;
    }
    
    #blue_btn {
    	background-image:url(../images/blue_btn.PNG);
    	background-repeat:no-repeat;
    	width:180px;
    	height:168px;
    	margin-top:9px;
    	margin-right:70px;
    	float:right;
    }
    
    .red_btn_text {
    	float:left;
    }
    Here is my HTML Code

    Code:
    <!--
    Script Written By: Kevin Gilbert
    Programmer Contact Information: kevin@scriptingfire.com
    -->
    <!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>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Clickable Graphics Project</title>
    </head>
    
    <body>
    	<center>
    	<div id="graphic-container">
        	<!-- START Top 2 Button Container -->
            <div id="top_btn_container">
            	<!-- START Red Button -->
                <div id="red_btn">
                </div>
                <!-- END Red Button -->
                <!-- START Green Button -->
                <div id="green_btn">
                </div>
                <!-- END Green Button -->
            </div>
    		<!-- END Top 2 Button Container -->
    		<!-- START Bottom 2 Button Container -->
            <div id="bottom_btn_container">
            	<!-- START Purple Button -->
                <div id="purple_btn">
                </div>
                <!-- END Purple Button -->
                <!-- START Blue Button -->
                <div id="blue_btn">
                </div>
                <!-- END Blue Button -->
            </div>
            <!-- END Bottom 2 Button Container -->
    	</div>
        </center>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The first thing I noticed about your code is that all the images are different sizes.

    The red and purple buttons have the same height of 168px, but different widths (only 2px difference so not that big of a deal) One is 171px and the other is 173px.

    However, your green and blue are totally different. Green is 180px H by 168px W. Blue is just the opposite. 168px H by 180px W. That may be where you problem is. Did you maybe mix up the height and width on one of those? (I'm guessing green since all other buttons are 168px high and it does appear to be a tad elongated vertically and cut off on the right side.)

    If not, it could be in your CSS. There is no mention of the top_btn_container or bottom_btn_container and your buttons aren't nested inside them. (Just to test, I manually assigned a style="border:4px solid #395e8a;" to each and saw they just sit at the top of the pink graphic and your buttons are all over the place.) I removed them completely and it made no difference to the layout.

    Hopefully one or both of these suggestions will be the easy fix you need.
    Last edited by EpicWebDesign; 06-24-2012 at 04:34 PM.


  •  

    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
    •