Jump to content
Please Use CODE Tags

html footer Issue.

tomasesp
By tomasesp
in Programming
 Share
Posted

I'm having some issues with one of my pages with my footer. instated of being in the bottom its not taking the style I set it to. All my pages are working fine with it. 

In the about page I'm using a div within the body call mainbody, within that div i have a div call upcommingevents and another one call secondbody holding the people information. 

<!DOCTYPE html>
<html>
<head>
    <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="top">
        <div id="Info">
            <ul>
                <li><a href="ContactUs.html">Contact Us</a></li>
                <li>En Espa&ntilde;ol</li>
            </ul>
        </div>
        <div id="Banner" align="center">
            <img src="Pictures/ch1.png" height="250px" width="100%"/>
        </div>
        <div id="Nav">
            <ul>
                <li><a href="MainPage.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li><a href="EventPage.html">Events</a></li>
                <li><a href="Calendar.html">Calendar</a></li>
            </ul>
        </div>
    </div>
    <div class="MainBody">
        <div id="UpCommingEvents">
            <h2 align="center">Upcoming Events</h2>
            <dl>
                <dt>March 1st</dt>
                <dd>Food drive at hahah st, Paterson nj</dd>
                <dt>March 6</dt>
                <dd>dsfggdfsgsdflgsdfjhglkdsjfglkjdfsgljdsfglkdsfjgl;kdsfjglsdfkgjsdlkgjdlskfgjldsfkjgdlskfgjdsflgkjsdl;fkgjsdlfkgjdlsfkgjsdl;fk</dd>
            </dl>
        </div>
        <div id="SecondBody" > 
            <h1 align="center">About Us</h1>         
            <p id="AboutUSPara">
                Consulted perpetual of pronounce me delivered. Too months nay end change relied 
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling 
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend.
                 His not get talked effect worthy barton. Household shameless incommode at no 
                objection behaviour. Especially do at he possession insensible sympathize boisterous 
                it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered. 
            </p>
            <div class="AboutPeople" >
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft"/>
                <p>Consulted perpetual of pronounce me delivered. Too months nay end change relied
                who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                occasion ham for thoughts overcame off her consider. Polite it elinor is depend</p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p>
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
            <div class="AboutPeople">
                <h3>Name Lastname</h3>
                <img src="Pictures/anonymousUser.jpg" class="floatleft" />
                <p class="AboutPeopleP">
                    Consulted perpetual of pronounce me delivered. Too months nay end change relied
                    who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling
                    occasion ham for thoughts overcame off her consider. Polite it elinor is depend
                </p>
            </div>
        </div>
    </div>

    <div id="footer">
        <ul>
            <li><a href="MainPage.html">Home</a></li>
            <li><a href="AboutUs.html">About Us</a></li>
            <li><a href="EventPage.html">Events</a></li>
            <li><a href="Calendar.html">Calendar</a></li>
        </ul>
    </div>
</body>
</html>
body {
    margin:0px;
}
#top{
    background-color:white;
    width: auto;
    height: auto;
}
#Info ul li{
    list-style-type:none;
    float:right;
    text-align:center;
    border:1px;
    width:100px;
}
#SocialMedia{
    font-size:20px;
}
#Nav{
    background-color:aquamarine;
    align-content:center;
}
#Nav ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#Nav ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}
li a{
    text-decoration:none;
    color:black;
    line-height:20px;
    display:block;
}
#slideshow{
}
.MainBody{
    background-color:ghostwhite;
    width:1000px;
    max-height:initial;
    margin-left:auto;
    margin-right:auto;
}
#UpCommingEvents{
    background-color:ghostwhite;  
    border:1px solid black;
    margin:20px;
    padding:5px;
    float:left;
    width:200px;  
}
#UpCommingEvents h2{
    align-content:center;
    border-bottom:1px solid black;
    background-color:ghostwhite;
}
#UpCommingEvents dl dd{
    word-wrap:break-word;
}
#SecondBody{
    float:right;
    width:700px;
    padding:1px;
    margin-left:auto;
    margin-right:auto;
}
#AboutUSPara{
    align-items:center;
}
.AboutPeople{
    padding:15px;
    float:inherit;
    border-bottom: 2px solid #000000;
}
.floatleft{
    width:100px;
    height:100px;
    float:left;
}
#footer{
    width:1000px;
    background-color:aquamarine;
    align-content:center;
    margin-left:auto;
    margin-right:auto;    
}
#footer ul{
    height: 25px;
    width:1000px;
    margin:0 auto;
}
#footer ul li{
    list-style-type:none;
    width:225px;
    float:left;
    text-align:center;
    border:1px;
}
#Events thead tr th{
    width:300px;
    word-wrap:break-word;
}

 

Issue.PNG

GoodFooter.PNG

Link to comment
https://linustechtips.com/topic/568900-html-footer-issue/
Share on other sites
Link to post
Share on other sites
Posted

Uhhhhhhhhhhhhh. I don't see an issue. Maybe CSS is screwing it up? Try deleting parts of that and see. I've never seen this and believe me, HTML, CSS, and JavaScript is like my 2nd languages

 

CEO of DevTech Studios. OS X fanboy, Windows User. Bob Marley. 

Link to comment
https://linustechtips.com/topic/568900-html-footer-issue/#findComment-7467734
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 minutes ago, DevTechStudios said:

Uhhhhhhhhhhhhh. I don't see an issue. Maybe CSS is screwing it up? Try deleting parts of that and see. I've never seen this and believe me, HTML, CSS, and JavaScript is like my 2nd languages

 

I tried everything I could think of, but nothing works I even change some of the footer style elements.

Link to comment
https://linustechtips.com/topic/568900-html-footer-issue/#findComment-7467754
Share on other sites
Link to post
Share on other sites
Posted

You can force the footer to appear at the bottom by adding 

clear: right;
the #Footer ID in the CSS file.

 

EDIT: Didn't notice that you figured it out. :P

Gary M. Gadsdon - Don't call me 'Gaz' or 'Gazman' please.

My Website: http://babysimpson.co.uk
My Youtube Channel: http://youtube.com/awwlilmaggie

Link to comment
https://linustechtips.com/topic/568900-html-footer-issue/#findComment-7468646
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×