Floating a footer DIV bottom center of screen inside a container Div??
Hi Im having terriblr trouble..........typical- i get the website done nice and fast and the last thing the annoying client wants I struggle!! I have a container div for the whole site keeping it centered. The client now wants the 'copyright' footer at the bottom of the screen......foalting of course......so its always centered and at the bottom of the screen whatever the size of your monitor.
Im struggling like hell...........I maybe not doing it right but when i get somwhere close it seems to be conflicting with the scrolling background pictures.
please have a look and advise if you know help.....thanks!! www.websitesmonthly.com/townhouse
I think you're making this overly complex. All you need is a simple 2-column layout.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Add whatever you wish to the #mainContent (left) div.
Nancy O.
Similar Messages
-
Selection screen inside a custom container
hey guys,
I have a requirement to display a selection-screen inside a container,How can we solve this problem?
Hey guys Help me out.
Regards,
Midhun Abraham
Edited by: Midhun Abraham on Oct 7, 2008 7:08 AMyou can call a selection screen in sub screen area
declare selection screen as
begin of selection-screen 0100 as subscreen.
end of selection-screen...
then,
in flow logic of your module pool screen
PBO
call subscreen <sub_area> including sy-repid '0100'.
" at selection-screen output event is called
PAI.
call subscreen <sub_area>.
"at selection-screen is called -
Footer at bottom of screen or at bottom of page
Hi guys
I'm creating a new website which I would like to give a footer that stays on the bottom of the screen if the content only needs the screen height, but that follows the content if the content makes it a scrollable page?
So if there are for example only 3 lines of text between my header and my footer on the webpage, I would like to have the footer at the bottom of the screen instead of just below the text. If there is a lot of content which makes the page scrollable, I would like to have the footer at the bottom of the page, below the content.
Do you understand what I mean?
Thanks!
BobI'll show you how but I don't recommend doing this becuase it relies on hacks that don't work well in all devices. Nobody really cares if your footer is aligned at the bottom of the screen on short pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alt-Web Template :: 100% Height Layout</title>
<style type="text/css">
* 100% height layout with header, sidebar and footer
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,helvetica,sans-serif;
font-size:small;
color:#666;
#container {
z-index:1;
position:relative; /* needed for footer positioning*/
margin:50px auto; /* center, not in IE5 */
width:750px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* real browsers */
overflow:hidden;/*float containment*/
background:#FFF; /*for equal height columns, use a 2-toned background image here*/
#header {
padding:1em;
background-color:#FFFFCC;
border-bottom:6px double gray;
#sidebar {
float:left;
width:8.79em;
background-color:#FFCC00;
padding: 1em;
margin-top: 5.5%;
#content {
padding:1em 1em 5em; /* bottom padding for footer */
margin-left: 11em;
border-left: 6px double gray;
background-color: #EAEAEA;
#footer {
position:fixed;
width:725px;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
min-height: 40px;
padding:1em;
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>#header</p>
<h1>100% Page Height </h1>
</div>
<div id="sidebar">
<p>#sidebar</p>
<p>Footer remains fixed at viewport bottom, even on short pages.</p>
</div>
<div id="content">
<p>#content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam quis justo quam. Nullam aliquam luctus suscipit. </p>
<p>Ut id nibh nec nisi ullamcorper vehicula. Phasellus lacus lectus, euismod sed tincidunt ac, laoreet venenatis libero! In hac habitasse platea dictumst.</p>
<p>Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
</div>
<div id="footer">
#footer
</div>
<!--end container --></div>
</body>
</html>
Nancy O. -
Dear fellow Apple owners,
Is it normal that, when I try to share something on my iphone 5, be it via e-mail or textmessage, my keyboard is no longer touching the bottom of my screen, it 'floats' in the middle of my screen, making it impossible to choose the addressee?
http://imgur.com/dwXwdGu.jpg
Has anybody seen this before?
I had it in 6.1.2, 6.1.3 and 6.1.4
All of them have the same problem...
Does anybody have a solution?Hey StevenKusters,
Welcome to Apple Support Communities! First I would try backing up and erasing all content and settings, but if that doesn't resolve the issue you can use iTunes to restore your iOS device - part of standard isolation troubleshooting. Restoring your device will delete all data and content, including songs, videos, contacts, photos, and calendar information, and will restore all settings to their factory condition.
iTunes: Restoring iOS software
http://support.apple.com/kb/HT1414
All the best,
David -
When I download movies, I get a small, black rectangle in the bottom center of the screen. This is irritating! How do I get rid of it?
Search the forum. This has been reported a few times. I do not recall what the fix is, but it has already been posted.
-
Can the Dock in Yosemite be made transparent? I would also like Safari to paint to the bottom of the screen with the dock icons floating over the window.
Do you have that problem when running in the Firefox SafeMode? <br />
[http://support.mozilla.com/en-US/kb/Safe+Mode] <br />
''Don't select anything right now, just use "Continue in SafeMode."''
If not, see this: <br />
[http://support.mozilla.com/en-US/kb/troubleshooting+extensions+and+themes] -
Bottom center part of screen boundary gets warm
Hi,
The bottom center part of the screen boundary of Lenovo 3000 N100 gets warm, both front (screen) and backside (cover). I noticed that backside of that area has a crack.
What is the solution, do I need to change the screen or cover or just need to close the crack with tape.
Solved!
Go to Solution.The heat is from the lcd inverter.
This is a component that converts dc voltage to ac voltage
to power the lamp in the display.
Some heat is normal.
If it gets Very warm, it may be failing.
If it fails, the screen will most likely go dark.
Fairly easy and low cost replacement, in most areas.
Due to the age of the laptop, I would just wait and see. -
When I swipe up from the bottom of the screen to use control center I am not able to use the music controls for music or podcasts and music controls do not work on the lock screen either is anybody else having this problem???????
Not really sur easy you would be having that problem. Mine works. You might try RESET DEVICE
Hold down the Sleep/Wake button and the home button together until the apple logo appears (ignore the ON/OFF slider) then let both buttons go and wait for device to restart (no data will be lost). Then try again and see if it makes a difference -
Problems with CSS
I am building a new page for my company. I am trying to place the Div Footer at the bottom of the screen. I have placed (i believe) the appropriate information for the CSS.
The problem is when i minimize the browser the Footer section never leaves the screen and hovers over the other div tags. When I shrink the browser to its maximum the divs fall on top of each other.
What I would like to know is how to make the Footer div below hide like the other divs but remain at the bottom of the page instead of hovering over the other divs. I have read that I should not apply fixed divs.... is that correct?
I have applied to the current CSS to the below web page: http://trbla.com/sample.html
#rhythm {
width: 607px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
*img {
border: 0;
#rhythm #goldr {
width: 215px;
float: left;
border: 0;
#rhythm #trbnew {
float: left;
width: 181px;
border: 0;
#rhythm #greyr {
width: 211px;
float: left;
border: 0;
#nav {
margin-top: 200px;
width: 607px;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
clear: both;
#nav #navonewrap {
float: left;
clear: both;
#nav #navwraptwo {
float: left;
width: 175px;
height: 22px;
#nav #navwrapthree {
float: right;
width: 215px;
margin-right: -75px;
#footer {
bottom: 0px;
clear: both;
position: fixed;
width: 100%;
#footer #left_footer {
float: left;
clear: left;
overflow: hidden;
#footer #r_footer {
float: right;
Thanks for anyones help thus far,
RhythmI think it's the way I'm doing the conditional statement.
'Went through another knowledge-base article that basically had me
incorporate the conditional attribute into the <xsl:for-each
select= . . .> statement and it appears to be a better way. I
also created a xslt fragment and inserted it into a php page rather
than making the whole thing xslt. I think this helps as well, but
can't absolutely close the book on this until the server is
properly configured to transform xslt in php pages.
Here's the latest
http://cals.arizona.edu/arizonawet/workshops/current_workshops-trial2.php -
Page doesn't flush to the bottom of the screen, despite the lack of content on the page
On the home page of my website, the content doesn't fill the whole screen, therefore the footer isn't flushed to the bottom of the screen. Is there a way for the footer to automatically flush to the bottom for any resolution? Here is a link to my page so you can see the example:
www.ees-energy.com
or a better example at
www.ees-energy.com/downloads.html
Thank you,
ObaidHello
This is where it gets tricky for me!
I have never used a sticky footer - I just don't like the idea and it has always seemed a bit over complicated to me.
I did have a go at applying it to your page and got it to work without too much difficulty but, adding an effect like this to an established page is tricky because it's hard to see how different components interact with each other.
The basic advice from the sticky footer site is to use this as fundamental structure to the page:
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
If you want to go this way then I would suggest starting from the beginning with that HTML and adding your content to it. Notice that the footer is outside the wrapper and your content would need to go in the #main div. They have page giving instructions on the site and a wedge of CSS that you can just cut and paste into your style sheet.
You have chosen to use a liquid layout (which is a part of the problem with width that you have asked about in your other post). I agree that a liquid layout is a neat idea but again, I don't like it so much because it's over complicated.. For instance, your page doesn't look so good in a wide monitor.
One other way to get your footer further down the page would be to add some content to your sidebar. How about a mission statement or a green quote of some kind or a pull quote from your text?
Sorry I can't be of any further help with the sticky footer thing.
Martin -
CS6.5 photoshop file doesn't center on screen. How can I do this?
I have used various options under windows, tried reducing the size of the file and saving it in .jpeg instead of other formats. The image either floats off the bottom of the screen completely or leaves a peak at the top portion. I need it to center so I can work on it. Any ideas?Photoshop General Discussion
Which operating system are you using?
-
Footer div not aligning in Dreamweaver when swf file added...
Hi, here's a good one!
I have a template that has a div (#footer) as an uneditable area. When I add an swf file to a div above it (#flash), the #footer div displaces in Dreamweaver, but looks OK in any browsers that I preview it in.
Here's a link.... It's the DESIGN page that's the issue and I'm guessing that any other pages based on this template may generate the same problem.
http://www.davidcoshdesign.com/nea
Any ideas?
Thanks in anticipation!Add clear: both; to the ccs selector below (as shown)
#footer {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFF;
height: 45px;
width: 950px;
left: 50px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-decoration: none;
top: -50px;
position: relative;
float: left;
margin: 0px;
clear: both; -
Need help with footer div positioning
hi guys,
thank you for checking out my post...
on my website i want a footer div to sit at the very bottom
of the page. if the content requires the page to be scrolled i
would like the footer to be pushed down still at the bottom.
so basically, whether the page needs to be scrolled or not,
the footer div will be at the absolute bottom of the page. hope
that makes sense!
ive been trying and trying with endless tutorials and trying
different things that i know but to no avail.
if you could have a look at my site
here i would
be most grateful for any advice or solutions.
thank you once again and i hope to hear from you.
all the best,
smSpindrift wrote:
>
quote:
either make that bottom:0px; or bottom:0;
>
> oops! sorry, my bad! ive made the correction
> now the footer kind of works but just stays in the same
place as the content
> scrolls behind it.
> when no scrolling is needed on a page what we have is
good though.
> im after getting the content to push the footer down to
the bottom of the page
> so when you scroll down to the bottom (if the page needs
to be scrolled) the
> footer will be at the bottom (of the page not screen) if
that makes sense.
> many thanks,
> sm
>
You could check out this demo - view the code - paying
attention to the
comments in the embedded css, particularly, the padding on
the #body
(note that this is a div and not the body tag) div and the
height of the
#footer div.......
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
Personally I'd just let it go with the flow :-)
chin chin
Sinclair -
F/U Ques. to previous post (css/bleeding off the bottom of the screen)
i got the top of the container div bleeding off the way i'd like and, while the bottom bleeds as well, something weird is happening with the footer div. looks fine in ff on a mac but, in safari, it's too high up - not sticking to the 10px off the bottom that it's supposed to.
here's a link:
http://clients.quintandquint.com/dtw/
many thanks.Honestly, I'd not worry about that difference. However, try changing this -
<td> <div class="footer">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="#">ABOUT DAVID</a> • <a href="#">THE WORKSHOPS</a> • <a href="#">CONTACT</a> • <a href="http://www.facebook.com/davidturnleyphotography" target="_blank">CONNECT ON FACEBOOK</a> • ALL IMAGES COPYRIGHTED BY THEIR RESPECTIVE OWNERS.
</td>
</tr>
</table></div>
to this -
<td><div class="footer"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="#">ABOUT DAVID</a> • <a href="#">THE WORKSHOPS</a> • <a href="#">CONTACT</a> • <a href="http://www.facebook.com/davidturnleyphotography" target="_blank">CONNECT ON FACEBOOK</a> • ALL IMAGES COPYRIGHTED BY THEIR RESPECTIVE OWNERS.</td>
</tr>
</table></div>
In other words, remove that whitespace from the code, and see what happens. -
How do you reactivate the grey utilities scroll up tab at the bottom of the screen that should reveal wifi, bluetooth etc?
Doesn't matter what orientation the ipad is in, it won't scroll up from the bottom.
All other screen functions work normally.Settings/Control Center. There are two options which are pretty self-explanitory...one enables/disables access on the Lock Screen and one enables/disables access within apps/games.
Maybe you are looking for
-
Can I share one iTunes Library between 2 different Windows Users?
I'm having syncing issues (discussed in a different post) with using my 2nd Gen Shuffle and 30G iPod video from the same instance of iTunes. Previously I tried creating a 2nd user on my Windows PC and using my Shuffle with another instance of iTunes
-
Will my bookmarks be lost when IGoogle is terminated? or are these on Firefox?
In other words, are my browser bookmarks stored at Firefox, and therefore will not be affected when IGoogle goes away on Nov 1? (I have saved no bookmarks at IGoogle, all are at Firefox) Thank you
-
hi everyone, my system is in LAN is application server is essential to connect to sap ? thanks, tony
-
Dreamweaver CS3 crashes HELP!
I'm working on a project in DreamweaverCS3 using Coldfusion 7.0.2. I have a page that has some drop down menus that are populated via a coldfusion query. When I click on the <cfselect> statement line (I need to edit this one value to fix the page), D
-
Production order operation's standard value
hi, can anyone shed some lights where does the production order operation's standard values derive from? thanks.