centrare un layout a qualunque risoluzione

vedovanera

Nuovo Utente
14 Giu 2011
4
0
0
ciao
ho un problema che riguarda la centratura del layout nella pagina
che stò realizzando nel mio sito.
il layout in questione è perfettamente centrato se il monitor
è a una risoluzione di 1440x900,mentre impostandolo alla risoluzione 1024x768 diventa tutto sballato non si riesce nemmeno a visualizzare i pulsanti ai lati della pagina
mi potreste aiutare a risolvere l'inghippo?
il layout della pagina è così composto:uno sfondo con una piccola immagine ripetuta,
in mezzo ho inserito un div con al suo interno un file flash e ai lati di questo i pulsanti di navigazione nel sito.

grazie
 
Prova a incapsulare tutto in un div contenitore con queste regole di stile:
Codice:
width: 80%;
margin-left: auto;
margin-right: auto;
Ovviamente puoi modificare la larghezza a tuo piacimento. Fammi sapere se ha funzionato.
 
non ho ancora potuto verificare se và,perchè si è presentato un'altro problema,ho creato un div contenitore e al suo interno ho inserito altri div e il tutto si è centrato,adesso però andando ad inserire nei vari div il contenuto questi si sballano,cioè mi saltano in fondo alla pagina fuori dal contenitore,come mai?
preferisci che ti mando uno screenshort così si capisce meglio cosa intendo?
 
ti inserisco lo screenshort



segnato in blu è il div contenitore le due zone scure laterali sono i menu e al centro dovrei inserirci un file flash,ma come vedi va a finire fuori dal div contenitore e sottostante,mentre dovrebbe stare a pari dei menu,le dimensioni del flash e dei menu sono impostati nelle dimensioni esatte per farci stare tutto all'interno del contenitore,non capisco perchè esce,ti inserisco anche il codice così vedi se ci sono degli errori di inserimento:

#contenitore {
height: 700px;
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
height: 60px;
}
#menu_sinistro {
height: 50px;
}
#menu_sinistro {
height: 455px;
float: left;
width: 152px;
}
#menu_destro {
height: 455px;
float: right;
width: 152px;
}
#contenuto {
height: 576px;
width: 850px;
}
#footer {
height: 50px;
}
-->
</style>
<script src="file:///C|/Users/W/AppData/Roaming/Adobe/Dreamweaver CS4/it_IT/Configuration/Temp/Assets/eam36FC.tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="contenitore">
<div id="header">Inserire qui il contenuto per id "header"</div>
<div id="menu_sinistro"><img src="immagini/menu-sinistro.png" width="152" height="454" /></div>
<div id="menu_destro"><img src="immagini/menu-destra.png" width="152" height="454" /></div>
<div id="contenuto">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="576">
<param name="movie" value="immagini/stargatemodificato.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- Questo tag param fa in modo che agli utenti con Flash Player 6.0 r65 e versioni successive venga richiesto di scaricare l'ultima versione di Flash Player. Eliminarlo se non si vuole visualizzare la richiesta agli utenti. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Il tag object successivo è per i browser diversi da IE. Utilizzare IECC per nasconderlo in IE. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="immagini/stargatemodificato.swf" width="720" height="576">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Il browser visualizza il seguente contenuto alternativo per gli utenti che utilizzano Flash Player 6.0 e versioni precedenti. -->
<div>
<h4>Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Scarica Adobe Flash Player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="footer">Inserire qui il contenuto per id "footer"</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

grazie!

P.S il tuo suggerimento è andato alla grande,i menu si vedono anche alle risoluzioni più piccole ;)
 

Discussioni simili