Welcome to WebmasterWorld Guest from 3.231.228.109

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Footer and Code Improvement

     
7:24 pm on Jul 15, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 8, 2007
posts: 83
votes: 0


Hello friend,

I had challenges placing on footer within the wrapper DIV. So I placed it outside it which is just so wrong. I need assistance to fitting it within the wrapper DIV. Below is the code.

I am also asking for comments on how to improve the code. From studying Law to Code, major transition,lol


<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Title</title>

<link href="stylepage.css" rel="stylesheet" type="text/css"/>

</title>

</head>

<body>

<div id="fb-root"></div>
<div id="fb-root"></div>
<div id="fb-root"></div>


<div id = "wrapper">

<div id="top">

<div id = "menuContainer">

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Menu 5 sub 1</a></li>
<li><a href="#">Menu 5 sub 2</a></li>
<li><a href="#">Menu 5 sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
</ul>

</div><!--menuContainer DIV-->

<div id = "header">

<h2>Some Text Here</h2>

</div><!--End header DIV-->

</div><!--End of TOP Div-->

<div id="leftMenu">

<ul>
<li><a href="#">Left Menu 1</a></li>
<li><a href="#">Left Menu 2</a></li>
<li><a href="#">Left Menu 3</a></li>
<li><a href="#">Left Menu 4</a></li>
<li><a href="#">Left Menu 5</a></li>

</div>

<div id="content">

<p>Welcome!</p>

</div><!--End of Content-->



</div><!--End of Wrapper DIV-->

<div id="footer">

<P>&copy Owner, 2014</p>

</div><!--End of footer-->

</body>

</html>


Here is the CSS file:


body, div, leftMenu, leftMenu ul, leftMenu li
{
margin:0;
padding:0;
}

#top
{
height: 50px;
position: fixed;
top: 0px;
}

#wrapper
{
width: 900px;
height: 100%;
background-color: pink;
margin-left: 200px;
margin-top: 0px;
}

#header
{
width: 896px;
margin: 0px 0px;
background-color:blue;
color: white;
text-align: right;
padding: 2px 2px 2px 2px;
float: clear;
top: 50px;
padding-top: 20px;
}

#menuContainer
{
height: 30px;
background-color: grey;
position: fixed;
width: 900px;
}

#menuContainer ul
{
list-style: none;
margin:0;
padding: 0;
}

#menuContainer ul li
{
text-decoration: none;
float: left;
width: 120px;
border-right: 1px solid black;
text-align: center;
position: relative;
height: 30px;
line-height: 30px;
}

#menuContainer li ul
{
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}

#menuContainer li ul li
{
float: none;
/*border-top: 1px solid black;*/
background-color: yellow;
border-bottom: 1px solid black;
border-right: 1px black;
border-left: 1px black;
}

#menuContainer a
{
text-decoration: none;
display: block;
}

#menuContainer li:hover
{
background-color: maroon;
}

#menuContainer li:hover ul
{
visibility: visible;
}

#leftMenu
{
width: 150px;
background-color: grey;
height: 85%;
float: left;
margin-top: 89px;
margin-left: 0px;
text-align: justify;
border: 0;
padding: 0px;
padding-top: 0px;

}

#leftMenu ul
{
padding: 0px;
height: 30px;
margin:0px;

}

#leftMenu a
{
text-decoration: none;
display: block;
}


#leftMenu ul li
{
text-decoration: none;
list-style: none;
border-bottom: 2px solid black;
background-color: yellow;
border-left: 0px;
text-align: center;
display: block;
line-height:30px;
}

#leftMenu a:hover
{
display: block;
background-color: black;
height: 30px;

}

#Content
{
background-color: green;
width: 730px;
float:left;
padding-left: 20px;
height: auto;
margin-top:89px;

}

#footer
{
float: both;
background-color: black;
height: 30px;
margin-top:0px;
width: 898px;
margin-left: 200px;
color: white;
text-align: center;
line-height: 30px;
}

7:58 pm on July 15, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4512
votes: 350


Can you move this line:

</div><!--End of Wrapper DIV-->

to just before the </body tag?

And in #footer, remove:
float: both;
width: 898px;
margin-left: 200px;


-
float: both;
isn't doing anything, maybe you want to use
clear: both;
(?) if there are any floats open from the content preceding it.

-
width: 898px;
with the footer inside the #wrapper container, the width is limited by the width of the wrapper div.

-
margin-left: 200px;
Again, the width and position of the #footer div are taken care of by the #wrapper and setting a 200px left margin would leave you with a black box on a pink background divided close to the middle of the footer vertically.

And is there a reason to have only one line that is the entire height of your footer? If not, in #footer css remove:
height: 30px;

and let the inherited margins take over unless appearance says it needs some other setting.

Note: I didn't view the whole page, but since you asked about fixing the footer, that is the only part I am addressing, here, apologies if there's something I missed.
9:56 pm on July 15, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15882
votes: 875


<div id="fb-root"></div>
<div id="fb-root"></div>
<div id="fb-root"></div>

I hope this is just an artifact of posting. You can't have multiple elements with the same id (name, yes, sometimes) -- and why have them at all, if they're empty?

I had challenges placing on footer within the wrapper DIV.

Can you explain this more? What form did the "challenges" take, or what happened when you tried?

not2easy said:
float: both;

isn't doing anything, maybe you want to use
clear: both;

(?) if there are any floats open from the content preceding it.

In combination with
float: clear;

elsewhere in the CSS, it makes me wonder if something got garbled in cutting-and-pasting.
9:59 pm on July 15, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4512
votes: 350


OK, I see there were a few things that I missed. A minor fix here - <P>&copy Owner, 2014</p> I'd change that to <p>. I am not familiar with the doctype: <html xmlns:fb="http://ogp.me/ns/fb#"> but usually you would need a ; to use the &copy as in
&copy;


Your leftMenu is missing a closing </ul tag.
5:39 pm on July 17, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:May 17, 2011
posts:170
votes: 0


I just tested your CSS and HTML. Changing float:clear to clear:both in the footer style reveals the footer (which may have been hiding at the top of the page behind one or more other divs). The other issues mentioned by the posters here are unrelated. Perhaps start with a very, very simple CSS framework -- without menus or absolute positioning. Then test it as you build on it -- one element or feature at a time. It's easier to troubleshoot things that way, especially when you're just getting your feet wet in CSS.
7:03 pm on July 18, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 8, 2007
posts: 83
votes: 0


Hello guys,

Thank you very much. Advise taken. Got the footer in its place using float: clear and that worked just fine.

Guess I may need to go back to the basics.

Cheers!
9:06 pm on July 18, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15882
votes: 875


<topic drift>
usually you would need a ; to use the &copy as in &copy;

You know all those unintentional smileys that moderators are always having to clean up? They arise in part because the closing ; is optional. So
&)

expands behind the scenes to (space inserted by me)
&amp; )

which in turn is reanalyzed for smiley purposes as
&amp ;)

leading to onscreen
&)
because
&) = &;)

</topic drift>

Got the footer in its place using float: clear

What, if anything, does
float: clear

mean?
7:22 pm on July 23, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 8, 2007
posts: 83
votes: 0


A follow-up question guys.

Notice in my code and end product how the left menu and content go right under the header when scrolled down. That is fine. That is how I exactly want it to be.

However, when I embed a Facebook post and scroll down, that content goes above both the header and the top-menu. Any ideas of how this can be corrected?

Thanks.