3 replies [Last post]
zaboomafoohotw
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-05-01
Posts: 2
Points: 0

I've spent a whole day messing around with this, and I'm going crazy. I'm just starting to refine a template site we started with, and have run into the following problem:

The site uses containers (DIV) in the CSS to create the various areas on the pages, the one I am concerned with is the footer. I (perhaps foolishly) put two logos in the background image. Over the background are some pretty simple text and links. I finally figured out how to create "invisible" a hrefs over the logos to provide clickable links. Now, however, I cannot get the text and links back where they belong.

The page I have been working on is homesofthewest.com/index.html. What I wanted is the two "invisible" clickable links to be in line with the rest of the footer text, and the footer text to be perfectly centered in the middle of the footer - not off-set by the two "invisible" clickable link areas. The footer should look like the footer here: homesofthewest.com/contact.html, but with the functionality of the clickable links over the two logos. How can I accomplish this?? Below is the footer DIV section of the CSS and second DIV section I created called footlogo.

/* FOOTER ------------------------------------------------------------------- */

#footer
{
clear: both;
text-align: center;
background-image: url(images/footer.copy.jpg);
height: 72px;
margin: 0px auto;
padding: 5px 0px 0px 0px;
background-repeat: no-repeat;
}
#footer p {
font-size: 11px;
padding-top: 7px;
}
/*
FOOTER LOGO LINK AREAS---------------------------------------------------------------
*/

#footlogo {
position: relative;
text-align: left;
height: 72px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background-repeat: no-repeat;
}
#footlogo a {
display: block;
background-image: url:(images/placeholder.gif);
float: left;
text-decoration: none;
/*border: 1px dashed red;*//*Commented-Out - just use to make sure the areas are correct.*/
}
#footlogo a span {
display: none;
}
#footlogo a#cmhi {
height: 50px;
width: 68px;
margin-left: 17px;
}
#footlogo a#mhti {
height: 50px;
width: 45px;
margin-left: 7px;
}

Please let me know what else you need to see to help me fix this - assuming that there is a fix.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

add float: left to #footlogo

add float: left to #footlogo
add margin: 1em 113px; to #footer p

zaboomafoohotw
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-05-01
Posts: 2
Points: 0

add float:left

Wolfcry911 - you are a magician. I haven't even got a clue why that worked (I'll look more carefully today and figure it out), but it worked like a charm. Thank you again soooo much. Now I can concentrate on some more fun issues!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I'll try to explain it to

I'll try to explain it to you. The #footlogo div was an in-flow block level element so it caused the footer to drop below it - normal behavior. Setting it to float: left takes it out of flow and allows the footer to start where you expected (in terms of vertical placement). But the floating div pushes the footer p content to the side (centers in the remaining space). By setting the footer p left and right margin equal to the width of the footlogo div, the content will again center correctly.