45 users online (0 members and 45 guests)  


  Results 1 to 10 of 10

Related

  1. Replies: 3
  2. Replies: 3
  3. Anchoring with #bottom    Forum: HTML Forum
    Replies: 4
  4. Replies: 14
  5. How do I swap an image for BOTH an image and a sound?    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    sherill's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4

    anchoring an image?

    Hello all......

    I have a page that sits in a simple table layout. In the left hand column is my nav menu, which is in it's own nested table. Beneath that menu, I need to have a logo that needs to anchor to the bottom of that same nav column, regardless of how long the column may be, because it will differ from page to page.

    http://www.mckinneychurch.org/align_index.php

    I can't even remember how many fixes I've tried. There's just got to be something that can do this, though! Right??? I'm very grateful for any thoughts out there on this!

    sherill

    (p.s. this is just a plain ol' messy ugly page with an even ickier logo.....strictly for working out my problem!!)

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    I can think of 3 ways to try that might work.

    One is is have the image as a background-image instead, and position it using the css background property . the downside is that if its small, it will get overlayed by the menu. A workaround is to have a transparent gif, 1px wide, 100px (or whatever the image height is) tall. This will keep the cell open.

    the second idea is to have another table cell with just the image in. This will stick out of the bottom, tho.

    The third (trickiest) is to give the containing element a relative position[/u but not actually move it at all. Once this is done, any element within that element can be positioned by percentages of the containing element.

    You would then position absolutely the image top:+100% . this puts just underneath the left column. You then set a margin-top of minus the height of the image! This puts it back in the box and it always , always will be at the bottom. Again, you would probably need the blank gif image if any of your pages are too short.

    have fun
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    sherill's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4
    One is is have the image as a background-image instead, and position it using the css background property . the downside is that if its small, it will get overlayed by the menu.

    Would that work though since the image will need to be able to move up and down depending upon how long the actual page is? There already is a bg-image that serves as the bg for that cell.

    the second idea is to have another table cell with just the image in. This will stick out of the bottom, tho.

    I haven't gotten this one to work! I've tried it setting the table height to 100% and the td valign: bottom, but with no success.

    The third (trickiest) is to give the containing element a relative position ........ You would then position absolutely the image top:+100%

    May I ask what would this look like? I'm afraid that I'm just enough familiar with CSS2 to be dangerous.

    Thanks QuietDean!

    sherill

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    tbh, lets discard the second one.

    First one: You could use background-position, like this

    Code:
    background-position: bottom center;
    That would ensure its always at the bottom. Its a thought.

    Third one: my tutorial site, http://css.somepeople.net , has a horizontal example of this. In fact, the same template is here in this forum. View source, the 'CSS Tutorials' image is positioned using exactly this method. 'cept horizontal
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    sherill's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4
    Thanks Dean! A couple of things to try and great examples to learn from. I really appreciate that! Let me see what I can do....

    sherill

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Make sure you show us how you get on
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  7. #7
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Smile

    What would happen if you set a style for the image of "margin-top:100%" ?
    I've played with it a bit on a test page, but that was before I reallyunderstood what was being asked. It sort of did the effect, but then again, it depends on the surrounding elements as to what happens under different circumstances.
    Good luck, let us know how you do.

  8. #8
    sherill's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4

    Lightbulb I figured it out!

    Well, thanks to some ideas (thanks Dean), I came up with a solution, although maybe not the best, but a solution all the same.

    I made another table that sits across the bottom of the main table that holds all the content. Then I put the logo in that table in the column directly beneath where I wanted it to float and used css positioning to manipulate the bottom of the new table and the top margin of the logo to sit above the content table.

    I do have to make some slight adjustments among pages, to account for the top-margin of the bottom table covering actual content, but I do that by adding <.br> to the bottom of my content.

    http://mckinneychurch.org/index.php - It's a work in progress so not everything is as it should be! Some of it's still pretty scarey, but the index page has is.....

    Incidentally, I did mess with making the log a fixed bg-image but my table covered it. I already have a bg in the column that it's in so I couldn't figure out how it would work.

    Thank you for your prompt and very helpful responses!!

    Sherill

  9. #9
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Thanks for letting us know, Sherill. Glad you got a working version you are happy with.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  10. #10
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316
    IMHO, i think this is simpler

    ***********************
    <table height='100%'>
    <tr><td>
    Menu
    </td></tr>
    <tr><td valign=bottom>
    <img src=logo>
    </td></tr>
    </table>
    ***********************



Tags for this Thread