Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm using primefaces 3.5. I want my Facelets Header to be Static like Facebook Header.So my content can be scrolled with a fixed header.
Nothing specific to Primefaces or either JSF here. It should simply be a matter of applying the correct css style.
For example:
<style>.header{position: fixed; top: 0;}</style>
<div class="header"></div>
See also:
MDN CSS position reference
I had Same problem in Past. Assign your position to fixed position:fixed and make sure that your z-index value of header is lower than the z-index value of content in css.so that your content will not scroll over the header.
Example:
.header{ position:fixed; z-index:1;}
.content{ position:absolute; z-index:2;}
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
There is an extra 20 or so pixels on the righthand side of a site I am developing. I've been combing over the CSS and can't seem to find out why.It's not so noticeable when looking at it on a computer unless you scroll over. It is apparent on a mobile devices. You can see a live example here http://gregtregunno.ca
In footer{ in your css, change
padding:10px;
to
padding:10px 0;
It's the padding that's throwing it out.
Line 472 in your CSS.
Because you set the width of the footer to 100% plus gave it padding. Either remove the padding, or add the rule box-sizing: border-box; to the footer rules.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to make a search input bar and i dont want the text to go under the img
I want it to automaticly be like this. :0
You can add:
input {text-indent: 20px;}
input {
width: 50%;
padding-left: 50px;
/* Makes it not affect width */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
This makes it so it doesn't affect with width but still adds padding
Using the text-indent is practically the exact same, you still need the:
Fiddle: text-indent
Fiddle: padding
UPDATE: Fixed Fiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
I just can't shake this page moving into the footer.
Site is: https://raiderwriter.engl.ttu.edu/super/onecolumn.asp
The #wrapper div is supposed to push a 70px margin down onto the footer, I think? I just want the footer to float below.
Argh.
Your #wrapper DIV has
margin-bottom: -70px
Remove that declaration.
Btw, debugging CSS is pretty straight forward. Just select the problematical element in the browser's dev tools and inspect its applied CSS styles. Then you can disable individual styles to see what changes that produces on the page.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
On http://www.gelcreative.co.uk/ightham/, why is there such a large gap between the end of my content div and my footer div? There is no visible padding or margin, and I can't work out what's forcing the gap.
It's between the end of the white content area and the footer. Footer text should be much closer to the content.
You move your #contentWraper by using
position: relative;
top: -69px;
and you need to do the same for your footer.
If you use
margin-top: -69px;
instead, your footer will be positioned correctly automatically.