[HTML] position:relative; ..... anche troppo relativa!

[Rei-chan]

Salve a tutti!
Sto costruendo una pagina per un mio sito web. E premetto che il mio schermo è un 1024x768 px.
Ho posizionato l'immagine principale (generata ed esportata con ImageReady 7, tramite: Salva come... -> html+immagini) sulla destra dello schermo. Poi, al di sotto dell'immagine ho posizionato un frame non ancorato settando i suoi parametri (per l'appunto: "position:relative;" e impostando comunque quanti pixel dall'alto, quanti da sinistra, ecc..) in modo tale che i bordi del mio frame ricompaciassero con quelli che avevo già preimpostato all'interno dell'immagine stessa (per dare un senso di continuità).
Ora... finché visualizzo il tutto tramite uno schermo a 1024x768 pixel (il mio) nell'anteprima che mi offre FrontPage tutto sembra essere regolare e coincidente. Tuttavia... se visualizzo la grafica della pagina su uno schermo di dimensione subito superiore... il mio frame risulta visibilmente spostato verso sinistra (rispetto chiaramente al bordo destro dello schermo).
Ora... ho provato in tutti i modi, ma se aggiusto una cosa nella versione 1024 se ne sfascia una nella versione successiva di grandezza schermo, e viceversa...
Come posso fare per far sì che il mio frame rimanga BLOCCATO esattamente lì, e che non "balli" a destra e sinistra ogni volta che testo la mia pagina su Internet Explorer a seconda della grandezza dello schermo che imposto? Non esiste un modo magari per ancorarlo non so... all'immagine che gli sta sopra? O proprio semplicemente appunto ancorarlo in QUELLA posizione..?

Vi ringrazio di cuore in anticipo!

[seed_squall_it]

Uhm...non offenderti se te lo chiedo, ma sei "alle prime armi" con l'HTML? Perché mi è parso di capire di sì...
position: relative non ha nulla a che vedere con i parametri (gli attributi) dei tag, ma è una proprietà che si indica nelle regole di stile per un elemento.
Seconda cosa: se hai usato position: relative è normalissimo quello che succede, perché avrai usato top e left per impostare lo "scostamento" (offset) dell'iframe, vero? Ovviamente, siccome left imposta lo scostamento dal margine sinistro dell'elemento contenitore dell'iframe, se la risoluzione del monitor cambia, cambia anche la distanza dell'iframe dal bordo sinistro del suo elemento contenitore, visto che è allineato verso destra.
Una possibile soluzione è impostare, invece di left: DISTANZA, right: DISTANZA. L'offset orizzontale può essere determinato sia prendendo come riferimento il bordo sinistro dell'elemento contenitore, sia il suo bordo destro.
Per l'offset verticale la cosa invece non cambia, dato che il tuo iframe non viene spostato in basso all'aumentare della risoluzione.

Tuttavia credo che tu abbia usato il modo più "complicato" per impostare la posizione dell'iframe. Voglio dire...avendo un sito fatto con FrontPage, penso sia in HTML, quindi potresti usare le tabelle per posizionare l'immagine e l'iframe in 2 celle una sopra l'altra. Ovviamente è sconsigliato usare le tabelle per il layout, ma se è per quello anche gli iframes. Se passassi da HTML a XHTML + CSS per realizzare la tua pagina, allora il posizionamento avrebbe molto più senso (e potresti addirittura usare un box flottante per posizionare l'"iframe"...che sarebbe simulato coi CSS! ). Inoltre, ti consiglierei di provare la tua pagina anche su browser standard come Mozilla Firefox o Opera...ti sembrerà strano, ma se c'è un browser che è una vergogna nel supporto ai CSS (e quindi anche nei posizionamenti), quello è Explorer! Mi sono tutti testimoni...

Spero di non averti confuso troppo le idee, ma ti ho spiegato tutto questo per cercare di "indirizzarti" verso un codice standard per le tue pagine (l'XHTML) e verso un modo di presentare i contenuti (i CSS) che offrono innumerevoli vantaggi, sia a te che a tutti coloro che "usano" il web (e che non otterrai mai usando editor visuali come FrontPage o usando il semplice e ormai purtroppo "inquinato" HTML)!

[Rei-chan]

AHHH, ci sono riuscita!!
Dopo questa lezione ho compreso di sapere ancora troppo poco sull'HTML ma... comunque va detto che Frontpage non fornisce assolutamente le basi per impararlo, voglio dire... quando cliccavo col destro del mouse per ottenere le proprietà del frame non ancorato, francamente venivano date come opzioni solo quelle dal margine sinistro, non DESTRO.... Solitamente, se qualcosa non va, provo a cambiare IO i valori aggiustando (un po' andando a tentoni in effetti) il codice html. Ma stavolta non avevo minimamente pensato a un'eventualità simile....
E no, non era per niente chiara questa faccenda sulla relazione fra RELATIVE, RIGHT e LEFT (anche perché se io chiedevo la posizione relativa dell'iframe, automaticamente quei due campi diventavano attivi. La logica deduzione era che fossero quindi relazionati al tipo di allineamento che sceglievo...!).

Ad ogni modo, ho settato così il mio iframe:

<iframe name="I1" align="right" width="494" 
src="main.htm" style="position: absolute; right: 26; top: 585;
padding-left: 5; padding-right: 5; padding-top:0; padding-bottom:0"
border="0" frameborder="0" height="1144" marginheight="10">

Con questo codice, tutto è secondo i canoni dal punto di vista di IE, perché anche se aumento la risoluzione l'iframe rimane comunque e sempre posizionato lì. Mi domandavo invece se posso cancellare dal codice il valore "padding-bottom:0". A cosa serve?
Parlando di tabelle, avevo inizialmente avuto questa idea... ma siccome la ritenevo forse più scomoda (c'è sempre da imparare....) avevo pensato di poter utilizzare solamente gli iframe
Se volessi testare ora il mio sito su Mozilla... come posso fare? Devo necessariamente scaricarlo?

Altra cosa... hai parlato di box flottante. Deduco ti riferissi ai CSS (che comunque utilizzo sempre, ma anche lì sicuramente conosco molto poco) e ne ho già sentito parlare. Esattamente.. come funziona questo attributo? E più nello specifico: a cosa serve? :master:

Intanto ti ringrazio tantissimo di cuore, Squall!! Mi hai salvata!!

PS: non potevo postare il sito online perché il mio nuovo dominio deve ancora essere attivato

[seed_squall_it]

Infatti, usare un editor visuale come FrontPage porta spesso molti problemi. La cosa migliore sarebbe sempre scrivere a mano il proprio codice, tanto più che se invece di HTML usi l'XHTML, un editor come FrontPage non ti è quasi di nessun aiuto.

Per testare il tuo sito con Mozilla, devi scaricare un browser basato su di esso, come Firefox. Ricorda inoltre che Explorer è il peggior browser in assoluto per le pagine scritte in XHTML e CSS (perché non è assolutamente aderente agli standard, anche se Microsoft afferma che IE7 risolverà tutti i problemi).

padding è una proprietà dei CSS che imposta l'"imbottitura" (spazio fra il bordo e i contenuti) di un box. padding-bottom, di conseguenza, imposta l'imbottitura del lato inferiore del box a cui è applicata. Proprietà come position, top, left, right, bottom, padding, ecc. sono tutte specifiche dei CSS e non hanno nulla a che fare col linguaggio di markup che usi per i contenuti (sia esso HTML o XHTML).

I CSS spesso vengono usati per semplici formattazioni di testo, link, ecc., ma il loro vero potenziale è altissimo. Tanto che l'XHTML serve solo a strutturare i contenuti della pagina e non si preoccupa minimamente della formattazione di tali contenuti. Ci pensano i CSS a "presentare" i contenuti, tanto che con una sola pagina in XHTML, puoi "creare" decine e decine di "grafiche" diverse semplicemente associandole file CSS diversi.

Per box flottante si intende un box posizionato completamente a destra (float: right) o a sinistra (float: left) rispetto al suo box contenitore. Tuttavia il funzionamento dei float non è così intuitivo. Per es., se un box contiene solo box flottanti e non ha impostata un'altezza, tale box risulta con altezza nulla, come se al suo interno non ci fosse nulla. Questo perché i box flottanti, come quelli posizionati in modo relativo, assoluto e fisso, sono estratti dal normale flusso del documento e pertanto non influenzano la disposizione degli altri box. E' ovviamente troppo lungo approfondire la cosa qui...in rete ci sono tantissimi tutorial su XHTML e CSS. Se conosci bene l'HTML (nel senso che lo sai scrivere a mano e capisci il significato dei suoi tag), imparare l'XHTML è facilissimo (è sempre HTML alla fine, ma con meno attributi e tag).

[Rei-chan]

Sospettavo in effetti l'alto potenziale dei CSS... ma non ho mai trovato guide sufficientemente esplicative in rete.... Forse ho cercato male io, non so.
E sospettavo anche che lavorare con i box fosse piuttosto complesso ma... l'XHTML mi affascina, e mi piacerbebe molto impararne qualcosa in più!

Ti ringrazio davvero tanto per questa spiegazione, sei stato gentilissimo e molto chiaro! Grazie!