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
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    buttons won't center

    I want the buttons centered with the main frame and I added.

    Code:
    float: center;
    to header, menu1, and aeromenu. They will not move....

    http://www.rodgame.org/downloads/twiceisnice/

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Float: center isn't valid CSS. Because you floated your links you need to set a width to the ul element but you may not always know the width. I suggest you look into something like this: http://www.cssplay.co.uk/menus/centered.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello masterofollies,
    This works in FF... I'm sure IE6 will botch it.
    Changes highlighted in red:
    Code:
    .aerobuttonmenu{ /*container that holds a row of aero buttons*/
    overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
    width: auto;
    border: 1px solid gray;
    padding: 4px 0;
    border-width: 1px 0;
    text-align: center;
    }
    
    * html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
    width: 100%;
    }
    
    .aerobuttonmenu a.aero{ /*aero button CSS*/
    background: transparent url('images/aeroleft.gif') no-repeat top left;
    display: inline-block;
    /*float: left;*/ 
    font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
    line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
    height: 31px; /* Height of button background height */
    padding-left: 10px; /* Width of left menu image */
    text-decoration: none;
    margin-right: 5px; /*spacing between buttons*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
    opacity: 0.9;
    -moz-opacity: 0.9;
    }
    If those links were contained in a ul you could center it like this: http://nopeople.com/CSS/menu-h_centered-ul/index.html
    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

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    I tried both, and still didn't work.
    Last edited by masterofollies; 02-12-2009 at 07:41 PM.

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    For fixed-width nav buttons try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    	<head>
    		<title>Sample</title>
    		
    		<style type="text/css">
    		
    body {margin: 0px; border: 0px; background-color: #fff0dc}
    
    #container {
    width: 679px; height: 415px;margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px;
    }
    
    #header {
    float: left; width: 679px; height: 25px; border: 1px solid #FF0000; text-align: center; margin-bottom: 30px; background-color: #6c7dc3
    }
    
    #nav1, #nav2, #nav3, #nav4, #nav5, #nav6, #nav7 {
    float: left; margin-left: auto; margin-right: auto; clear: right; text-align: center; width: 95px; height: 25px; border: 1px solid #4a8f5a; background-image: url(mybackgroundimg.jpg); line-height: 25px; display: inline;
    }
    		
    #pane {
    float: left; width: 629px; height: 300px; padding-top: 15px; border-left: 15px solid #8f6d49; border-bottom: 15px solid #8f6d49;border-right: 15px solid #8f6d49; background-color: #eddbc3; padding: 10px;
    }
    		
    .firsttitle {text-align: center; font-family: tahoma, verdana, times, "times roman", sans-serif; color: #686868; font-size: 1.2em; font-weight: 700;
    }
    		
    .secondtitle {text-align: center; font-family: tahoma, verdana, times, "times new roman", sans-serif; color: #5d5d5d; font-size: 1em; margin: 20px;
    }
    
    .textformat {
    font-family: tahoma, verdana, times, "times new roman", sans-serif; color: #686868; font-size: 0.8em;
    }
    
    #footer{
    float: left; position: bottom; margin-bottom: 0px; width: 679px; height: 20px; text-align: center;font-family: tahoma, verdana, times, "times new roman", sans-serif; color: #686868; font-size: 0.8em;line-height: 20px; 
    }
     a:link {font-family: tahoma, verdana, geneva, sans-serif; color: #ffffff; font-size:0.8em; font-weight: 600; text-decoration: none;}
    
    </style>
    	
    	</head>
    	<body>
    	<div id="container">
    <div id="header">
    <div id="nav1"><a href="index.html">Home</a></div>
    <div id="nav2"><a href="location.html">Location</a></div>
    <div id="nav3"><a href="events.php">Events</a></div>
    <div id="nav4"><a href="photos.html">Photos</a></div>
    <div id="nav5"><a href="sales.php">Store Sales</a></div>
    <div id="nav6"><a href="donations.html">Donations</a></div>
    <div id="nav7"><a href="contact.html">Contact Us</a></div>
    </div>
    <div id="pane">
    <div class="firsttitle">Welcome to Twice is Nice!</div>
    		<div class="secondtitle">Charlottesville's Only Nonprofit, Boutique-style Thrift Store Located in Preston Plaza</div>
    		
    		<div class="textformat"><p>Winter is coming to Charlottesville, and new things are on sale at Twice Is Nice. We have expanded our store if you haven't been in for awhile. We now have more space with a huge variety of new and gently used things.</p>
    		<p>With our new and like-new designer brand clothing, shoes, jewelry, gifts, wedding and more at thrift store prices, you'll want to come in today!  Plus, your purchases and donations help others by supplying daily necessities for the needy elderly.</p>
    			</div>
    			
    </div>
    
    <div id="footer">
    Copyright &copy; 2008 twiceisnice.com. Designed by <strong>Success Web Designs</strong>
    </div>
    </div>
    
    	</body>
    </html>
    Of course this is just a "rough". Adjust sizes, colours, etc. as required. For unknown width nav buttons, the link that Excavator gave you has the answer.

    Good luck!!


  •  

    Posting Permissions

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