Web Analytics Made Easy -
StatCounter Bottom Vertical Alignment - CodingForum


No announcement yet.

Bottom Vertical Alignment

  • Filter
  • Time
  • Show
Clear All
new posts

  • Bottom Vertical Alignment

    I'll try to explain what I'm trying to do in the best way possible...

    The objective is to create a Windows Vista-Resembling login page. They click on Link (Figure 1 in Screenshot) which (with JavaScript) makes the login Form (Figure 2 in Screenshot) appear. I would also like to provide an easy way for users to access areas such as new account registration and forgotten password recovery, which I have done with a Menu (Figure 3 in Screenshot). The problem is that the Menu (Figure 3 in Screenshot) moves vertically when clicking on the Link (Figure 1 in Screenshot). I want to do something that will make the Menu stay at the bottom-right of the page regardless of resolution with a pre-defined padding on both the right and bottom sides.

    What I have now...
    <table class="menu" width="100%" border="0" cellspacing="0" cellpadding="0">
        <td width="auto">&nbsp;</td>
        <td width="250px">
            [I]{Menu HTML Snipped for Simplicity}[/I]
    padding-left: 250px;
    padding-bottom: 50px;
    bottom: 100%;
    I don't really care whether the Menu is inside a div, table, or whatever, I just need it in the correct area. I've found that attempting to use position: absolute; causes the table to disappear entirely in some circumstances.

    Help is greatly appreciated; I can elaborate more if needed.
    Last edited by coolcamo8642; Oct 12, 2006, 06:13 PM. Reason: BBCode Consistency Issue

  • #2

    Does anyone have any suggestions?


    • #3
      Yeah, you really don't need tables for any of that…

      In answer to your question, it seems that absolute positioning might be appropriate here. Note that in your code bottom: 100% doesn't do anything because the object is not positioned. Without seeing what the mentioned circumstances are for the table disappearing, I can't really address why absolute positioning hasn't been working for you.

      Here's some basic code that should suit the purpose. I can't get more specific without you getting more specific in the code (and images) provided. There should be no need for padding.

      #menu {
        position: absolute;
        right: 50px;
        bottom: 50px;
      #menu div {
        float: left;
      <div id="menu">
        <div><!-- left button --></div>
        <div><!-- right button --></div>


      • #4
        Here's a strange suggestion: do the page in Flash.

        Other than that use the absolute positioned layers. Then use display:none or visibility:hidden for your login form. Whatever.
        Colin Puttick