for some reason the wrapper on my code wont cover the whole screen and I can't figure out why, here is what the code looks like : http://goo.gl/4RtF5o
The wrapper (blue) won't go the top of the page, id prefer to not add CSS to body tag as I'm not sure on how animating a fade in on that will affect the rest of the content.
Your blue background "wrapper" is actually div.content (class="content") which goes after div#head and div#subhead - and those are of white background, and they push the div.content lower.
If you want everything blue, change classes for either body or both .head and .subhead
I added the following to your #wrap css:
width: 100%;
position: absolute;
top: 0;
Is that what you were looking for?
Add to .upani
.upani {
float: left;
width:100%;
}
Related
I'm SURE there is a stupid easy answer to this, but I'm just learning to code and I can't figure out what is going on here.
http://bit.ly/1zuki3W
The images adjust to the screen size, but the page doesn't let you scroll. But the background does move.
So, how do I freeze my background image (that may just be a bounce back in Apples OS?)?
And, how do I get the ability to scroll?
remove the position fixed attribute from the body css like
body {
background: url(pictures/Backgroundtest.jpg);
/* position: fixed; remove this attribute */
font: Palatino;
margin-left: 30px;
margin-right: 30px;
overflow: auto;
}
You should only remove the position:fixed from the body
Thanks!
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;
}
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
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 */
http://69.143.137.155/csa-consulting/index.php
I am trying to extend the grey menu bar and the blue background to fill the window (whatever the size) yet keep the content centered at a fixed size. Been working on getting this for a while and cannot seem to figure it out.
Thanks!
Use a background image on the <body>.
.body {
background:#F2F4EE url(menu-bar.jpg) TOP CENTER REPEAT-X;
}
Try adding the width style to your nav class. Like so
.nav
{
width: 100%;
}
Remove the following declarations from #container:
margin-left: auto;
margin-right: auto;
width: 1024px;
Add the following declaration to body:
margin: 0;