Nubbio domanda: Proporzioni...che casino XD

**lovaj** · 28-04-2011, 10:03

Buongiorno a tutti!

E' la prima volta che scrivo in questo vastissimo forum che più volte ho consultato, quindi mi sembra d' obbligo presentarmi.

Mi chiamo Luca e sto tentando di costruire il sito del mio club di softair.

Non nego una cosa: sono relativamente ignorante in materia di web design. Mastico giusto un pochetto di HTML, ASP e JavaScript (ma giusto un minimo), purtroppo di CSS e altri non so un' emerita mazza

La mia formazione in materia l' ho avuta alle superiori, ed essendo ora all' università, non nego di essere un pò arruginito, ma cercherò comunque di recuperare ripassando un pò!

Tuttavia mi sono imbatutto in un problema che, evidentemente, è talmente semplice da non riuscire a risolverlo!

Riguarda alla proporzioni delle immagini e dei vari flash che compaiono nel sito, in relazione alla risoluzione dello schermo!

In pratica io utilizzo uno schermo 1366x768, ma mi accorgo benissimo da solo che se inserisco questo codice :

width="1368"
height="768"

Se utilizzassi una risoluzione diversa, oppure entrassi sul mio sito da un altro pc, con un altro schermo, potrei aver brutte sorprese!

Allora ho pensato di utilizzare questo codice:

width=100%
height=100%

BENE! Funziona. (evviva i mongolini

)

Tuttavia ora sorge un altro problema: dato che la pagina in questione è una pagina di intro al sito, con una bella presentazione in flash, vorrei che le varie scritte e animazioni che compaiano, siano SEMPRE al centro dello schermo, senza dover far scorrere la barra laterale per farlo venire al centro.
Provo a spiegarmi meglio: A causa di barra dei preferiti, schede aperte ecc, l' altezza effettiva dello spazio di visualizzazione del sito può cambiare da pc a pc, e quindi può appararire una barra di scorrimento laterale che ci fa scorrere su e giù per la pagina, senza far venire l' animaziona al suo centro (cosa molto brutta a mio parare!)

Quindi mi chiedo: è possibile fare in modo che la barra laterale scompaia e che la mia animazione sia sempre al centro dello schermo (a prescindere dalla risoluzione utilizzata)?

Grazie in anticipo a tutti!

**carlomarangoni** · 28-04-2011, 12:10

Premesso che costruire un layout elastico o liquido, costituisce un grosso impegno anche per il programmatore più esperto e smaliziato.

Fatta la premessa per centrare il contenuto della tua pagina prova questa soluzione

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

	<style type="text/css">
    <!--
	bodi, html {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#contenitore {
        height: 768px;
        width: 1368px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -384px 0 0 -684px;
		overflow: hidden;
	}
    -->
    </style>

</head>

<body>
    <div id="contenitore">
    	Inserire qui il contenuto
    </div>
</body>
</html>

**lovaj** · 28-04-2011, 19:13

Guarda ho integrato il tuo codice, tuttavia se tentol di cambiare risoluzione dello schermo, come temevo, non cambia molto!

Posto di seguito TUTTO il codice in modo da esser più chiaro

Specifico inoltre che la presentazione in flash in questione fa riferimento a due file che, se mi è concesso per regolamente, e se siete interessati, posso postare il link al download, in modo che possiate vedere il lavoro e fare varie prove!

Comunque ecco il code:

codice:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

	<style type="text/css">
    <!--
	bodi, html {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#contenitore {
        height: 768px;
        width: 1368px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -384px 0 0 -684px;
		overflow: hidden;
	}
    -->
    </style>

</head>

<body>
    <div id="contenitore">
    	<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,2,0
width=600
height=300>
<param name=movie value=travel.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#000000>
<param name=SCALE value=showall>
<embed src=travel.swf
quality=high
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash
width=100%
height=100%
bgcolor=#000000
scale= showall>
</embed>
</object>
    </div>
</body>
</html>

**Vincent.Zeno** · 28-04-2011, 21:23

@lovaj

tag CODE, grazie
http://forum.html.it/forum/showthrea...hreadid=310046

**carlomarangoni** · 29-04-2011, 00:02

Originariamente inviato da lovaj
Guarda ho integrato il tuo codice, tuttavia se tentol di cambiare risoluzione dello schermo, come temevo, non cambia molto!.......

Per forza non cambia molto, non hai rispettato le regole!
[list=1][*]Le misure in embed devono essere uguali a quelle in object, non uno al 100%x100% e l'altro a 600x300 ed è meglio non usare misure in percentuale[*]il css (#contenitore) deve essere settato con le stesse misure dellìobject[/list=1]

**lovaj** · 29-04-2011, 20:47

Originariamente inviato da carlomarangoni
Per forza non cambia molto, non hai rispettato le regole!
[list=1][*]Le misure in embed devono essere uguali a quelle in object, non uno al 100%x100% e l'altro a 600x300 ed è meglio non usare misure in percentuale[*]il css (#contenitore) deve essere settato con le stesse misure dellìobject[/list=1]

Mi scuso per la nubbiaggine! Ho tentato di correggere (spero nella maniera giusta!) ottenendo così il secondo codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

	<style type="text/css">
    <!--
	bodi, html {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#contenitore {
        height:768px;     
		width:1368px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -384px 0 0 -684px;
		overflow: hidden;
	}
    -->
    </style>

</head>

<body>
    <div id="contenitore">
    	<object classid=clsid27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,2,0
width=1368
height=768>
<param name=movie value=travel.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#000000>
<param name=SCALE value=showall>
<embed src=travel.swf
quality=high
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash
width=1368
height=768
bgcolor=#000000
scale= showall>
</embed>
</object>
    </div>
</body>
</html>

Tuttavia il problema persiste! Modificando la risoluzione, ad esempio, a 1024x768, certe scritte che compaiono nel flash vengono tagliate!

**Myaku** · 29-04-2011, 21:33

1. perché hai due doctype?
2. perché usi la sintassi html se hai inserito una [due] dtd xhtml?

Modificando la risoluzione, ad esempio, a 1024x768, certe scritte che compaiono nel flash vengono tagliate!

usi dei posizionamenti assoluti, ed in più l'overflow hidden anche sul body (per cui è normale che se l'area della finestra del browser è minore delle dimensioni del tuo div #contenitore con flash posizionato, la parte eccedente viene tagliata via.
Elimina il posizionamento, elimina l'overflow (dopo ovviamente aver corretto gli errori di sintassi sul codice), e mettendo una risoluzione inferiore ti dovrebbero comparire le scrollbar

per contro, non mi risulta che tu possa centrare in verticale un div in maniera tableless senza fare ricorso ai posizionamento assoluti.
quindi:
. o riprogetti il flash anche per le risoluzioni inferiori
. oppure le ignori
. oppure intabelli (ma in quest'ultimo caso sulle risoluzioni inferiori avrai comunque la scrollbar)
. oppure fai una detection per le risoluzioni e servi contenuti / codici differenti

**lovaj** · 30-04-2011, 17:48

Ragazzi sono riuscito a "risolvere" il problema a metà.

Utilizzando il codice seguente

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

</head>

<body bgcolor="#000000">
<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,2,0
width=100%
height=100%>
<param name="scale" value="exactfit">
<param name=movie value=travel.swf>
<param name=quality value=high>
<param name=BGCOLOR value=#000000>
<param name=SCALE value=showall>
<embed src=travel.swf
quality=high
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash
width=100%
height= 598px
bgcolor=#000000
>
</embed>
</object>

  
    
</body>
</html>

L' animazione in flash occupa tutta la pagina se si utilizza firefox e google chrome, MA non se si usa Explorer (almeno per quanto riguarda l' ultimissima versione, per quelle più recenti non so!). In pratica la larghezza si adatta a seconda della dimensione della finestra e della risoluzione dello schermo, ma non dell' altezza!

Infatti l' altezza del falsh in IE è pari al minimo (ora in px non so quanto sia) mentre con Google chrome e Mozzilla, se provo a ridurre in altezza la pagina, appaiono le scroll bar! Cosa ne pensate?

Discussione: Nubbio domanda: Proporzioni...che casino XD

Strumenti discussione

Ricerca discussione

Visualizza

Nubbio domanda: Proporzioni...che casino XD

Permessi di invio