2 things (and I'm sure they're related)
I would like my lightbox-style absolute div (.g) to be the height of the page not the window (click on the link in the html to display it)
I would like my img in the absolute div (.g img) to respond to the window height.
Is this possible? I've tried a number of things having searched extensively but my rudimentary knowledge of html and css is failing me. e.g. if I use min-height:100% on html then my div.g is the height of the page but the main content div (#d) doesn't stick to the bottom of the window.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="d">
<div id="c">
<p style="margin-bottom:450px">click for images</p>
<p>end text</p>
</div>
<div id="f">footer</div>
</div>
<div class="g" id="a1">
<div>
<img src="http://www.JBM-Computing.net/test/img1.png">
<p>click img, or here to close</p>
</div>
</div>
<div class="g" id="a2">
<div>
<img src="http://www.JBM-Computing.net/test/img2.png">
<p>click here to close, or click img</p>
</div>
</div>
</body>
</html>
CSS
* {margin:0;
padding:0
}
html {height:100%
}
body {height:100%;
font-family:Arial;
background:lightSteelBlue
}
#d {position:relative;
top:2%;
right:0;
bottom:2%;
left:0;
margin:0 auto;
width:80%;
max-width:840px;
min-height:96%;
background:white;
border:solid 1px green
}
#c {position:relative;
margin:4% auto 40px;
max-width:80%;
padding:5px;
border:solid 1px red
}
#f {position:absolute;
right:10%;
bottom:0;
left:10%;
max-width:80%;
padding:5px;
background:lightGrey
}
.g {position:absolute;
top:0;
right:100%;
bottom:100%;
left:0;
z-index:4;
overflow:hidden;
background:RGBA(0,0,0,.7)
}
.g:target {bottom:0;
right:0;
overflow:visible
}
.g a.x {position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:5
}
.g div {position:relative;
z-index:6;
margin:8% 8% 0;
background:powderBlue;
border:10px solid darkKhaki
}
.g img {display:block;
max-width:100%;
margin:auto;
border:solid 1px blue
}
.g p {padding:5px
}
I've also posted it on jsFiddle here. Resize the window and watch the page react.
It behaves acceptably at the moment but it's not perfect.
Any help greatly appreciated.
Edit: why does .g:target {bottom:0} not make the div fill the whole height of the body?? It should shouldn't it?
If I understand your question correctly, the problem is .g div - margin:8% 8% 0; which prevents the pop-up from displaying in full page size.
.g div {position:relative;
z-index:6;
height: 100%; <=== Full page size
box-sizing: border-box; <=== Prevent vertical scroll bar
/* margin:8% 8% 0; */ <=== Problem, so comment out
background:powderBlue;
border:10px solid darkKhaki
}
jsfiddle.net/W8kxm/
Related
I have an a-element with z-index -2 and a div-element with z-index -1. I expect the div-element to be on top because it has a higher z-index. In Chrome this is not the case.
Is this a bug in Google Chrome?
Edit: Please don't send suggestions on how to fix it. I want to know why it is looking different.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
Screenshot
To be honest im not sure why this is happening, but if you use positive values everything works as expected.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:1;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:2;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
The problem is with the fixed position element which has more priority than other element refer Stacking Contexts for more info
Here is the jsfiddle link with different approach to solve the problem
#bar
{
position:sticky;
top:0;
right:0;
left:0;
display: inline-block;
width: 100vw;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin: 0px auto;
}
I am not a web designer.. I'm just a asp.net programmer and I'm having a hard time with IE7.
Well I managed to work what i want in IE8, IE9, and Chrome.
Now I have to make it work it in IE7.
First this is my source
I am using DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
and html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"
<style type="text/css">
html {
height: 100%
}
body {
background-color: #5c87b2;
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
border: 0;
overflow: visible;
height: 100%;
max-height: 100%;
}
</style>
<div id="header" style="
display:block;
position:fixed;
height:50px; width:100%;
background-color:red;">
d
</div>
<div id="menu" style="
display:block;
position:fixed;
width:200px;
top:50px; left:0; right:auto; bottom:0;
background-color:blue;">
d
</div>
<div id="button" style="
display:block;
position:fixed;
width:auto; height:100px;
top:50px; left:200px; right:0; bottom:auto;
background-color:Yellow;">
d
</div>
<div id="content" style="
display:block;
position:fixed;
width:auto; height:auto;
top:150px; left:200px; right:0; bottom:0;
background-color:green;">
<div style="
position:relative;
height:50%;
min-height:50%;
border:3px solid pink;
">12412
</div>
<div style="
position:relative;
height:50%;
border:3px solid white;
">
2214124
</div>
</div>
so I have a header(red), menu on the left side(blue), sub-header(yellow), container(green)
and i need two divs in the container(pink, white border).
they need to fill up the container 100% vertically.
All the outside divs' positions are fixed.
And I gave the inner two divs' position relative and gave 50% height to both.
It works fine in IE8,9, Chrome.
I will not use script. Only trying to use css styles.
So can u guys please give me some help??
Thank U!!!!!
Setting a height on the outer #content div allows the inner divs to display as in the other browsers. As you are looking for a full-screen panel set-up, I'm not sure how you could achieve this with pixel values. Changing from px to % and specifying positioning and width / heights as fluid seems to achieve the desired effect in IE7.
http://jsfiddle.net/VCztH/3/
I have and I want that div has the same dimensions as the width of the browser less 30px in height and width to give an idea to have a white border. Whenever these divs resize the browser will adjust accordingly.
I did not use the border: 15px solid white because it will create scroll-bars and I do not want
I tried this but it creates also an scroll-bars.
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
top:15px;
left:13px;
}
Any Ideas??
Why not get rid of the #background-wrapper element and then do this instead?
#main-wrapper {
position: absolute;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
An example can be found here.
You could try some padding on your inner div
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/
}
Try this:
body {
background-color: #fff;
}
#main-wrapper {
margin: 30px;
}
No need for background-wrapper.
Basically this is my issue, I have a container with 4 divs inside, in firefox it works just fine and also in IE8 but ..it shows the compatibility view all the time, if I click on it, it moves the 4 divs out of the container, making the site looks terrible.
btw, the 4 divs are just behind the menu but on another "content" div. (I need it that way...)
This is my code.
<style type="text/css">
body{
margin-top:2px;
}
#main_frame{
width:1024px;
height:550px;
position:relative;
margin:0 auto;
padding:0px;
float:center;
text-align:center;
background:black;
}
#logo{
width:275px;
height:75px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
position:relative;
margin:0 auto;
padding:0px;
float:left;
}
#top_center{
width:474px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:green;
float:left;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#top_right{
width:275px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:red;
float:left;
}
#main_menu{
width:1024px;
height:25px;
float:none;
position:relative;
float:left;
margin:0 auto;
padding:0px;
background-color: #FF0;
}
#content_frame{
height:400px;
width:1024px;
position:relative;
float:left;
margin:0 auto;
padding:0px;
}
/* HERE THEY ARE */
#tag1{
height:375px;
width:256px;
position: absolute;
float:left;
margin:0 auto;
padding:0px;
background-color:#900;
}
#tag2{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:256px;
padding:0px;
background-color: #930;
}
#tag3{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:512px;
padding:0px;
background-color: #960;
}
#tag4{
height:375px;
width:256px;
display: inherit;
position:absolute;
float:left;
margin-left:768px;
padding:0px;
background-color:#990;
}
</style>
... some code removed...
<body>
<div id="main_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
Any help on this is greatly appreciated.
Thanks guys,
Marco,
A link to a live page is almost required to tell you how to definitively fix this.
At the moment, it's too much work to try and recreate the problem (too many unknown variables).
Does your page have a doctype?
When I see this:
but ..it shows the compatibility view
all the time
It suggests that your page is being coerced into IE7 mode.
The usual cause is having this line in your page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The probable correct thing to do is remove this line, and fix your site to work in IE8.
Another thing you didn't specify is how well this works in other browsers such as Firefox, Chrome - and whether you care about this.
If this answer doesn't help you enough, post a link to your live page.
To fix your problem, follow these steps:
Move <div id="tag1"></div>, <div id="tag2"></div>, <div id="tag3"></div>, <div id="tag4"></div> to inside <div id="content_frame"></div>, like this:
<div id="main_frame">
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
</div>
</div>
Then, from those four tag divs, remove the margin and position: absolute rules.
I've tested that this fixes it to work in IE7, IE8, Firefox.
As an aside, after my fix I don't think any of your elements requires the position: relative rule any longer.
Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here
Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?
Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?
Original Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
Solved: solution is eliminate the spacing in the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.
Remove the spaces so that the markup is all on the same line.
If you don't ever want any text to appear in these divs then you can do this
div{font-size:0;}
I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset
in all your inner div classes use margin-left: 0px
.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}
.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
I have posted the final html at http://jsbin.com/uwavi3
I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.
Edit2 for float: left kinda layout
Sorry for misunderstanding the question.
Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3
This is causing a margin on the left and right of every element (that is not display:inline):
* { margin:0 auto; }
You probably want this as your "reset" rule.
* { margin:0; }
You can then apply margin:0 auto to things that you want centered.