I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...
Related
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
The code I'm working on is in http://jsfiddle.net/truxx/v8jnyn9h/
I would like to make everything that is in the header tag fixed (that it does not move when i scroll the site).
I found out that a code like:
div#header{
position:fixed;
}
does that, but it sends the header to the left, and I want it centered.
If I type
div#header{
margin:auto;
position:fixed;
}
the margin doesn't work at all... how should I correct this?
(I would also like to add a bar in the right of the page, that does not move either while i scroll down. Made an experiment, but something similar happened. The elements of that div box did get a fixed position, but they moved to the left, so i'm guessing it's the same problem).
Your header (which isn't in your fiddle or your question) will need a width, and top:0;
div#header {
position: fixed;
top: 0px;
margin: auto;
width:100%; /*or whatever width you want */
}
This should work for the css:
div#header {
position: fixed;
top: 0px;
margin: auto;
//AND A WIDTH PROPERTY (in pixels, percent, or em) LIKE:
margin: 100%;
}
You need to fix it to the top, as well as margin: auto to center. I couldn't find the header element in your code in the link provided, but if you code the rest correctly, that should work.
On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.
Here's the footer CSS:
#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}
And I'm wondering if the right-nav equal column CSS is affecting it:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
Any ideas would be great.
*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.
Sounds like you want to use a sticky footer.
http://ryanfait.com/sticky-footer/
This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.
What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.
if i understood you right
then you need to add overflow to your footer
#footer
{
overflow:hidden;
}
Using this should work. Here is a jsFiddle example of it in action.
#footer {
bottom:0px;
position:absolute;
}
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.
I'm using a strict doctype and cannot get one of my divs aligned to the bottom. I'd like to specify a 100% height on the parent container and then push the inner container to the floor of the parent. How is this done using a strict doctype?
This is the parent: -- Works as expected. At 100% height
#content_left {
vertical-align:top;
padding:0;
margin:0;
min-width:195px;
color:#fff;
height:100%;
}
This is the inner div: doesnt work
.sidebarmenu {
position:relative;
bottom:0;
height:100%;
border:1px solid red;
}
I think you would need to use absolute positioning and specify bottom: 0:
#content {
position: absolute;
bottom: 0;
}
I'd suggest trying:
#content {position:relative;bottom:0;}
Discussing layout issues in text can be tricky, but note that you’ve said you want a <div> aligned to the bottom, but you’ve not said to the bottom of what.
I think you mean the bottom of the browser window. Unfortunately, you can’t really do this in CSS: the root element is always as tall as its content requires, and not as tall as the browser window (if I remember correctly).