Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Center aero button menu

  1. #1
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Center aero button menu

    I am using the aero button menu and need to center it .
    I have it within a footer div with margin 0 auto but this does not center it.
    Any suggestion appreciated.
    link http://217.46.159.226/e_cart22/index.php
    css
    Code:
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    #footer {
    width:800px; 
    margin: 0 auto;
    text-align:center;
    
    }
    
    .p footer  {
    text-align: center;
    font-weight: bold;
    }
    
    .aerobuttonmenu{ /*container that holds a row of aero buttons*/
    overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
    width: auto;
    background: #F7F7F7; /*menu strip background*/
    border: 1px solid gray;
    padding: 4px 0;
    border-width: 1px 0;
    }
    
    * html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
    width: 100%;
    }
    
    .aerobuttonmenu a.aero{ /*aero button CSS*/
    background: transparent url('../media/aeroleft.gif') no-repeat top left;
    display: 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: 10px; /*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;
    }
    
    .aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
    color: white; /*button text color*/
    }
    
    .aerobuttonmenu a.aero span{
    background: transparent url('../media/aeroright.gif') no-repeat top right;
    display: block;
    padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
    }
    
    .aerobuttonmenu a.aero:hover{ /* Hover state CSS */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
    opacity: 1;
    -moz-opacity: 0.99;
    }
    
    .aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
    color: yellow;
    }
    
    .black a.aero{
    background-image: url('../media/aeroleftblack.gif');
    }
    
    .black a.aero span{
    background-image: url('../media/aerorightblack.gif');
    }
    
    .aerobuttonmenu .rightsection{
    float: right;
    width: 100px;
    position: relative;
    top: 3px;
    padding-right: 5px;
    text-align: right;
    }
    
    .aerobuttonmenu .rightsection a{
    color: navy;
    }
    
    Mark-up
    function do_html_footer()
    {
      // print an HTML footer
    ?>
    		<!-- End of page-specific content. -->
    	<div id="footer">
    	
    	<div class="aerobuttonmenu black">
    
    
    
    <a href="about.php" class="aero"><span>About</span></a> 
    <a href="faq.php" class="aero"><span>FAQ's'</span></a> 
    <a href="terms.php" class="aero"><span>Terms</span></a> 
    <a href="privacy.php" class="aero"><span>Privacy Notice</span></a> 
    <a href="contact.php" class="aero"><span>Contact Us</span></a> 
    <a href="index.php" class="aero"><span>Links</span></a>
    </div>
    
    	<p class="footer">&copy;
    <?php
    ini_set('date.timezone','Europe/London');
    $startYear = 2006;
    $thisYear = date('Y');
    if ($startYear==$thisYear){
      echo $startYear;
    
    }else{
      echo "{$startYear}-{$thisYear}";
    
    }
    
    ?>
    </p>
    	<p><img border="0" src="images/New Hawkesley 134x60.jpg" width="134" height="60"onmouseover="Tip('We publish e-Book4U.<br />How to guides you can take anywhere', BALLOON, true, ABOVE, true,FADEIN, 600, FADEOUT, 600)"/></p>
    </div><!-- End of Footer -->
    </div><!-- End of WRAPPER DIV. -->

  2. #2
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    you need to add position:relative. and some thing like left: 80px.

  3. #3
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks. where do you suggest I add that?

  4. #4
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    .aerobuttonmen
    add it to that class. you may need more or less distance from the left side of your page.

    somewhere between 20 and 100.
    there are other ways to center the text but your aerobutons are in a div footer. what is the name of your div footer

  5. #5
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The div is named footer.

  6. #6
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have the buttons centered approximately by using magin-left on the a element.
    However I cant keep the footer at the bottom of every page in FF.
    Its Ok in IE 7.
    I have added a clear float to the code.
    I dont know where to start on this one so any ideas appreciated.
    Code:
    <div>
    <div class="float-divider"></div>
    </div>
    </div><!-- End of Footer -->
    </div><!-- End of WRAPPER DIV. -->

  7. #7
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    you could try textalign;center with the div footer.

    but just moving your button container left seems like the beter idea.if your footer was at the bottom of the page before the float remove the float. and try text align

  8. #8
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi thanks for comenting.
    I already have text-align center in the footer div.
    I am also getting another problem.
    In ff on subsequent pages (click on a book) the footer doesnt stay at the bottom.
    Any solution like float the footer right looses the wrapper background (white) that defines the page.
    The page structure for the subsequent pages is:
    Show the categories div id cats.
    Float a div right to show the content - div right
    call the footer function
    Code as follows
    Code:
    <?php
      include ('book_sc_fns.php');
      // The shopping cart needs sessions, so start one
      session_start();
    
      $product_id = $_GET['product_id'];
    
      // get this book out of database
      $book = get_book_details($product_id);
      do_html_header();
      //display left hand block - categories, ads
    	// get categories out of database
      $cat_array = get_categories();
     
      // display as links to cat pages
      display_categories($cat_array);
      
      
      ?>
      <div id="right">
      <h1 class="align-center"><?php echo $book['title'];?></h1>
      
      <?php
      
      display_book_details($book);
    //display browse list via ajax
    
      // set url for "continue button"
      $target = 'index.php';
      if($book['cat_id'])
      {
        $target = 'show_cat.php?cat_id='.$book['cat_id'];
      }
      // if logged in as admin, show edit book links
      if( check_admin_user() )
      {
        display_button("edit_book_form.php?isbn=$product_id", 'edit-item', 'Edit Item');
        display_button('admin.php', 'admin-menu', 'Admin Menu');
        display_button($target, 'continue', 'Continue');
      }
      else
      {
        echo '<table width="600"><tr><td>';
    	display_button("show_cart.php?new=$product_id", 'add-to-cart', 'Add '
                       .$book['title'].' To My Shopping Cart');
    	echo '</td><td>'; 
        display_button($target, 'continue-shopping', 'Continue Shopping');
        echo '</td></tr></table>';
      }
      
      do_html_footer();
    ?>

  9. #9
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    PHP I don't know. your buttons look centered in ie7

    try using <br/> to get your footer lower if you have to.
    it also looks like.......

    HU?
    you need to use position. why aren't you using this with your layout this is the one thing behind all css.

    #footer {
    width:800px;
    margin: 0 auto;
    text-align:center;

    }


    try

    #footer {
    width:800px;
    margin: 0 auto;
    text-align:center;
    position:absolute
    top: 700px;
    left:105px;
    }

  10. #10
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks. It moves down but I loose the background and it doent sit on the bottom.
    There is a ; missing on absolute, but no difference.
    Is it the order of the divs do you think?

Bookmarks

Posting Permissions

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