I'm trying to create in HTML5 a view made of div's that displays in the center of the page while the background is grayed out. Something like the Silverlight child window. I am having a horrible time trying to get this to work.
You can easily do it with some basic css like so. This is just the css part not javascript to animate it or toggle. But it should be enough to get you started.
CSS
.div {
position:absolute;
top:300px;
width:300px;
height:260px;
left:50%;
z-index:1000;
margin-left: -150px; /* negative half the width of the div */
}
.background {
background:#000;
opacity:0.5;
position:fixed:
width:100%;
height:100%;
z-index:999;
}
HTML
<div class="div">
My Content
</div>
<div class="background "></div>
this is to make the page centered with 900px width, you add this to your div element:
width:900px;margin-right:auto;margin-left:auto;
for the background, you need to add the following style to you body element
color:gray;padding:0px;margin:0px;
you have to include a width in order to center an element. margin-right:auto; margin-left:auto; will not work if you did not include a width!
Related
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
I need to get the fixed margin to the right and left side using a wrapper inside an absolute div (it should work with relative, but I'm limited). Here is the graphics of the desired result using different screen resolutions:
what I am currently getting to work is the left "50px width" margin, but the right "5px width" seems like it's not working.
I've heard that for some things javascript can be helpful, yet I could not find implementations of this kind.
CSS:
.main_wrap{
width:100%
position:absolute;
}
.div_contener {
position:absolute;
height:400px;
border:1px solid blue;
left:50px;
width:100%
margin-right:5px;
width:100%
}
.div_sub_wrapper {
position:absolute;
width:100%;
}
HTML:
<div class="main_wrap">
<div class="div_sub_wrapper">
<div class="div_contener">
<p>sample words</p>
</div>
</div>
</div>
Fiddle
The other thing is that if I use a fixed with size for the contener class, it should not get scrolling like it does now with this 100% width.
You can specify a left and a right css. If the width is auto it will fill the space:
.div_container {
left:50px;
right:5px;
width:auto;
}
http://jsfiddle.net/uxNzF/1/
I have a page news.html which is php included in my index.html - inside a #content div.
news.html has another div, which floats on the right and has a vertical line jpg to separate it from the main content, adds and stuff like that will be placed there.
Problem is I can't get it to 100% height(although it works for the line jpg) and I think the reason is some css issue. I also cannot place it below the footer for some reason, so that the 100% height line does not override it.
I use a main.css file for every page.
If I use position:fixed for the #poll div height 100% works, but then when zooming in/out of the browser my div moves which is not what I want. I know there is a min-width property but didn't seem to work for me.
Here is my code:
index.html:
//Content div is placed inside a #main table//
<div id="content"><?php include "news.html"?></div>
main.css:
html, body{
height:100%;
}
#main{
width:1010px;
height:100%;
z-index:2;
}
#content{
margin-top: 303px;
height:100%;
z-index:1;
}
#footer{
z-index:2;
}
#poll{
height:100%
background-color:rgba(255,0,0,0.6);
float:right;
z-index:1;
}
news.html
<div id="poll"><div style="background-image:url(images/vertical.jpg); width:5px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0; z-index:0;"></div>
<div>POLL CONTENT HERE</div>
</div>
If you use z-index then give to at least one position relative or absolute
Then it will work, like this:
{
z-index:2;
position:relative;
}
How to work Z-index Link here
z-index only works if you specify the position attribute for the element. So for each element for which you have given a z-index you need to specify the position to be either
position: relative;
or
position: absolute;
I'm trying to make a webpage with the following structure:
1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow.
these is the css code for them, mleft and mright are the shadows.
body,html{height:100%;}
.main {
width:900px;
height:100%;
}
.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }
.content {
width:850px;
float:left;
background-color:red;
}
And the html is like this:
<div class="main">
<div class="mleft"></div>
<div class="mcontent">
(content, some text and images)
</div>
<div class="mright"></div>
</div>
I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.
I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.
Any clean way of solving this that works on any browsers?
Should I use javascript?, redo everything another way?
Update:This is an image of how it looks
Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.
OK, I've deleted all the old stuff... found a solution using positioning :)
http://jsfiddle.net/Damien_at_SF/AtX4A/
Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)
UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)
HTML
<div class="main">
<div class="mcontent">
<div class="mleft"></div>
<div class="mright"></div>
(content, some text and images)>
<div style="clear:both;"></div>
</div>
</div>
CSS
body,html{
height:100%;
margin:0px;
padding:0px;
}
.main {
width:900px;
height:100%;
margin:auto;
}
.mleft, .mright {
width:25px;
height:100%;
}
.mleft {
background:green;
position:absolute;
top:0px;
left:0px;
}
.mright {
background:blue;
position:absolute;
top:0px;
right:0px;
}
.mcontent {
width:850px;
background-color:red;
position:relative;
padding-left:25px;
}
Hope that helps :)
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.