1. #1

    Registered
    18/07/02
    Location
    Antwerpen
    Posts
    2,481
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    Reputation
    5/12

    iframe centreren

    Hello,

    Ben nu toch al wel een tijdje met iets aan het knoeien maar heb de indruk dat ik er bijna ben...
    Ik probeer een iframe volledig te centreren in een pagina.
    In het begin kreeg ik hem enkel horizontaal gecentreerd (ik heb echt niet zoveel verstand van websites bouwen) maar nu ik hem eindelijk verticaal gecentreerd heb weet ik niet meer hoe ik hem ook horizontaal kan centreren.

    het gaat over de volgende page: Upload Form

    en hier is mijn code:
    Code:
    <html>
    <head>
    <title>Upload Form</title>
    <style type="text/css">
    
    body, html {height: 100%;}
    #outer {height: 100%; overflow: hidden;}
    #outer[id] {display: table; position: static;}
    #middle {width: 100%; text-align: center;}
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
    #inner {width: 370px; margin-left: auto; margin-right: auto;}
    #inner[id] {position: static;}
    
    body
    {
    	background-image:url('background 9.png');
    	background-repeat:repeat;
    	background-position:inherit;
    }
    </style>
    
    </head>
    
    <body>
    <div id="outer">
      <div id="middle">
        <div id="inner">
          <iframe src='/contact/contactform.php' frameborder='0'
    width='370' height='360' allowtransparency='true'></iframe>
        </div>
      </div>
    </div>
    </body>
    </html>
    Wat ik ook niet begrijp is dat wanneer de pagina schermvullend is, er nog steeds rechts een scrolbalk te zien is...

    Merci voor de aandacht en hopelijk kan iemand mij helpen!
    no votes  

  2. #2

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Waarom zijn die inner, middle en outer divs nodig? Eentje is al meer dan voldoende voor wat jij wilt doen?

    HTML Code:
    <html>
    <head>
    <title>Upload Form</title>
    <style type="text/css">
    body, html {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    }
    
    body {
    	background-color: #f5f5f5;
    }
    
    iframe#form {
    	width: 370px;
    	height: 360px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -180px;
    	margin-left: -185px;
    }
    </style>
    
    </head>
    
    <body>
    <iframe id="form" src='contact.php' frameborder='0' allowtransparency='true'></iframe>
    </body>
    </html>
    Last edited by -BVR-; 12-12-2011 at 19:04.
    no votes  

  3. #3

    Registered
    18/07/02
    Location
    Antwerpen
    Posts
    2,481
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    Reputation
    5/12
    Had het via deze tutorial gedaan: Vertical Centering in CSS

    Het werk!

    Muchas grasias!

    *lock
    Last edited by eddie; 12-12-2011 at 20:41.
    no votes  

Posting Permissions

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

Log in

Log in