The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    HTML/CSS Page Footer Display Issue

    Anzo
    Anzo
    Anzo
    Forumember


    Posts : 358
    Reputation : 8
    Language : English/Arabic
    Location : Baghdad - Iraq
    • Post n°1

    Solved HTML/CSS Page Footer Display Issue

    Post by Anzo February 20th 2016, 6:07 pm

    Yo, It's been a while.

    So I'm working on this page, and I'm facing a problem that I cannot seem to be able to fix on my own - frankly, I don't even know what's causing it.

    Simply put, the page isn't displaying properly: http://webmun.forumarabia.com/h6-muners-2016

    The footer somehow wouldn't go to the bottom of the page and the '#content_box' wouldn't take the 'height:100%' for some reason. I'm sure a more experienced fella - like the ones here - should be able to fix this one for me.

    Thanks in advance Very Happy


    Last edited by Anzo on February 22nd 2016, 9:32 pm; edited 1 time in total
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°2

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by SLGray February 20th 2016, 9:00 pm

    Could you please post the coding you used for the page?  Please use the code tags.



    HTML/CSS Page Footer Display Issue Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Anzo
    Anzo
    Anzo
    Forumember


    Posts : 358
    Reputation : 8
    Language : English/Arabic
    Location : Baghdad - Iraq
    • Post n°3

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Anzo February 20th 2016, 9:39 pm

    Code:


    <style>
     
    body {
        margin: 0px;
        background-color: #00111A;
        cursor: pointer;
        font-size: 14px;
        font-family: Verdana;
    }
     
    #mun_index {
      margin-top: 40px;
      }

     
    #mun_nav {
        background-color: #00293C;
        width: 100%;
        height: 40px;
        left: 0px;
        top: 0px;
        position: fixed;
    }
     
    .mun_navlink {
        list-style: outside none none;
        padding: 0px;
        margin: auto;
      clear: both;
      position: relative;
    }
     
    .mun_navclick {
        float: left;
        background-color: #004260;
        color: #FFF;
        display: inline;
        padding: 9px;
        margin: 1px;
        list-style-type: none;
        width: 100px;
        text-align: center;
        height: 20px;
    }
     
    .mun_navclick:hover {
      background-color: #00557B;
      }
     
    .mun_navclick ul.mun_secnavlink {
        text-align: left;
        list-style-type: none;
        position: absolute;
        top: 100%;
        background-color: rgb(0, 38, 56);
        margin-left: -9px;
        padding: 0px;
        display: none;
        margin-top: 39px;
    }
     
    .mun_secop {
        margin: auto;
        padding: 10px;
        border-bottom: 1px solid #00334B;
        min-width: 98px;
    }
     
    .mun_secop:hover {
        background-color: #004A6C;
    }
     
    .mun_navclick:hover ul.mun_secnavlink {
      display: block;
    }


    #mun_content_holder {
        width: 1000px;
        background-color: #001721;
        padding-top: 20px;
        padding-bottom: 20px;
        margin: 60px auto 20px;
      height: 100%;
    }
     
    .content_box {
        padding: 5px;
        width: 950px;
        margin: auto;
        height: 100%;
      overflow: inherit;
    }
     
    .footer_sponsor {
        width: 100%;
        background-color: #000309;
        height: 100px;
        border-top: 1px solid #000E17;
    }

    .footer_note {
        color: rgb(70, 94, 117);
        margin: auto;
        padding: 10px;
        text-align: center;
        width: 975px;
    }

    .gucp {
        padding: 5px;
        color: #6E97A8;
        font-size: 14px;
        text-align: justify;
    }
     
    .ptitle {
        color: #367BB6;
        font-size: 24px;
    }
     
    .per_profile {
        width: 188px;
        height: 277px;
        background-color: rgb(0, 38, 56);
        float: left;
        margin: 1px;
        padding-bottom: 2px;
    }
     
    #per_title {
        height: 50px;
        width: 100%;
        background-color: #2F7EA2;
        margin-bottom: 1px;
        margin-top: -12px;
    }
     
    .per_title_p {
        color: white;
        padding: 16px;
        font-weight: 700;
    }

    #muner {
      width: 188px;
      height: 250px;
      }
     
    .per_name {
        background-color: #164A63;
        color: white;
        margin: auto;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        border-bottom: 2px solid #0C75E2;
    }
     
      #profiles_cat {
      height: 100%;
      }
     
    </style>

    <DOCTYPE! html>
    <head></head>
    <body>
      <div id="mun_index">
        <div id="mun_nav">
        <ul class="mun_navlink">
          <li class="mun_navclick">Home</li>
                      <li class="mun_navclick">Events</li>
          <li class="mun_navclick">+ About us<ul class="mun_secnavlink"><li class="mun_secop">GUCMUN</li><li class="mun_secop">The Councils</li><li class="mun_secop">The Committees</li><li class="mun_secop">FAQ</li></ul></li>
          <li class="mun_navclick">+ MUNers<ul class="mun_secnavlink"><li class="mun_secop">2016</li><li class="mun_secop">Hall of fame</li><li class="mun_secop">History</li></ul></li>
          <li class="mun_navclick">+ Archive <ul class="mun_secnavlink"><li class="mun_secop">2015</li><li class="mun_secop">2016</li></ul></li>
          <li class="mun_navclick">+ JMUN <ul class="mun_secnavlink"><li class="mun_secop">Program</li><li class="mun_secop">Apply</li></ul></li>
          <li class="mun_navclick">Contact us</li>
        </ul>
      </div>
       
        <div id="mun_content_holder"><div class="content_box">
          <div id="per_title"><p class="per_title_p">Coordination Logistics</p></div>
          <div id="profiles_cat">
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/BDgJP5H.jpg"></img><p class="per_name">Abdelrahman Nasser</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/HD03DIE.jpg"></img><p class="per_name">Abdelrahman Osama</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/IwZrtor.jpg"></img><p class="per_name">Alia Assem</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/AQFKILj.jpg"></img><p class="per_name">Aya Wefky</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/i26IxtO.jpg"></img><p class="per_name">Ingy Sherif</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/bGiB3zB.jpg"></img><p class="per_name">Mahmoud Nabil</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/tUJYOem.jpg"></img><p class="per_name">Nadine Nabil</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/cfR30nn.jpg"></img><p class="per_name">Sarah Alsherif</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/PrdTKdE.jpg"></img><p class="per_name">Yasmin Ismail</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/QuKnR0Y.jpg"></img><p class="per_name">Yehia Mamdouh</p></div>
          </div>
          <div id="profiles_cat">
          <div id="per_title"><p class="per_title_p">Fundraising</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/re4U7hk.jpg"></img><p class="per_name">Abdelrahman Nasser</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/MYP79IC.jpg"></img><p class="per_name">Abdelrahman Osama</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/mXUEnkx.jpg"></img><p class="per_name">Alia Assem</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/epEnyj9.jpg"></img><p class="per_name">Aya Wefky</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/hdwC084.jpg"></img><p class="per_name">Ingy Sherif</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/9TntCj1.jpg"></img><p class="per_name">Mahmoud Nabil</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/I30iMOc.jpg"></img><p class="per_name">Nadine Nabil</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/0DunuFa.jpg"></img><p class="per_name">Sarah Alsherif</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/gPX0hJ8.jpg"></img><p class="per_name">Yasmin Ismail</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/eHCNWsF.jpg"></img><p class="per_name">Yehia Mamdouh</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/BEytTxa.jpg"></img><p class="per_name">Yehia Mamdouh</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/u5hWZSK.jpg"></img><p class="per_name">Yehia Mamdouh</p></div>
          <div class="per_profile"><img id="muner" src="https://i.imgur.com/91gh0Le.jpg"></img><p class="per_name">Yehia Mamdouh</p></div>
          </div>
          </div></div>
       
     <div class="footer_sponsor"><div class="footer_note">Some text here some text here some text here</div></div>
      </div>
    </body>
    • Back to top
    Anzo
    Anzo
    Anzo
    Forumember


    Posts : 358
    Reputation : 8
    Language : English/Arabic
    Location : Baghdad - Iraq
    • Post n°4

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Anzo February 21st 2016, 11:34 am

    Sorry if I'm bumping before the 24-hour mark but I'm REALLY on a hurry here. I have a deadline to work by and cannot afford to waste any. I'd appreciate any quick help.
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19325
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°5

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Ape February 21st 2016, 6:21 pm

    Some one that is good with coding will get back to you when they can bumping your topic is breaking the rules



    HTML/CSS Page Footer Display Issue Left1212HTML/CSS Page Footer Display Issue Center11HTML/CSS Page Footer Display Issue Right112
    HTML/CSS Page Footer Display Issue Ape_b110
    HTML/CSS Page Footer Display Issue Ape1010
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°6

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Ange Tuteur February 22nd 2016, 3:39 pm

    Hi @Anzo,

    Try removing
    Code:
    height:100%;
    from your content containers, and make sure that you clear your floated elements by adding this after them :
    Code:
    <div style="clear:both;"></div>

    What I mean is add the tags above at the end of these elements :
    Code:
    <div id="profiles_cat">
    • Back to top
    Anzo
    Anzo
    Anzo
    Forumember


    Posts : 358
    Reputation : 8
    Language : English/Arabic
    Location : Baghdad - Iraq
    • Post n°7

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Anzo February 22nd 2016, 9:32 pm

    Thanks a bunch, that worked out Very Happy
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19325
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°8

    Solved Re: HTML/CSS Page Footer Display Issue

    Post by Ape February 22nd 2016, 10:48 pm

    Topic solved and archived



    HTML/CSS Page Footer Display Issue Left1212HTML/CSS Page Footer Display Issue Center11HTML/CSS Page Footer Display Issue Right112
    HTML/CSS Page Footer Display Issue Ape_b110
    HTML/CSS Page Footer Display Issue Ape1010
    • Back to top

      Current date/time is September 22nd 2024, 7:36 pm