CODEWITHSUNDEEP
htmlcssfooter
Thomas
Thomas

Reputation: 37

Duplicated footer html/css on another page, but shows up differently?

I'm making a website and I completed the main page (header, body, and footer). I started a new document for my second page. I copied and pasted the code for the header from the main page into the second page and that worked flawlessly. But when I did the same for my footer, it resulted in my footer aligning left instead of aligning center. All the code and the html are the same. I don't know what the problem is. I've been looking everywhere but had no luck so far.

CSS Code:

.end_text {
    width: 100%;
}

.bottom_left li {
    float:left;
    list-style: none;
}

.bottom_lmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_lmid li:first-child {
    margin-left: 100px;
}

.bottom_rmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_rmid li:first-child {
    margin-left: 100px;
}

.bottom_right li {
    float:left;
    list-style: none;
    margin-left: auto;
    margin-top: 0px;
}

.bottom_right li:first-child {
    margin-left: 100px;
}

HTML Code:

<div id="footer">
    <div class="foot_bar">
        <img src="../../images/bestfoodservicesweb_24.jpg" width="862"/>
    </div>
  <div class="end_text">
            <ul class="bottom_left">
                <li><img src="../../images/bestfoodservicesweb_34.jpg" width="80" height="26"/></li>
           </ul>
            <ul class="bottom_lmid">
                <li><img src="../../images/bestfoodservicesweb_37.jpg" width="63" height="16"/></li>
                <li><a href="http://www.bestfoodservice.us/contact.aspx"><img src="../../images/bestfoodservicesweb_38.jpg" width="63" height="16"/></a></li>
                <li><img src="../../images/bestfoodservicesweb_39.jpg" width="99" height="16"/></li>
               </ul>
                <ul class="bottom_rmid">
                    <li><img src="../../images/bestfoodservicesweb_41.jpg" width="26" height="14"/></li>
                    <li><img src="../../images/bestfoodservicesweb_43.jpg" width="38" height="15"/></li>
                    </ul>
                    <ul class="bottom_right">
                        <li><a href="http://facebook.com"><img src="../../images/bestfoodservicesweb_27.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://twitter.com"><img src="../../images/bestfoodservicesweb_29.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://linkedin.com"><img src="../../images/bestfoodservicesweb_31.jpg" width="25" height="25"/></a></li>
                    </ul>
            </ul>
        </div>
</div>

YOU WILL NEED TO SCROLL DOWN TO SEE FOOTER IMAGES

The demo shows how the my footer is suppose to look

Demo Here Full Screen Demo

This is how it looks

Demo 2 Full Screen Demo 2

Upvotes: 0

Views: 466

Answers (2)

bukka
bukka

Reputation: 5203

You do not have the info_body ul element in the second demo. Adding that should center the footer.

Also fix the img tag in Demo1, you missed out a " when defining the width.

Upvotes: 0

designtocode
designtocode

Reputation: 2245

I think maybe a tag wasn't closed. But this is what I added:

#footer{
   width: 860px;
   margin: 0 auto;
}

And it seems to be working. Fiddle

Upvotes: 1

Related Questions