...

View Full Version : some positioning problems



docock
11-01-2007, 12:58 PM
Hi, I've got some problems with the code below..

it displays a fixed div with an iframe, and a normal div with some text in it. I've got some small problems with it though. I've given the headers div a red color, which results in a red horizontal bar accross the whole screen, however I've defined the headers div a width of 50% only... so why is the red bar covering the whole page?

And most irritating, I want the content of both divs to directly at the top..
Now only the words testing appear at the top, and the iframe seems to have a hard return above it.. how can I solve that?

Ps. I only use this css in IE ;)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>try this</title>


<style type="text/css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: medium;
overflow: hidden;
color: #000;
background-color: #fff;
}

html body{
positon: absolute;
overflow: auto;
margin: 0;
}

#headers *{
left: 48%;
position: absolute;
margin: 0;
padding: 0;
color: #000;
background-color: #ccc;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div >test
<div id="headers" style="background: red; ">
<iframe name="frame1" scrolling="auto" frameborder="0" src="http://www.cnn.com" style="z-index:1">
Sorry je browser ondersteunt geen iframe
</iframe>
<span id="goliath"></span><br>
</div>
</div>
</body>
</html>

effpeetee
11-01-2007, 01:29 PM
This will enable you to see IE7 and Firefox together and to edit the CSS.

http://litmusapp.com/labs

CSSVista

<body>

]<div >test
<div id="headers" style="background: red; ">
<iframe name="frame1" scrolling="auto" frameborder="0" src="http://www.cnn.com" style="z-index:1">
Sorry je browser ondersteunt geen iframe
</iframe>
<span id="goliath"></span><br>
</div>
</div>
</body>
</html>

and where is DIV Test

Frank

docock
11-01-2007, 01:52 PM
thanks for the link... test is just some text i typed in to see if it is placed correctly..the </div> tag is above the </body> tag.. any clue why there is a hard return above the iframe?

jcdevelopment
11-01-2007, 03:12 PM
This will enable you to see IE7 and Firefox together and to edit the CSS.

http://litmusapp.com/labs

CSSVista

<body>


and where is DIV Test

Frank


I like this link, this is good, thanks for the link.

docock
11-01-2007, 11:05 PM
anyone?

toddandrae
11-02-2007, 12:21 AM
* <- That guy right there. :)

JustBlaze
11-02-2007, 12:42 AM
Thank you so much effpeetee
for posting that link :D

docock
11-02-2007, 08:33 AM
geez guys, the link is ok i know, thank you for that

But I have a problem that needs to be fixed and i have been looking for hours for a solution.. I hope someone can help me, cause I've got a deadline..I need this at my work :S

effpeetee
11-02-2007, 10:50 AM
I did this in my WYSIWYG editor.

Is this what you wanted?

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>try this</title>


<style type="text/css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: medium;
overflow: hidden;
color: #000;
background-color: #fff;
}

html body{
positon: absolute;
overflow: auto;
margin: 0;
}

#headers *{
left: 48%;
position: absolute;
margin: 0;
padding: 0;
color: #000;
background-color: #ccc;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div >test
<div id="headers" style="BACKGROUND: red" >
<iframe name="frame1" frameborder="0" src="http://www.cnn.com" style="Z-INDEX: 1; LEFT: -2px; WIDTH: 100.25%; POSITION: absolute; TOP: 39px; HEIGHT: 100%">
Sorry je browser ondersteunt geen iframe
</iframe><br>
</div>
</div>
</body>
</html>

effpeetee
11-02-2007, 11:05 AM
This is the same but with the Frameset Doctype.

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>try this</title>


<style type="text/css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: medium;
overflow: hidden;
color: #000;
background-color: #fff;
}

html body{
positon: absolute;
overflow: auto;
margin: 0;
}

#headers *{
left: 48%;
position: absolute;
margin: 0;
padding: 0;
color: #000;
background-color: #ccc;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div >test
<div id="headers" style="BACKGROUND: red" >
<iframe name="frame1" frameborder="0" src="http://www.cnn.com" style="Z-INDEX: 1; LEFT: -2px; WIDTH: 100.25%; POSITION: absolute; TOP: 39px; HEIGHT: 100%">
Sorry je browser ondersteunt geen iframe
</iframe><br>
</div>
</div>
</body>
</html>

effpeetee
11-02-2007, 11:50 AM
http://www.exitfegs.co.uk/000.html

check it here

It works in IE7, Firefox2 and the latest Opera.

Frank

kosstr12
11-02-2007, 12:05 PM
Well the first problem is IE...so just delete It completely off every single person's computer and the world...and the problem will be fixed.

effpeetee
11-02-2007, 12:52 PM
html body{
positon: absolute;
overflow: auto;
margin: 0;
}
Position spelled wrong on your original code.
It doesn't put the matter right though.

See my other posts above for usable stuff.

Frank

toddandrae
11-02-2007, 02:25 PM
Like I said last night, your problem comes in from the use of "*" AND not declaring a top position for your absolutely positioned DIV. Also, why are you positioning the html and body elements? There is no need for that.

effpeetee
11-02-2007, 02:40 PM
toddandrae

I realised that my altered code was far from perfect, but he said he had a deadline and at least it works.

Frank

toddandrae
11-02-2007, 02:48 PM
I wasn't directing that at you. It was directed at the OP.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>try this</title>
<style type="text/css">
html, body{margin: 0;padding: 0;font-size: medium;overflow: hidden;color: #000;background-color: #fff;}
#headers{text-align: center; top: 0;left: 48%;position: absolute;margin: 0;padding: 0;color: #000;background-color: red;width: 50%;height: 100%;}
iframe{width: 95%; height: 100%;}
</style>
</head>
<body>
<div >test
<div id="headers">
<iframe name="frame1" scrolling="auto" frameborder="0" src="http://www.cnn.com" style="z-index:1">
Sorry je browser ondersteunt geen iframe
</iframe>
<span id="goliath"></span><br>
</div>
</div>
</body>
</html>

effpeetee
11-02-2007, 03:23 PM
I wasn't directing that at you. It was directed at the OP.

I understood that. No problem.

Frank

docock
11-05-2007, 10:19 AM
thanks toddandrae...nice coding, however the iframe scrolls along when I fill the body with: test<br> (x 100)
the iframe shouldn't scroll when the user scrolls down in the normal page

docock
11-06-2007, 11:16 PM
Hope someone can help me out with this.. :S



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum