The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

HTML/CSS Page Footer Display Issue

View previous topic View next topic Go down

Solved HTML/CSS Page Footer Display Issue

Post by Anzo on 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

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

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

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35668
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

Post by Anzo on 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>

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

Post by Anzo on 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.

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

Post by APE on 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





APE
Manager
Manager

Male Posts : 8335
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

Post by Ange Tuteur on 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">

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

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

Thanks a bunch, that worked out Very Happy

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: HTML/CSS Page Footer Display Issue

Post by APE on February 22nd 2016, 10:48 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8335
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum