My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.
Related
I have two divs in my html page and I want them to appear one after the other. Here is the structure of my html page:
<html>
<body>
<div id="navigationBar"></div>
<div id="afterNav"></div>
</body>
</html>
The first div is a navigation bar, so I set its position to fixed. I am expecting the second div to appear below navigation bar, but it appears the above the navigation bar when the page is loaded. The afterNav div starts at the top left corner of the body/html. I tried playing around with the position property, but was not very successful. How do I get the second div appear after the first? Below is my css:
html, body{
height:100%;
width:100%;
margin:0px;
margin:0;
font-family: "Helvetica" , "Arial", sans-serif;
font-size: 1rem;
color: #212529;
}
#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#afterNav{
position:relative;
z-index:-1;
}
If you set the first div (navigationBar) to fixed then you need to make padding top to set the outer div position.
If your navigation height is 70px then you need to set outer div padding-top 70px.
#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#after-nav{
position:relative;
z-index:-1;
padding-top: 70px;
}
you can use margin-top also.
You need to move it below the fixed-navigation:
#navigationBar{
z-index:1;
}
#after-nav{
margin-top:70px
z-index:0;
}
When you have a position:fixed; element, that element will be on top of anything below it, with a lower z-index.
I would also change z-indexes so you don't have a -1.
I have issues with a div that has to stay 100% of window height. Once I place another div inside of it that exceeds screen size, parent div doesn't stretch after its child. Here is my code:
<html>
<body>
<div class="mainframe">
<div class="screencontainer">
<div class="mainscreen"></div>
</div>
</div>
</body>
</html>
And here is css:
html,body {
background:white;
height:100%;
margin: 0px 0px;
background-attachment: fixed;
}
.mainframe{
background:green;
width:100%;
position:absolute;
display:block;
margin:0 auto;
height:100%;
overflow:none;
}
.screencontainer{
background:red;
position:relative;
display:block;
overflow:none;
width:60%;
left:250px;
}
.mainscreen{
position:absolute;
width:100%;
height:1000px;
top:100px;
left:0px;
background: radial-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.5));
}
So .mainframe is 100% of window size only if I remove .screencontainer with all its content. But once I have it, because its child .mainscreen has 1000px height, mainframe breaks in the middle of a page.
Here is jsfiddle:
https://jsfiddle.net/u4oL7t80/
Change the overflow setting of the .mainframe from none (which is an illegitimate value) to scroll.
jsFiddle Demo
That way the container itself (.mainframe) will not stretch, but have its own scrollbar.
You can also set overflow-y instead, to allow only a vertical scrollbar.
I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.
Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.
I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.
Any ideas?
Code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height:100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
If you wish the list should scroll down in case of more entries.
Just write down :
ul{
overflow:scroll;
height: 200px;
}
for your UL(Unordered list)
Please feel free to ask again we are not on same page..
Thanks
you have fixed the html and body position.
instead fix the position of header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You'll need to adjust the top and bottom properties to taste:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}
scroll is missing because you have a fixed panel, which will prevent the div from scrolling
you need to fix header, not list
.header{
position:fixed;
width:100%;
top:0;
}
demo
final edit (updated fiddle on Suresh Ponnukalai answer)
I've trying to make a test website, but there is a problem.
Here's is a picture, which show you, what's the problem:
The years (2010,2011,2012) are folders, and the '2013' folder contain some pictures. There's a php function, which I can read the folders and the picture names.
The DOM structure:
Főoldal
Elérhetőség
Önkéntes munka
Képtár
Főoldal
<div id="bottom">
bhvdksakd
</div>
The CSS:
#main{
max-width:22cm;
min-width:16cm;
background-color:#fff;
margin:0px auto 20px auto;
border-radius:10px;
padding: 10px 10px 10px 10px;
min-height:100%;
position:relative;
height:auto;
}
#left{
display:block;
width:20%;
min-height:100%;
position:absolute;
margin:0px;
top:0px;
left:0px;
border-right:1px solid rgba(192,192,192,0.5);
}
#right{
display:block;
min-height:100%;
height:auto;
width:80%;
text-align:justify;
position:absolute;
top:0px;
left:20%;
padding:20px;
}
#bottom{
max-width:22cm;
background-color:#fff;
margin:0px auto 0px auto;
border-radius:10px;
}
Is there any css method or anything, that the contain isn't outside of the "right" div?
Thanks!
ps: Sorry for my sentences, but I'm from Hungary :/
Add overflow: auto; to your CSS for the div with overflowing content.
This property will automatically add a scroll bar only on necessary axes to help contain content within the boundaries of the div. So if you have too much vertical content, you get a vertical (y) scrollbar. If you have too much horizontal content, you get a horizontal (x) scrollbar.
OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.