Domanda
in my CSS example I've created a horizontal menu with 50px height. Also tried to use a sticky footer but the BODY is longer with the height of the top menu, and because of it a 50px big white place appeared on the bottom of the page under the Footer. [The problem exists on IE10. Not tested in other browsers yet.]
html file:
https://stackoverflow.com/questions/22863060
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian <!doctype html>
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<script src="jquery-1.9.1.js"></script>
<!-- Source our javascript file with the jQUERY code -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<div id="header">
<div id="headerline">
<div class="wrapper">
<ul class="navigation">
<li class="logo">
<a href="#">WebApp</a>
</li>
<li class="tmenu">
<a href="#"><span class="menuItem">Site Events</span></a>
<ul class="smenu">
<li><a href="#"><span>Consulting</span></a></li>
<li><a href="#"><span>Sales</span></a></li>
<li><a href="#"><span>Support</span></a></li>
</ul>
</li>
<li class="tmenu">
<a href="#"><span class="menuItem">Text files</span></a>
<ul class="smenu">
<li><a href="#">Company</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="wrapper">
<div class="contentbox">
<h1>Welcome Message</h1>
<p class="date">3/31/2014 - 4:37 PM</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dui tempus, iaculis arcu sit amet, porttitor turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu quam mi. Morbi ac nulla eget diam commodo faucibus. Proin dignissim elit a ligula rhoncus, vitae viverra justo dignissim. In congue quam molestie, mollis ante sed, viverra urna. Pellentesque massa velit, eleifend a magna nec, vulputate gravida dui. Integer pulvinar id arcu ut faucibus. Phasellus vitae augue ac eros sollicitudin vehicula. Nunc aliquam leo a laoreet consequat. Fusce tristique mauris sed neque feugiat, id dignissim dui bibendum. Ut hendrerit commodo mi. Nunc pharetra, eros ut ultricies ultricies, erat lectus vehicula odio, vel suscipit odio nisi eu tellus. Integer interdum adipiscing gravida. Donec vitae neque diam. Mauris interdum eu nulla nec interdum.</p>
<p class="text">Vivamus eu quam ut felis hendrerit mattis ac nec urna. Maecenas erat felis, gravida ut porttitor at, congue eget mauris. Phasellus interdum dolor sem, et gravida massa scelerisque ac. Pellentesque non rhoncus orci. Quisque viverra tellus justo, eu congue mi mattis eget. Fusce a nulla urna. Fusce et mauris eget lorem lacinia sollicitudin. Fusce condimentum neque quis est tristique,aliquet dui sodales.</p>
<p class="text">Donec at velit nec nibh porttitor auctor quis non ipsum. Vestibulum condimentum viverra mattis. Praesent sed quam ultricies magna tempor tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed venenatis nulla eget sapien hendrerit vulputate. Donec sed libero justo. Aliquam diam felis, feugiat ac vulputate vel, iaculis at lorem. Nam facilisis lacus nec turpis bibendum, sit amet rutrum eros ultrices. </p>
<p class="text">Quisque quis scelerisque risus. Fusce a lacinia velit, non vestibulum ipsum. Donec nunc ipsum, semper quis sagittis nec, facilisis id felis. Morbi eget magna volutpat, adipiscing dui ac, elementum est. Curabitur sem diam, rhoncus in lorem eu, sodales eleifend sem. Etiam bibendum convallis fermentum. Donec ullamcorper pulvinar neque in auctor. Vestibulum tincidunt arcu vel orci molestie porta. Quisque quis commodo velit, eget vulputate nibh. Cras eu venenatis tellus. </p>
<p class="text">Duis ultricies accumsan euismod. Nulla pulvinar felis placerat vehicula rutrum. Etiam placerat vitae lacus nec laoreet. In nunc nibh, tincidunt sed dictum sit amet, ultrices vel enim. Nulla in urna molestie, pulvinar massa non, consectetur augue. Ut et ligula vitae libero vehicula mollis. Suspendisse nisl felis, pretium eget libero in, pharetra porttitor lectus. Nunc tincidunt nunc neque. Donec eget interdum ante. Pellentesque vehicula sapien eu lectus tempus interdum. Suspendisse pharetra purus id lectus cursus dapibus. Proin sed lorem dignissim, placerat est sit amet, blandit diam. Ut ut risus vitae neque sodales rhoncus nec ac massa. Fusce ac augue tincidunt, vulputate augue sit amet, varius tellus. Vivamus a tortor ipsum. Vestibulum in tellus neque.</p>
</div>
</div>
</div>
<div id="footer">
<div id="fback">
<div class="wrapper">
<div id="fContent">
<ul><p>Help</p>
<li>About WebApp</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul><p>FAQ</p>
<li>Question</li>
<li>Question</li>
<li>Question</li>
</ul>
<ul><p>Contacts</p>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
/*border: 2px solid red;*/
}
body {
font-family: arial;
text-align: center;
background:url(foo) fixed;
height: 100%;
/*border: 2px solid red;*/
}
div.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}
/*=== header ===*/
div#header {
text-align: center;
position: fixed;
_position: absolute;
top: 0;
left: 0;
_top:expression(eval(document.body.scrollTop));
display: block;
width: 100%;
}
div#headerline {
padding: 0;
margin: 0;
background: #e6e6e6;
height: 50px;
border-bottom: solid 1px #172740;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation li{
float: left;
}
ul.navigation a {
text-decoration: none;
display: block;
}
span.menuItem {
display: inline;
display: inline-table;
display: inline-block;
line-height: 68px;
}
li.logo {
font-family: tahoma;
font-size: 40px;
font-weight: bold;
}
li.logo a {
padding: 0;
height: 50px;
width: 180px;
text-align: left;
}
li.tmenu {
float: left;
width: 160px;
position: relative;
}
li.logo a, li.tmenu > a { /* ">" means the first level of this type of children*/
color: #172740;
text-shadow: 2px 2px white;
}
li.tmenu a {
width: 160px;
height: 50px;
}
li.tmenu > a {
font-weight: 600;
}
li.tmenu > a:hover {
font-weight: 900;
}
ul.smenu {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
background: #172740;
border: solid 1px #000;
}
ul.smenu, ul.smenu li {
width: 160px;
float: left;
}
ul.smenu a {
display: block;
height: 20px;
padding: 8px 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px #000;
}
ul.smenu a:hover {
font-weight: bold;
}
/*=== content ===*/
div#content {
text-align: left;
/*position: relative;*/
min-height: 60%;
margin-top: 50px;
}
h1 {
padding: 0;
margin: 0;
padding-top: 50px;
color: #253e66;
font-size: 25px;
}
p.date {
font-size: 8px;
color: #aaa;
}
p.text {
font-size: 14px;
margin-bottom: 6px;
}
/*=== Footer ===*/
div#footer {
padding-top: 50px;
width: 100%;
min-height: 20%;
}
div#fback {
overflow: hidden;
padding: 0;
margin: 0;
background: #253e66;
text-align: center;
}
div#fContent {
color: #e6e6e6;
text-align: center;
}
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
div#fContent ul > p {
font-weight: bold;
padding-bottom: 12px;
}
div#fContent li {
padding-bottom: 3px;
}
/*=== Copyright content ===*/
JS file:
$(document).ready(
/* This is the function that will get executed after the DOM is fully loaded */
function () {
/* Next part of code handles hovering effect and submenu appearing */
$('.tmenu').hover(
function () { //appearing on hover
$('ul', this).fadeIn();
},
function () { //disappearing on hover
$('ul', this).fadeOut();
}
);
}
);
Also weird that, if I set a border on the BODY, big part of the white space is disappear. Please help me out, what I've messed in the CSS, and how can I repair my code. Thanks a lot in advance.
Soluzione
sorry the was indeed a problem didnt understand the question.
I changed div#fContent ul from:
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
to:
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 0px 0px;
font-size: 14px;
}
Good luck. Check the fiddle and let me know:
Altri suggerimenti
don't quote me on this please... but I think that the the paragraph element gives white space so to remove this make its margin 0px. Hope it's the right answer if not please comment back MontyX. thanks
