PDA

View Full Version : Background tricks 2


Zimmermann
June 10th, 2005, 12:12 PM
Okay.. I made a thread a couple of days ago: http://www.kirupa.com/forum/showthread.php?t=99012

But I couldn't make it work, so I asked one of my friends. He helped me making this: http://www.hathathat.dk/hattemager/test2/

The code for it:


<style type="text/css">
#box1{
position:absolute;
left:0px;
background-color:#FFFFFF;
width:50%;
height:100%; //this is what IE doesn't understand
z-index:2;}
#box2{
position:absolute;
color:#FFFFFF;
left:50%;
background-color:#00FF33;
width:4px;
height:100%; //this is what IE doesn't understand
z-index:3;}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>


Problem is that it works perfectly fine in FF, but not in IE. In IE the "boxes" height = about 15px, but they should be 100%.

Any help is appreciated! :thumb:
ditt0
June 10th, 2005, 02:14 PM
Do you really need the second box? Or is it just for background? If you don't need it:

in the css:


html, body{
height:100%;}
body{
margin:0;
background:#000;}
#box{
width:50%;
height:100%;
background:#fff;
border-right:3px solid #00ff00;}

and in the html

< div id="box"></div >
Zimmermann
June 10th, 2005, 05:16 PM
Yup - I do need both boxes.

Maybe there's another way to do this? Hmm..
ditt0
June 10th, 2005, 06:05 PM
CSS

html, body{
height:100%;}
body{
margin:0;
background:#000;}
#box{
width:50%;
height:100%;
float:left;
background:#fff;
border-right:3px solid #00FF00;}
#box2{
width:49%;
height:100%;
float:left;
background:#000;}

and html


<div id="box"></div>
<div id="box2"></div>
Kristopher
June 11th, 2005, 11:04 AM
Ditto is always so helpful :)

Yep, Zimmerman, the trick is to tell the HTML and BODY tags in your CSS to be 100%. After you do that, then IE will understand.
Zimmermann
June 12th, 2005, 08:46 PM
I bow to your massive knowledge.

But I have another question: How can I place my .swf in the middle of the page? So it's always in the middle horizontal and vertical (vertical is not important). You can also look at my pretty example to see how I'd like it to be :)
mikkomikko
June 13th, 2005, 05:00 AM
One way is to use negative margins.
The simplest solution i came up


<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
border: 0;
}
html {
background-color: #FFFFFF;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 50%;
background-color: #aaa;
border-right: solid 8px #000000;
}
#flash {
position: absolute;
left: 50%;
top: 50%;
margin: -54px 0 0 -104px;
width: 200px;
height: 100px;
text-align: center;
background-color: #FFFFFF;
border: solid 8px #000000;
}
-->
</style>

</head>

<body>
<div id="flash">
FLASH
</div>
</body>
Zimmermann
June 13th, 2005, 08:29 AM
Exactly what I was looking for. Thanks :thumb: