anchoring an image?
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.
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!
(p.s. this is just a plain ol' messy ugly page with an even ickier logo.....strictly for working out my problem!!)
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 [i]of the containing element[/i].
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 :)
[I]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.[/I]
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.
[I]the second idea is to have another table cell with just the image in. This will stick out of the bottom, tho.[/I]
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.
[I]The third (trickiest) is to give the containing element a relative position [/I] ........ [I]You would then position absolutely the image top:+100% [/I]
May I ask what would this look like? I'm afraid that I'm just enough familiar with CSS2 to be dangerous.
tbh, lets discard the second one.
First one: You could use background-position, like this
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 :)
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....
Make sure you show us how you get on :)
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 [i]really[/i]understood 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.
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!!
Thanks for letting us know, Sherill. Glad you got a working version you are happy with.
IMHO, i think this is simpler :)