The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Footer Help
xoxoannieee
post Dec 8 2014, 11:26 PM
Post #1





Group: Members
Posts: 4
Joined: 8-December 14
Member No.: 21,911



So I am very new at creating things with HTML and CSS (this website is actually for a class project).

I tried to do something different on the Photos page and do a hover effect with the enlarged image. However, it completely messed up my footer on just this page. Any ideas for why and what can I do to fix it?

http://uniquelydone.annderleth.com/photos.html

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 9 2014, 06:23 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I suppose you talk about the fact that the footer is not quite at the bottom of that page.

See:
http://www.cssstickyfooter.com
http://ryanfait.com/html5-sticky-footer/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xoxoannieee
post Dec 9 2014, 01:12 PM
Post #3





Group: Members
Posts: 4
Joined: 8-December 14
Member No.: 21,911



Yes, but it is only on this page, none of the others....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2014, 01:27 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,458
Joined: 9-August 06
Member No.: 6



Yes, that's strange. I see nothing that jumps out as different on that page, but there must be something. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 9 2014, 02:32 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



FWIW it goes away if you stop the SPAN thumbs from flowing to the second row (either by removing thumbs or by making #content wider). You can also "fix" it by adding this:

CODE
.enlarge span {display: none;}

Apparently there's something related to those SPANs. It also seems #wrapper changes height when I hover the thumbnail SPANs. Why is that, when the SPANs are positioned absolute?

The FOOTER element is supposed to appear just below #wrapper, which BTW has some contradicting height styling:

CODE
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
}

Also note the negative bottom margin, which drags FOOTER up behind #wrapper. Why do you want it to do that? In some cases it makes content text on cabinets.html spill over the footer.





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xoxoannieee
post Dec 9 2014, 04:44 PM
Post #6





Group: Members
Posts: 4
Joined: 8-December 14
Member No.: 21,911



Thanks for the help so far. If I do the display: none, it doesn't do the hover effect anymore...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 9 2014, 04:46 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



I know, it was just to demonstrate the SPANs' involvement...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xoxoannieee
post Dec 9 2014, 05:01 PM
Post #8





Group: Members
Posts: 4
Joined: 8-December 14
Member No.: 21,911



Oh, okay. Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2019 - 01:46 AM