centrare iframe con div

ans66

Utente Attivo
27 Ago 2011
158
0
16
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

Utente Attivo
27 Ago 2011
158
0
16
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>';
}


                          }
 
Ultima modifica:

ans66

Utente Attivo
27 Ago 2011
158
0
16
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson Centrare box css HTML e CSS 2
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
F [HTML] Centrare testo rispetto l'immagine HTML e CSS 1
elpirata [HTML] Non riesco a centrare menu orizzontale HTML e CSS 5
L Problema per centrare titolo PopUp HTML e CSS 5
ecosito Google Maps: Centrare il marker ed editare il fumetto PHP 1
LuigiDonato Centrare Tabella HTML e CSS 10
N Centrare il testo verticalmente in una div. HTML e CSS 2
R Centrare un DIV per renderlo visibile su qualsiasi monitor HTML e CSS 12
F Centrare slider div HTML e CSS 1
asevenx problema per centrare sito HTML e CSS 5
A centrare la pagina con Js Javascript 1
R Come centrare il testo in un paragrafo con sfondo colorato? HTML e CSS 2
L Centrare galleria immagine HTML e CSS 2
asevenx centrare sito con div HTML e CSS 7
Z centrare verticalmente il testo di un button HTML e CSS 1
Marcolotto Centrare un testo (orizzontalmente e verticalmente) in una TextView Android Sviluppo app per Android 1
E Centrare finestra popup Javascript 7
A centrare una tabella HTML e CSS 3
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2
C centrare pagine sito HTML e CSS 17
V centrare un layout a qualunque risoluzione HTML e CSS 3
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
I Centrare un layout al centro della pagina HTML e CSS 8
M Centrare un sito con tutti i browser HTML e CSS 22
Nyl Centrare pagina HTML e CSS 7
D Centrare del testo all'interno di un DIV ? HTML e CSS 3
D Centrare menù HTML e CSS 2
Oscar83 Si possono centrare automaticamente i CSS?? HTML e CSS 2
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
D Centrare Un Pulsante Webdesign e Grafica 12
D Centrare IMG tramite action script Flash 2
simoncino Centrare pagine con Dreamweaver Webdesign e Grafica 1
M Centrare un logo in tutte le risoluzioni.... HTML e CSS 4
nourdine centrare verticalmente un div HTML e CSS 1
F Centrare la pagina HTML e CSS 8
L Iframe a schermo intero HTML e CSS 0
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
A [Java] caricare un url esterno senza utilizzo di iframe Java 0
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
A [HTML] iframe HTML e CSS 1
Tommy03 [PHP] Iframe Google Maps PHP 1
S Cliccando su iFrame con JavaScript Javascript 2
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
D [PHP] [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe PHP 0
D [RETRIBUITO] cercasi esperto programmatore per realizzare applicazione in html e codice iframe Offerte e Richieste di Lavoro e/o Collaborazione 2
J [HTML] problema IFrame con dispositivi IOS HTML e CSS 0
L Come caricare <iframe> dopo il click ad un immagine, per migliorare le prestazioni. Discussioni Varie 0

Discussioni simili