HTML/CSS Page Footer Display Issue
4 posters
Page 1 of 1
HTML/CSS Page Footer Display Issue
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
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
Last edited by Anzo on February 22nd 2016, 9:32 pm; edited 1 time in total
Re: HTML/CSS Page Footer Display Issue
Could you please post the coding you used for the page? Please use the code tags.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: HTML/CSS Page Footer Display Issue
- 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>
Re: HTML/CSS Page Footer Display Issue
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.
Re: HTML/CSS Page Footer Display Issue
Some one that is good with coding will get back to you when they can bumping your topic is breaking the rules
Re: HTML/CSS Page Footer Display Issue
Hi @Anzo,
Try removing
from your content containers, and make sure that you clear your floated elements by adding this after them :
What I mean is add the tags above at the end of these elements :
Try removing
|
- 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">
Similar topics
» Remove the footer on a custom HTML page
» [Help] HTML Page: Space between Header and top of page.
» HTML page issue
» HTML Page Form Send Issue
» How to Embed a Google Docs Form into an HTML page using HTML Pages Management
» [Help] HTML Page: Space between Header and top of page.
» HTML page issue
» HTML Page Form Send Issue
» How to Embed a Google Docs Form into an HTML page using HTML Pages Management
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum