centrare iframe con div

ans66 · 19 Nov 2015

Non riesco a centrare iframe dentro a div, in un sito responsive, sia @media min-width 0px che @media min-width 400px. Sembra funzionare unicamente a schermo inferiore di 400px. Ho utilizzato @media screen and (min-width: 0px o 400px) perchè sembra l'unico funzionante.

HTML:

<div id="container">
<iframe id="slider"  width="100%" height="100" src="./slider/slider.php" scrolling="no" frameborder="0" onload="calcHeight(this);"> </iframe>
</div>

Codice:

@media screen and (min-width: 0px) {

body

div#container  { 
                  position: absolute;
                  top: 50%;
                  left:10%; 
                  width: 80%
                  
               }

div#page-wrap  { position: absolute; top: 500px ; left:10%; width: 80%   }

                                        }
                                   
                                   
                                   }



@media screen and (min-width: 400px) {

div#container  { 
                  position: absolute;
                  top: 50%;
                  left: 40%;
                  -ms-transform: translate(-50%, -50%); /* IE 9 */
                 -webkit-transform: translate(-50%, -50%); /* Safari iOS */
                  transform: translate(-50%, -50%); /* Rest of browsers */
                  width: 400px; height: 218
        
                  }
div#page-wrap  { position: absolute; top: 500px ; left:40%; width: 60%   }

                                      }

div#slider  { width: 400px; height: 218 }

Grazie per l'aiuto

ans66 · 19 Nov 2015

non sono riuscito a trovare una soluzione che funzioni. Penso che sia giusto postare i file php e css interamente:

Codice:

@media screen and (min-width: 0px) {

div#container  { 
                  position: relative;
                  top: 50px;
                  left:10%; 
                  width: 80%
                  
               }

div#page-wrap  { position: relative; top: 50px ; left:0%; width: 100%   }

                
                                        }
                                   
                                   
                                   



@media screen and (min-width: 400px) {

div#container  { 
                  left: 10%;
                  position: relative;
                  top: 50px;
                  width: 80%;
               }

#slider  { width: 400px;  height: auto; margin: auto;   }
div#page-wrap  { position: relative; top: 50px ; left: 0%; width: 80%;  }
        
                  
                  
                                      }

index.php

PHP:

               if ($lng==='it') {   
 include "indexhome.php"; 
                                } else{   
 include "indexhomeeng.php"; 
                                      }

echo '<div id="container">';                                      

                                      if ($lng==='it') {
echo'<div id="linkpage">| <a href="http://www.cebora.it/home_welding.html">Divisione Saldatura e Taglio</a>
| <a href="index.php?tit=HOME&lng=en">English version </a> | </div><br><br>'; }else {
echo'<div id="linkpage">| <a href="http://www.cebora.it/home_welding.html">Welding Division and Plasma Cutting</a>
| <a href="index.php?tit=HOME&lng=it">Versione italiana </a> | </div><br><br>'; }
              


if ($tit==='HOME' OR $tit==='NEWS') { include "HomeandNews.php";  }
if ($tit==='AZIENDA' OR $tit==='COMPANY') { include "HomeAz.php";  }
if ($tit==='CERTIFICAZIONI' OR $tit==='CERTIFICATION') { include "HomeCert.php";  }
if ($tit==='CONTATTI' OR $tit==='CONTACTS') { include "HomeCont.php";  }
if ($tit==='CERCA RUOTA' OR $tit==='LOOK FOR THE RIGHT CASTER') { include "HomeCR.php";  }
if ($tit==='Ruote Industriali' OR $tit==='Industrial Castors') { include "HomeRI.php";  }
if ($tit==='Ruote Collettivit'.chr(224) OR $tit==='Institutional Castors') { include "HomeRC.php";  }
if ($tit==='Ruote Con Supporti inox' OR $tit==='Stainless Steel Castors') { include "HomeRSS.php";  } 
if ($tit==='Supporti Industriali' OR $tit==='Housing for Industrial Applications') { include "HomeSup.php";  }  
if ($tit==='Supporti Collettivit'.Chr(224) OR $tit==='Housing for Institutional Applications') { include "HomeSupCol.php";  } 
if ($tit==='Documentazione Cataloghi' OR $tit==='Catalogues') { include "HomeCat.php";  } 
if ($tit==='Guida Impiego' OR $tit==='Instruction for Use') { include "HomeInstr.php";  } 
            
echo '

<iframe src="footer.html" width="100%" frameborder="0" scrolling="no" height="90">
</iframe>'; ?>

PHP:

if ($lng==='it') {   
 echo '<div id="tit">Siete nella pagina <strong>'.$tit.'</strong></div>
 
<br><br>';

if ($tit==='HOME') {
//include './video/videohome.php';
echo '
<div id="container">
<iframe id="slider"  width="100%" height="100" src="./slider/slider.php" scrolling="no" frameborder="0" onload="calcHeight(this);"> 
</iframe>
</div>
<div id="page-wrap">'; }

$newsInHome = 
array(
$fl0_1='./inpaghome/sessanta_1.php',
$fl1_1='./inpaghome/tb58.php',
$fl0_2='./inpaghome/tbd_2.php',
$fl2_2='./inpaghome/allcatsup_1.php',
$fl3_2='./inpaghome/list_2.php',
$fl4_2='./inpaghome/supcollet_2.php',
$fl1_2='./inpaghome/150ll_1.php',
$fl2_1='./inpaghome/catmonol_1.php',
$fl5_2='./inpaghome/dy_2.php',
$fl3_1='./inpaghome/ay_2.php',
$fl6_2='./inpaghome/pneum_2.php',
$fl4_1='./inpaghome/nat_1.php',
$fl7_2='./inpaghome/pnlrsoft_2.php',
$fl5_1='./inpaghome/supusa_1.php',
$fl6_1='./inpaghome/heavy_1.php',
$fl8_2='./inpaghome/forcella_2.php',
$fl9_2='./inpaghome/mob_2.php',
$fl10_2='./inpaghome/kr_2.php',
$fl7_1='./inpaghome/iso_1.php'
     );
$newsInHome =array_map('strtolower',$newsInHome);
$quantenews = count($newsInHome);

for($i=0;$i<$quantenews;$i++)
{
echo '
<iframe id="the_iframe" width="100%" height="100" src="'.$newsInHome[$i].'"; scrolling="no" frameborder="0" onload="calcHeight(this);" > </iframe><br>
'; 
}
                  } else{   
 echo '<div id="tit">You are in <strong>'.$tit.'</strong>  page<br><br></div>';
    
if ($tit==='HOME') {
//include './video/videohome.php';
echo '
<div id="container">
<iframe id="slider"  width="100%" height="100" src="./slider/slideruk.php" scrolling="no" frameborder="0" onload="calcHeight(this);"> 
</iframe>
</div>
<div id="page-wrap">';} 

$newsInHomeEng = 
array
( 
$fl0_1='./inpaghome/sessanta_uk_1.php',
$fl0_2='./inpaghome/tb58_uk.php',
$fl1_2='./inpaghome/tbd_uk_2.php',
$fl2_2='./inpaghome/allcatsup_uk_1.php',
$fl3_2='./inpaghome/supcollet_uk_2.php',
$fl1_1='./inpaghome/150ll_uk_1.php',
$fl2_1='./inpaghome/catmonol_uk_1.php',
$fl4_2='./inpaghome/dy_uk_2.php',
$fl3_1='./inpaghome/ay_uk_2.php',
$fl5_2='./inpaghome/pneum_uk_2.php',       
$fl4_1='./inpaghome/nat_uk_1.php',
$fl6_2='./inpaghome/pnlrsoft_uk_2.php',
$fl5_1='./inpaghome/supusa_uk_1.php',
$fl7_2='./inpaghome/conv_uk_2.php',
$fl6_1='./inpaghome/heavy_uk_1.php',
$fl10_2='./inpaghome/forcella_uk_2.php',
$fl9_2='./inpaghome/mob_uk_2.php',
$fl8_2='./inpaghome/kr_uk_2.php',
$fl7_1='./inpaghome/iso_uk_1.php'
);

$newsInHomeEng =array_map('strtolower',$newsInHomeEng);
$quantenewsEng = count($newsInHomeEng);

for($i=0;$i<$quantenewsEng;$i++)
{
echo '
<iframe id="the_iframe" width="100%" height="100;" src="'.$newsInHomeEng[$i].'"; scrolling="no" frameborder="0" onload="calcHeight(this);" > </iframe><br> 
</div>';
}


                          }

ans66 · 20 Nov 2015

ho trovato una soluzione. Ho chiuso il DIV container prima del frame per poi riaprirlo successivamente. Ho creato un nuovo div "fram" attorno all'iframe slider.

Poi le seguenti istruzioni CSS hanno sortito l'effetto sperato:

Codice:

#frm   {  position: relative; top: 0px; width: 400px; margin: auto;   }

visto che iframe slider non era più all'interno del DIV container

centrare iframe con div

ans66

Utente Attivo

ans66

Utente Attivo

ans66

Utente Attivo

Discussioni simili

centrare iframe con div

ans66

Utente Attivo

ans66

Utente Attivo

ans66

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency