Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.
I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="style" href="style.css" type="text/css" />
</head>
<body style="margin: 0px; background: #3b0404;">
<div align="center">
<div id="top" style="height: 100px; background: yellow; width: 100%;max-height: 100px; ">
<div style="overflow: visible; width: 800px; height: 100px; max-height: 100px; background: aquamarine;">
<div id="logo" style="float: left; margin-left: -3px; width: 203px; height: 201px; background: pink; overflow: visible;"></div>
<div id="menu" style="float: right; width: 595px; height: 100px; background: blue;"></div>
</div>
</div>
<div id="content" style="width: 800px; margin-left: auto; margin-right: auto;">
<div style="background: purple; height: 215px;"></div>
<div style="background: green; height: 350px;"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
I need the pink div to overlap the purple one while maintaining dimensions, however MSIE8 keeps expanding the containing divs so it pushes everything down instead of the desired behaviour.
I hope my question is clear, I dont know if Im doing something wrong and should take a different approach.
Thanks for your help!!
It was the transitional DOCTYPE .. it looked fine on JSFiddle cause it added the strict dtd.
Thanks to everyone for your time.
Related
I want to hide a div outside the screen but the screen size changes when I try.
For example:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
When I tried this code
I don't want the slider to appear.
Using css overflow: hidden property in the body tag, you can get rid from that slider easily. I have attached the code below, run explore. However you can explore more about overflow property. Read the article I have linked below to explore clearly.
W3 School - css overflow
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
short question: how does one center a responsive set of dynamic height div blocks on a page. see simplified code below:
long: i have a set of data that goes into each block. tables, graphs, etc. the data is all mysql driven and dynamically changes all day long so the height of these blocks is not determined and is dynamic. I want the blocks to auto position themselves as they do in the example code. basic responsive page layout. example: the pink table could be 50px or 5000px. the float left is critical so that multiple block stack to the right as needed.
the challenge is for the blocks to be in the center of the page. i can not seem to be able to figure that one out.
i have tried and research everything. Flex does not seem to support this concept.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.statusC, .statusC2 {
float: left;
}
</style>
</head>
<body>
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</body>
</html>
make a wrapper around the blocks and give it a width:
<div class="wrapper">
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
and the CSS:
.wrapper {
margin: 0 auto;
position :relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
the float of the blocks is granted.
https://jsfiddle.net/Marouen/0s2pwz5t/
i found a TOTAL HACK that shows what i am trying to produce but not in a elegant way at all. i hope there is a better solution. there must be a solution that does not require setting the width...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
.statusContainer2 {
display: flex;
justify-content: center;
}
.statusContainer3 {
}
#media screen and (max-width: 1999px) { .statusContainer3 { width:1500px; } }
#media screen and (max-width: 1499px) { .statusContainer3 { width:1000px; } }
#media screen and (max-width: 999px) { .statusContainer3 { width:500px; } }
.statusC {
float: left;
}
</style>
</head>
<body>
<div class="statusContainer2" >
<div class="statusContainer3" >
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
</div>
</body>
</html>
example
Ι'm trying to align two separate backgrounds in one html page, lets say the first part (in which it will be added a flexslider) and the remaining main-page. How can I exactly align these two backgrounds horizontally? Can you provide me an example? My code doesn't work well.
<style type="text/css">
#one {
background-image: url("http://www.fnordware.com/superpng/pnggrad8rgb.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
#two {
background-image: url("http://www.bit-101.com/blog/wp-content/uploads/2009/05/background.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
</style>
<div id="one"></div>
<div id="two"></div>
Demo
Thanks in advance
How about this?
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<div style="background-image: url(img/3.png);
width:1250px; height:1366px;">
</div>
<div style="background-image: url(img/two.png); width:1250px;
height:1366px;">
</div>
</body>
</html>
I've searched for several hours and tried out everything I found, but nothing helped, so here goes. I'm trying to set up a website that has a left column and right column both of width 200 pixels, while having the middle column taking up the remaining space. I noticed that margin-right is completely ignored. I tested out overflow, but that didn't seem to work either. Granted, I might have done the overflow bit wrong. Anyways, here's my test site, relevant CSS, and the HTML.
The current background for the middle column just doesn't do well with scaling, so I'll probably swap it for something else.
Site: http://mnslayer27.webs.com/bgtest.html
HTML:
<!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>
<title>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
<div id="left">
<div id="right">
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
</div>
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
CSS:
#left {
//overflow:hidden;
margin-left: 200px;
}
#right {
margin-right:200px;
}
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
#column2 {
position: absolute;
top: 120px;
//left: 200px;
overflow:hidden;
color: #000000;
float:left;
width: 100%;
height: 1688px;
//margin-left: 200px;
//margin-right: 200px;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}
You can try using absolute position and specify the left and right for the divs instead of using width.
#left {
position: absolute;
left: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#right
{
position: absolute;
right: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#centre
{
position: absolute;
left: 100px;
right: 100px;
height: 100%;
overflow:hidden;
background-color: #a0a0d0;
border: solid 2px black;
margin: 4px;
padding: 4px;
}
This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.
Heres a simple JSFiddle
hope that helps
Look at my answer here that helped someone with just about the same exact issue. There's a JSFiddle included
Not positive based on your question exactly what you want the final product to look like but based on your three column approach and trying to get your margins to work properly try floating all three of your columns, like so
<!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>
<title>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style>
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.column1
{
float: left;
width: 200px;
margin: 0 100px 0 100px;
}
#column2 {
color: #000000;
float:left;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
}
#column3
{
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class="column1">
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
</div>
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0"alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
If you set your div to be display: inline-block; instead of display: block;, it may solve the issue you're having. Be aware that this may have other consequences in your code though. I'd be way of using a solution that involves position: absolute; as well though, because this can get messy when you have other elements interacting with it/each other.
I'm sure there was a method involving box-sizing: border-box; but I can't seem to work it out right now.
The code below works properly in all browsers but IE.
The overflow doesn't work. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#scroll {
width: 500px;
height: 250px;
overflow: auto;
}
.box {
position: relative;
height: 100px;
}
</style>
</head>
<body>
<div id='scroll'>
<div class='box' style="background-color: red;"></div>
<div class='box' style="background-color: black;"></div>
<div class='box' style="background-color: yellow;"></div>
<div class='box' style="background-color: blue;"></div>
<div class='box' style="background-color: green;"></div>
</div>
</body>
</html>
Is this what you are looking for? http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
If you remove the "position:relative;" from the .box CSS definition, I believe it'll work in FF and IE 6.0.
Edit: I've tested it - and it works in FF 3.6.8 and I.E. 6.0.28 (i.e. keeps the 100px boxes within the scroll div).