lesley Posted February 12, 2009 Report Posted February 12, 2009 I am having trouble with my footer. It does not show up in the correct place. I have read alot online about Sticky Footer, but i guess i am not placing the code in the correct places. Is there a somple way to just place my footer below all my content? I dont even care if it always sticks to the bottom. When i use clear:both - the footer goes to the right top side of the page. Thanks. Quote
JBall Posted February 12, 2009 Report Posted February 12, 2009 Personally I'm not a fan of absolute positioning. I think its asking for trouble. I would put the whole site inside a div called #wrapper then use css for positioning. You have a misplaced tag as well. Cut and paste that whole tag in between your head tags. The footer is only 50px tall. In the style sheet you have it declared as 88px tall. Thats causing a gap. Quote
Wickham Posted February 12, 2009 Report Posted February 12, 2009 (edited) Your footer style is:- #footer { height: 88px; width: 1001px; clear: both; position: absolute; bottom: 0px; background-image: url('images/footer-psd.jpg'); } where clear: both; has no effect for a position: absolute div as they take no account of the position of other elements, so clear: both means nothing. Your #footer starts at the bottom of the window after first loading the page, but when you scroll, it scrolls up, so get rid of position: absolute and keep the clear: both and let it sit under all the other content (it won't be a sticky footer which requires different code). If you want to try a sticky footer, items 1a and 1b here show different types:- http://w ww.wickham43.net/headerfooterfix.php Edited February 12, 2009 by Wickham Quote
lesley Posted February 12, 2009 Author Report Posted February 12, 2009 Thanks for the replies. I guess i am clueless when it comes to the absolute positioning. I made changes toticanew .com and now the footer doesnt even show up. But i do have all my content in a wrapper. Also, i tried taking out all the "position: absolute" but then all my images showed up horizontal across the page instead of verticle. Any other suggestions? Quote
virtual Posted February 12, 2009 Report Posted February 12, 2009 I didn't reply to you earlier because I have never seen a page layout with so many absolute positioned divs, so it seemed kind of overwhelming to me. Absolute position can be used in a relatively positioned div as it is bounded by its containing div. It is usually only used for a specific reason. Is there a reason for you to have absolute positioning? Clear both only works with floats, it has no effect on absolute position. I think the solution to your problem it to use a container or wrapper and put everything within this and position them with floats and margins, as suggested by JBall. From what I saw of your code you just need to recode your css and remove position: absolute, then change the top, bottom, left, right positioning to margins to make your divs float to their new positions. Not simple, a total rewrite but which will give you a layout which is adaptable to any length of page which is not the case with your actual layout. Quote
Wickham Posted February 13, 2009 Report Posted February 13, 2009 This sorts it out with a sticky footer like item 1a in my previous post's link:- http://w'>http://w ww.wickham43.com/forumposts/lesleyticanew090212.html CSS file:- http://w ww.wickham43.com/forumposts/lesleypublic090212.css I started by making the #footer not position: absolute so that it sits below the #wrapper div. As noted, you had all the others position: absolute too, so the #wrapper needs to be position: relative with a height (not 100%) and the position: absolute divs sit inside it. I haven't edited any of the top and left positions so you may need to fine-tune them. The TICA Home and Members links were out of position in IE7 because of the top margin on the tag so I added a style for this to make it 0. Some height: 100% were deleted. I then added position: fixed; bottom: 0; to #footer and a margin-bottom: 35px; to #wrapper so that there is space for the #footer. IE6 doesn't operate position: fixed so the #wrapper margin-bottom needs to be 0 in a conditional comment in the head section and IE6 will just show the #footer under the #wrapper. The title in the html markup has been deleted and the page validates. Quote
lesley Posted February 13, 2009 Author Report Posted February 13, 2009 wow, i cant thank you enough for your help! Wickham, the changes you made really helped me understand what i was doing wrong. I do have a question about the wrapper. Since it as a height, what happens if i place alot of content in the center, won't it run out of room? I am now going to try and work on the rest of the absolute positioning as suggested by JBall and virtual. Thanks agian! Quote
JBall Posted February 13, 2009 Report Posted February 13, 2009 Could you replace the given height with auto? Quote
lesley Posted February 13, 2009 Author Report Posted February 13, 2009 Yes, the auto worked well, thanks! Now i have taken out all the absolute positioning and changed up the code to make things work. It looks good in IE, but all other browsers (opera, firefox, safari) are showing the divs out of order? Quote
JBall Posted February 13, 2009 Report Posted February 13, 2009 Try giving your content div a set width. Quote
lesley Posted February 13, 2009 Author Report Posted February 13, 2009 I added a width, but things are still out of place... Quote
virtual Posted February 13, 2009 Report Posted February 13, 2009 You need to move your content div from the bottom to just below the member div. Before, you were using absolute positioning which makes your div appear at the exact pixel you specify. When you remove the absolute you need to position the divs in the order they will appear on the page. Quote
lesley Posted February 13, 2009 Author Report Posted February 13, 2009 ok, things are lining up corretly in the other browsers now. However, the content div sits higher than the right and left. How do i get these all to line up together? I tried to add a float:left but it didnt work. THanks Quote
JBall Posted February 13, 2009 Report Posted February 13, 2009 I believe you need to take the margin rules out of the css for the #content div. #content { height: auto; width: 570px; padding: 10px 0 10px 10px; text-align: justify; background-repeat: no-repeat; background-color: #ffffff; background-image: url('images/content-psd.jpg'); } Quote
JBall Posted February 13, 2009 Report Posted February 13, 2009 (edited) Hmm, you may also want to put the footer div inside the wrapper div. Lose position: reletive; in the wrapper css rules and add margin-left:auto; margin-right:auto; Edited February 13, 2009 by JBall Quote
lesley Posted February 13, 2009 Author Report Posted February 13, 2009 Well, that made the whole page centered, which is something i've wanted to do - so thanks for that! However, the content div and the left and right are still not lining up together. Quote
virtual Posted February 14, 2009 Report Posted February 14, 2009 I worked on your html and css and changed a few things round in both files, too many to mention here. You can see the changes at: htt p://emasai. com/Various/index.html and htt p://emasai. com/Various/public.css Just so you understand when you float a column you do not need to float its contents unless you want 2 separate columns within that particular column. I also removed all the absolute positioning from your divWNwidgets as they contents just sit within the video div that contains them. Quote
lesley Posted February 14, 2009 Author Report Posted February 14, 2009 Thank you!! My site is coming together very nicely and im learning so much thanks to everyone! My next project is the menu! Quote
lesley Posted February 18, 2009 Author Report Posted February 18, 2009 I have run into another issue - I created a custom search bar and i cant seem to figure out the code that will line up the search box with the submit button image. http://ticanew.com Thanks Quote
lesley Posted February 19, 2009 Author Report Posted February 19, 2009 i think i figured it out. Quote
virtual Posted February 19, 2009 Report Posted February 19, 2009 Glad to hear you have figured it out. While you are working on it, you should try and remedy your validation errors (53). Some of them are caused by Flash, but not all of them. Quote
lesley Posted February 23, 2009 Author Report Posted February 23, 2009 Hello agian, new question. I have a div called menubot which makes the color for the bottom of them menu on the left. I want it to fill the height of the screen. I tried setting the height to auto, but i am not placing any content in this div. I have also set the height to 100% and it made no change. I also tried setting the height of div LEFT to 100% and there was no change. suggestions? Quote
PicnicTutorials Posted February 23, 2009 Report Posted February 23, 2009 Hi, That's called equal height columns, and it's obtained with a little trickery. There are a few ways to do it, but the easiest is to use a positioned absolute div. Static elements will not obey height 100%, but position absolute will. Here is my article on it... Quote
lesley Posted February 25, 2009 Author Report Posted February 25, 2009 thanks! I was able to make my left column go down the page, thanks to your article. i actually layered 2 faux columns. However, i want the bottom of the menu to show on my shorter pages. right now on the homepage, it is too short so it cuts off the tan color at the bottom. Here is where the menu looks short: http://ticanew.com/public/about.php Look at the bottom of them menu on this page - i want all my pages to be like this: http://ticanew.com/public/classifieds.php thanks! Quote
PicnicTutorials Posted February 25, 2009 Report Posted February 25, 2009 Hi, Give the #left a padding:0 0 8px; and then give the #menu a bottom border or a 1px padding to give it that white line. That should do it... Quote
lesley Posted February 25, 2009 Author Report Posted February 25, 2009 well... =) I did that, but now my longer pages show a gap.. You can see it here: http://ticanew.com/public/classifieds.php Quote
PicnicTutorials Posted February 25, 2009 Report Posted February 25, 2009 Hmm... I don't see the gap? Quote
lesley Posted February 25, 2009 Author Report Posted February 25, 2009 oops, i just changed that page (shortened), sorry - you can see it here: http://ticanew.com/public/showing.php Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.