• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 493
  • Last Modified:

Css - Help with footer

Please see attached footer image.   I made some changes to the style sheet and the footer has ended up being incomplete - rest of footer links like Terms, Contact us etc. have vanished.  Attaching complete css code for the style sheet... the  #footer css is near the  bottom.  

I want two footer bars... one that has footer links in the centre...another bar below the first one that has copyright notice.. Both should have minumum height.. just  enough to enclose the text they display.... And the footer should always stick to the bottom no matter how much less/short the content is on the page

Not a css expert, so please help me out.
 
footer.png
style2.css
0
ee-itpro
Asked:
ee-itpro
  • 5
  • 4
  • 2
2 Solutions
 
SSupremeCommented:
Please provide a link so we can help you out.
0
 
ee-itproAuthor Commented:
Developing on local system.. so no link at the moment... I did attach css code file and a footer image
0
 
nap0leonCommented:
A quick look at the css shows that the footer is only 40pixels tall, and since the only item to appear in that footer has a bullet next to it, you probably are using a horizontal unordered list for your footer...  to get LI items to be horizontal instead of vertical, try adding "display:inline" to this:

.footer_menu li {
    color: white;
    padding-right: 1%;
    display: inline;
}

Open in new window


We definitely need the HTML or the live site with the error to offer suggestions on how to make these footer bars always appear at the bottom of the web browser.

On that topic... if the page only contains 1" of content, you want them at the bottom of the user's browser.  What about a page that has 2 feet worth of content where the user has to scroll vertically?  Do you still want the footer locked to the bottom of the browser window?  or does it only apply in cases where page content is shorter than the browser's height?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ee-itproAuthor Commented:
Here's a link..  http://tinyurl.com/eehelp    
0
 
ee-itproAuthor Commented:
Just uploaded .. pls ignore the main directory listing unless you have some nice suggestoion for that .. i was just experimenting a bit...
0
 
nap0leonCommented:
Adding "display:inline" as suggested above fixes the footer links.
0
 
nap0leonCommented:
You also have some unnecessary attributes in your footers that make the alignment off.  Try it with just these:
.footer_menu {
    color: white;
    height: 1.2em;
}
.footer_menu2 {
    background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
    color: grey;
    font-size: 13px;
    margin-top: 21px;
    width: 100%;
}

Open in new window


For your middle section, your tables are wider (140poxels) than the containers (21.5% = 104 pixels on my machine) )they are in which is making stuff appear outside your border.  In my experience, never mix percentages and pixels... figure out which one you want to use (almost always pixels unless you have a really really good reason for percentages) and use it ALL the time.
0
 
SSupremeCommented:
This should be you semantic HTML:
<div class="footer_menu">
    <ul style="display: block; padding: 0pt; margin: 0pt;"><li><a href="about.php">About us</a></li> <li>|</li>
	<li><a href="terms.php">Terms of Use</a></li><li>|</li> 
	<li><a href="privacy.php">Privacy Policy</a></li><li>|</li> 
	<li><a href="contact.php">Contact us</a></li> <li>|</li>
	</ul></div>

Open in new window

and CSS:
.footer_menu li {
    color: white;
    float: left;
    list-style: none outside none;
    padding-right: 1%;
}

Open in new window

0
 
ee-itproAuthor Commented:
Thanks now they do appear....   And about this...

  " On that topic... if the page only contains 1" of content, you want them at the bottom of the user's browser.  What about a page that has 2 feet worth of content where the user has to scroll vertically?  Do you still want the footer locked to the bottom of the browser window?  or does it only apply in cases where page content is shorter than the browser's height?"



Currently what happens is the footer remains at the bottom if i need to use a vertical scroll bar but in cases when the page content is lesser(say about 60% of normal  page height)  then the footer covers the rest 40% of the page which makes it look ugly.  I need the footer to keep sticking to the bottom in such cases as well .  How do we accomplish this ?
0
 
nap0leonCommented:
If you want it to stick to the bottom of the browser window, this may work: I've had some success with it, but it's not perfect.  It uses fixed positioning to place it 0px from the bottom and a z-index of 300 to make it appear above the rest of the page's contents.

Try wrapping this around your footer and see what happens.
.dock_bottom {
    bottom: 0;
    height: 25px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 300;
}

Open in new window

0
 
ee-itproAuthor Commented:
Hi, Thanks for the help... i found a solution for stick footer here... it says it works ion all cases/browsers... however i'm having some trouble implementing it correctly... please see if you could possibly help...  i opened a new question for this     http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27527289.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now