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.

HTML/CSS Page Footer Display Issue

4 posters

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

Go down

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
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
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 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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51568
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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>
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
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 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
Anzo
Forumember

Posts : 358
Reputation : 8
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 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
Ape
Ape
Administrator
Administrator

Male Posts : 19450
Reputation : 2011
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

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">
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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
Anzo
Anzo
Forumember

Posts : 358
Reputation : 8
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 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
Ape
Ape
Administrator
Administrator

Male Posts : 19450
Reputation : 2011
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

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