...

View Full Version : buttons won't center



masterofollies
02-12-2009, 05:33 PM
I want the buttons centered with the main frame and I added.


float: center;

to header, menu1, and aeromenu. They will not move....

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

_Aerospace_Eng_
02-12-2009, 05:40 PM
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

Excavator
02-12-2009, 06:00 PM
Hello masterofollies,
This works in FF... I'm sure IE6 will botch it.
Changes highlighted in red:


.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

masterofollies
02-12-2009, 07:34 PM
I tried both, and still didn't work.

Avril
02-13-2009, 12:19 PM
For fixed-width nav buttons try this:

<!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!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum