Post an image *after* post footer? - html

Question :
I know there are tutorials out there for creating post divider (an image) in between text posts, and i'm doing that too, EXCEPT
I want the image to be AFTER the post footer. Is this possible? My problem right now is, the image is showing in between the footer borders, and I want it to be AFTER the shadow (i.e after the bottom footer).
Help! I feel like the answer is so close yet i can't seem to figure it out?
Thanks in advance

user <br /> after photo then the text will start from buttom of picture. if you want css solution, it's called float: left;

Have you tried working with a margin?
Try adding margin-top to the image. I think this may help.
Otherwise you could work with position: relative and add a top value.

Related

Fixed div at the bottom

I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.

Div container not expanding - please help newbie

web page is http://www.naifaraleigh.com/template2.php
css is http://www.naifaraleigh.com/layerstyle.css
I so much want this to work, to learn how to do this, but I am beginning to hate CSS and think that tables are not a bad thing after all! grins! Just kidding!
everything is contained in the div called container
I have managed to make the main content div slightly off center and rounded corners in white_back
I have managed to put in an absolute div to the right containing nav and logo
But I simply cannot, whatever I try, get the white_back div to stretch downwards to envelop the content of the web page.
Please please help, stop me turning back to the "Dark Side" of tabular layouts!
Thanks!
Do you mean #white_back{height:auto;} ???
Why do you have #white_back{height: 458px;} if you want it to stretch downwards?

Extend Div to bottom of page, starting from absolute position

First, I'd like to say that I have no experience with HTML or CSS so bear with me here.
I'm trying to have a Logo, content, then footer. The Logo has a background that overlaps with content, and footer has a background that overlaps with footer aswell.
This pic might explain better: http://picpaste.com/help-vXUqWlZ8.png
HTML Code: http://pastebin.com/0ZWCB9jU
CSS Code: /w7Ugu78Z <-- also pastebin, but I can't post entire link due to spam prevention.
The problem is that, there's an extra space at the bottom of the page that I can't remove.
Would really appreciate any help.. I tried googling but the solutions I found I failed to get it to work.
Best Regards,
Essam.
It seems you want the footer to remain at the bottom of the page.
I think this is what you're looking for: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Static Positioned Div with minus Margin display Partially in Firefox

I've designed this page to show a picture gallery with a description for each picture. I use a div with static position and minus left and top margins, so the description is shown on top of the bottom part of the image.
The problem is that if I open the page for the first time with Firefox, the Div displays only partially (only on top of the image part is shown). Only when I click any other album does the div displays correctly.
This is the bad display image
The description div should have been displayed until the bottom of the container div. Try clicking another thumbnail image at the test site page.
This is the test site, to open the page, click the gallery menu, the one on the left bottom with a dog picture.
Has anyone encounter the same problem? Hope someone could help me. Any advice will be welcomed gladly.
Thank you!
Ah, I think I found the answer. I just put '!important' on the height attribute. And then Firefox displays the div fully!
Thank you, I should've thought that.
Use "position: relative" with negative "top" and "left" values.
I guess I've managed to solve the problem. It seems that the div is shown partially to the end of the Image tag just before the div. so then, I wrap the image in another div setting the div's height the same height of the image. I've tried it, and it looks find in FF now.
Thank you.

My body tag wont extend to the bottom of my page

I´ve been searching the interweb for two days, but have not been able to figure this out. I am making a webpage with loads of included php files, and I have been asked to make a footer with contact information etc.
The problem is that i can´t get the footer to stick to the bottom, and I have discovered that it´s because the body doesn´t extend all the way to the bottom of the page.
See this link for a solution: http://ryanfait.com/sticky-footer/
Made with pure CSS :)
The body element doesn´t have a height like you think of it, it is as height as the elements in it.
I have found a link that perfectly answers your question, that is "Stay On Top" script at http://www.dynamicdrive.com/dynamicindex17/stayontop.htm