Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Feb 2007
    Posts
    218
    Thanks
    25
    Thanked 1 Time in 1 Post

    some positioning problems

    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>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 11-01-2007 at 01:37 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • The Following 2 Users Say Thank You to effpeetee For This Useful Post:

    jcdevelopment (11-01-2007), JustBlaze (11-02-2007)

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Posts
    218
    Thanks
    25
    Thanked 1 Time in 1 Post
    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?

  • Users who have thanked docock for this post:

    jcdevelopment (11-01-2007)

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by effpeetee View Post
    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.

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Posts
    218
    Thanks
    25
    Thanked 1 Time in 1 Post
    anyone?

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    84
    Thanks
    0
    Thanked 8 Times in 8 Posts
    * <- That guy right there.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    53
    Thanks
    11
    Thanked 2 Times in 2 Posts
    Thank you so much effpeetee
    for posting that link

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Posts
    218
    Thanks
    25
    Thanked 1 Time in 1 Post
    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

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I did this in my WYSIWYG editor.

    Is this what you wanted?

    Frank

    Code:
    <!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>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the same but with the Frameset Doctype.

    Frank

    Code:
    <!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>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/000.html

    check it here

    It works in IE7, Firefox2 and the latest Opera.

    Frank
    Last edited by effpeetee; 11-02-2007 at 12:12 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    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.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 11-02-2007 at 12:58 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    New Coder
    Join Date
    Oct 2007
    Posts
    84
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    toddandrae

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •