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.
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;
}
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
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...
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */
I've have tried this:
body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;}
and this:
{ margin:0; padding:0; }
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
Neither of these have worked. It seems like the position I am wanting is working, but the problem is there a giant margin pushing my content down. Am I on the right track with this? Or is this not the fix I should be trying?
IE6 simply does not support position fixed. It's been a hassle many web developers have had to live with. I've used two alternatives:
Put the scrollable portion of my content in a separate 100% width/height DIV with overflow: scroll. Then overlay my non-scrollable "fixed" element in a separate div with a greater z-index.
Do what Yelp does with the map on the sidebar and reposition the element with Javascript every time the user scrolls.