Hello everyone!
We are evaluating CoffeCup HTML Editor and we are stuck on an issue: how position footer to the botton of the page?
The theme used is Two Column Fluid 2:
http://i.imgur.com/vVv67.jpg
And how it looks on Chrome:
http://i.imgur.com/ymUKw.jpg
Should be no blank space after the footer. How achieve that?
http://i.imgur.com/jg2t4.gif
Positioning Footer at the Bottom of...
david.lynch
Guest
7 posts
Inger
Senior Advisor
14,604 posts
Online Now
If you want a sticky footer, try adding this to the footer css:
position: absolute; bottom: 0;
position: absolute; bottom: 0;
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
david.lynch
Guest
7 posts
Hello Inger and thanks for the reply,
I can't find a CSS. How can I do that exactly?
Edit: found: http://www.coffeecup.com/help/articles/ … yle-sheet/
I'll try that....
http://i.imgur.com/jg2t4.gif
I can't find a CSS. How can I do that exactly?
Edit: found: http://www.coffeecup.com/help/articles/ … yle-sheet/
I'll try that....
http://i.imgur.com/jg2t4.gif
Jo Rice
Senior Advisor
10,951 posts
Hiya David,
Some of the CSS styling in some of the CC themes are/were in the main html pages rather than separate pages. You may be using one of those themes? If that's the case and you don't find any css files i the theme check the top of the html file and see if you have the css styles inside the <head> section.
If the case is that you don't understand what CSS is, I would suggest learning more about that before trying to edit/create a site page
Some of the CSS styling in some of the CC themes are/were in the main html pages rather than separate pages. You may be using one of those themes? If that's the case and you don't find any css files i the theme check the top of the html file and see if you have the css styles inside the <head> section.
If the case is that you don't understand what CSS is, I would suggest learning more about that before trying to edit/create a site page
david.lynch
Guest
7 posts
Hello,
It worked on the following section code of the main html:
But now, if website opens on a small desktop, footer stays on top of the main text. How correct that?
Previous session is:
It worked on the following section code of the main html:
/* Content Positioning and Size */
nav { float: right; width: 30%; }
#content { margin-left: 34.3%; }
#extra { float: right; clear: right; width: 30%; } /* Footer */
footer { background: #666; border-bottom: 6px solid #aaa; clear: both; width: 100%; position: absolute; bottom: 0; }
footer a { color: #fff; }
footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
footer ul { border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
nav { float: right; width: 30%; }
#content { margin-left: 34.3%; }
#extra { float: right; clear: right; width: 30%; } /* Footer */
footer { background: #666; border-bottom: 6px solid #aaa; clear: both; width: 100%; position: absolute; bottom: 0; }
footer a { color: #fff; }
footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
footer ul { border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
But now, if website opens on a small desktop, footer stays on top of the main text. How correct that?
Previous session is:
/* Content Style */
nav { border-bottom: 1px solid #ccc; padding-right: 18px; }
nav ul { padding: 0 18px 9px; }
#extra { border-bottom: 1px solid #ccc; padding-right: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }
nav { border-bottom: 1px solid #ccc; padding-right: 18px; }
nav ul { padding: 0 18px 9px; }
#extra { border-bottom: 1px solid #ccc; padding-right: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }
Inger
Senior Advisor
14,604 posts
Online Now
In that case you'll have to take a different approach. It was easier to create the files than explaining, so I have attached them for you to study. Mainly, it's about having the height of some tags at 100%, a padding to the bottom of the container which is the same as the height of the footer, and then move the footer up by that same height. Also, I moved one end div up above the footer, then the footer needs to sit outside the container.
I have taken the css out of the html file and created a separate file, for which you ought to be grateful. Now all you have to do is linking that css file to all the pages, and any changes to the appearance can be made just once, and they will affect all the pages, just like that. Just look for this line:
<link href="styles.css" rel="stylesheet" type="text/css"/>
in the head section of the document, and copy/paste that to all the other pages.
I have taken the css out of the html file and created a separate file, for which you ought to be grateful. Now all you have to do is linking that css file to all the pages, and any changes to the appearance can be made just once, and they will affect all the pages, just like that. Just look for this line:
<link href="styles.css" rel="stylesheet" type="text/css"/>
in the head section of the document, and copy/paste that to all the other pages.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
david.lynch
Guest
7 posts
http://i.imgur.com/bYM5b.gif
Hello Inger,
I'm grateful not only for taking out CSS from the HTML, but for the result at all: working as expected! http://i.imgur.com/XtT2V.gif
Please accept my sincere http://i.imgur.com/jg2t4.gif . I hope that this topic helps someone else too
Best regards
Hello Inger,
I'm grateful not only for taking out CSS from the HTML, but for the result at all: working as expected! http://i.imgur.com/XtT2V.gif
Please accept my sincere http://i.imgur.com/jg2t4.gif . I hope that this topic helps someone else too
Best regards
Inger
Senior Advisor
14,604 posts
Online Now
Glad it works and you are pleased!
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
