gestione background in pagina con frame

laharl

gestione background in pagina con frame

ciao ragazzi, dopo la discussione da me aperta relativa a come procurarmi un dominio, vi faccio anche questa domanda sperando di ricevere risposta. ho fatto ricerche sul forum e letto post, ma non ho trovato nulla che riguardi questo problema, suppongo che per voi un problema nn lo sia nemmeno :).
dopo aver progettato il sito in questione, ho cominciato a accumulare e modificare le immagini che sarebbero entrate in gioco. le cose stavano andando troppo bene e spedite, becco e edito le cose giuste nel modo giusto, mi organizzo in testa un layout, lo realizzo innanzi tutto come immagine in photoshop e viene tutto mostruosamente bene, nel senso che non mi aspettavo un risultato così simile all'idea che mi era balzata in testa all'inizio . giustamente, nel momento di smanecchiare con lo scheletro in html della pagina. ho cominciato a redermi conto che quello che volevo fare, bhè, non lo sapevo fare :bho:.
vi spiego in modo chiaro cosa avevo in mente.
anzi tutto, volevo una pagina con frame: un top con un titolo a lettere cubitali, un menu di navigazione a sinistra, ed un frame principale al centro dove avrei linkato ciascuna sezione del sito.
e fin qua mi destreggio tra il frameset, e non incontro ancora il vero problema. quando però comincio a pensare come unire i pezzi del mio puzzle/layout, dopo qualche prova vado in crisi :x. il background di per sè non è complesso, è un immagine 1024x768 così costituita: su sfondo nero ho tracciato una sorta di croce con il braccio destro del transetto circa 4 o 5 volte più lunga della sinistra, il titolo andava nella parte del layout così creata in alto a destra (che insieme con la parte vuota in alto a sinistra avrebbero costituito il frame top), la parte in basso a sinistra avrebbe ospitato il mio menu (e frame relativo), quella in basso a destra il frame principale. all'unione delle braccia di questa croce, ho posto un'immagine. io credevo che usando un frameset annidato, dividendo l'immagine da me creata per il layout in 3 immagini dalle dimensioni concordanti a quelle dei 3 frame (con frameborder="no"), la pagina avrebbe avuto l'aspetto desiderato. apro il file html e vedo che sì, il background funziona (a parte una piccola linea bianca per dividere i frame), però mi accorgo con terrore che i frame sono ridimensionabili dall'utente: se modifico le dimensioni sul browser, il pezzo di immagine del top scopro che si ripete per tutto lo spazio che si crea trascinando il bordo, e così succede anche per la linea verticale che divide i due frame sottostanti al top, con conseguente scasinamento del background e dell'immagine posta al centro delle due braccia della croce :x.
ho cercato per un paio d'ore gruide e frammenti di codice anche in ccs per risolvere il problema (background-attachment eccetera), ma non ce l'ho fatta.
io vorrei realizzare una cosa che ho visto anche in molti altri bei siti: un background uniforme per tutto il sito, un'immagine statica che comunque visivamente suddivida lo spazio di navigazione (creando anche solo alla prima vista lo spazio del menu, del titolo e del testo principale), che sia omogenea e che si adatti alla finestra del browser utilizzato, ed un menu che anche scorso in verticale non modifichi l'assetto dello sfondo.
come faccio?
spero di essere stato abbastanza chiaro, se non ce l'ho fatta, per favore, indicatemi le parti da spiegare meglio.
vorrei potervi linkare l'immagine così sarebbe facile capire a colpo d'occhio, ma non ho ancora lo spazio su cui caricarla...
grazie ancora per l'aiuto,
alla prossima

sms

prova ad abbandonare i frame ed utilizzare questo codice


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body &#123;
background-image&#58; url&#40;'http&#58;//download.giorgiotave.it/tutto_gratis.gif'&#41;;
background-repeat&#58; no-repeat;
background-position&#58; center;
/***************/
/* lascia comunque un colore di sfondo &#40;devi togliere il commento alla riga&#41;
xkè a risoluzioni maggiori si vedrebbe una parte bianca di schermo.
ovviamente il colore deve essere lo stesso dell'img */
/* background-color&#58; #000000;*/
&#125;
div#testata &#123;
width&#58; 100%;
text-align&#58; center;
&#125;
div#menu &#123;
clear&#58; both;
width&#58; 20%; /** oppure dimensione in pixel! */
float&#58; left;
&#125;
div#corpo &#123;
float&#58; right;
width&#58; 80%;
&#125;
</style>
</head>
<div id="testata">
**Benvenuto nel sito di mio nonno.**
</div>
<div id="menu">
[url="#"]A

[url="#"]B

[url="#"]C

</div>
<div id="corpo">
Caro lah, ora questa cosa qua dovrebbe funzionare?

Senza frame. Però l'effetto è lo stesso.

il tuo frame centrale è questo!.

Ciao! sms.

ps&#58; ah, lo sfondo è centrale, ma puoi anche rimetterlo all'angolo alto-sinistra cancellando la riga!
</div>
<body>
</body>
</html>

laharl

tu in realtà sei un benefattore.
non so come ringraziarti per avermi fatto togliere i frame, l'idea della divisione era proprio quella, c'è ancora un problemino però, se cambio l'url dell'immagine e tento la prova del nove col mio layout (dando il percorso sul pc) si rifiuta di calcolarlo. serve una sintassi diversa da questa?

body {
background-image: url('percorso') };

ti ringrazio davvero, se questo codice funzia mi divertirò di brutto.

sms

@laharl said:

tu in realtà sei un benefattore.
non so come ringraziarti per avermi fatto togliere i frame, l'idea della divisione era proprio quella, c'è ancora un problemino però, se cambio l'url dell'immagine e tento la prova del nove col mio layout (dando il percorso sul pc) si rifiuta di calcolarlo. serve una sintassi diversa da questa?

body {
background-image: url('percorso') };

ti ringrazio davvero, se questo codice funzia mi divertirò di brutto.
non puoi dare il percorso del tuo pc!
fatti una cartella che poi caricherai sul server.
in quella cartella crei altre sottocartelle e fai percorsi relativi:
ti faccio un esempio.
il tuo sito è in Z:\mysite
l'mmagine va messa, per esempio, in z:\mysite\images.
ora, per dare l'indicazione dell'img corrispondenti usi:

background-image: url&#40;'images\mia_immagine.jpg'&#41;

mi raccomando: ciò non vale solo per le immagini di sfondo ma per tutti i files che utilizzi nel tuo sito: ricordati che quando caricherai i files sul tuo dominio i percorsi cambieranno (infatti ora sei su un altro pc, che non è + il tuo!) per cui è buona cosa utilizzare il sistema che ti ho descritto.
altrimenti perdi due anni a rimettere a posto tutti i collegamenti.

laharl

ah cavolo hai ragione.
io avevo già creato una cartella del sito con come sotto cartelle le immagini varie e quele relative al layout, però linkavo partendo dall'HD.
però asp, ho controllato e ricontrollato, ma non ho fatto slati nello scrivere il percorso, saltando l'hd ho scritto esattamente prima
'Layout\layout04.jpg'
siccome non compariva lo sfondo ho provato con
'Sito DC\Layout\layout04.jpg'
ma nemmeno così compare niente.
come può essere?
l'immagine deve avere un formato particolare?
ho convertito anche in .gif ma nn compare comunque...

sms

fammi uno schemino con cartelle e file di dove è il file index.html (o nome che gli hai dato: quello che ti ho dato io..) (oppure il file css, se usi un file css esterno) e dove è l'img di sfondo.

laharl

dentro hdd:

'Sito DC' directory del sito
dentro ho messo:

i file html delle pagine
-cartella 'Immagini' (immagini varie non ancora utilizzate)
-cartella 'Layout' (con lo sfondo che voglio applicare e altre 3 immagini che sarebbero lo sfondo diviso in 3 che con il css pare nn servano più)

'Layout':

-'layout04.jpg'
-'layout04.gif'
è lo sfondo che vorrei utilizzare e mantenere uniforme per tutti e 3 i "div" della pagina in css.

se provo a chiamare lo sfondo nel codice come ti ho detto prima, non compare lo sfondo.

sms

boh, dovrebbe essere
Layout/nome.ext
oppure
Layout\nome.ext
prova ad usare entrambe le \

laharl

ho provato, non cambia

sms

@laharl said:

ho provato, non cambia
mandami il sito zippato via email (ti mando un messaggio privato con scritto la mia email!) che ci dò un'occhiata! (non ti preoccupare non ti copio/rubo niente!)

laharl

mandata.
non so davvero come ricambiare, ma ti ringrazio per il grande aiuto che mi stai dando.
a presto

laharl

per qualche ragione, l'email mi è tornata indietro, non gradiva l'attachment .rar, ti ho rimandato la cosa in zip e non l'ha ancora rifiutata, spero ti arrivi.

sms

arrivato!
ecco la versione riveduta e corretta
file index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http&#58;//www.w3.org/1999/xhtml"> 
<head> 
<title>Doom Champions &#91;DC&#93;</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" title="CSS" href="style.css" />
</head> 
<body> 
<div id="top"> 
**Sottotitolo**
</div> 
<div id="menu"> 
[url="#"]Link 1
 
[url="#"]Link 2
 
[url="#"]Link 3
 
</div> 
<div id="corpo"> 
Ecco fatto!

Occhio a un paio di cose&#58;

<ul>
* Nel menu non scrivere parole troppo lunghe&#58; la casella è larga solo 155px;
* Se per caso hai la necessità di cambiare qualche dimensione stai attento&#58; sono fatte un po' a caso, ma modificandone una rischi
di distruggere tutto il layout. Ricordati comunque di precisare che stai lavorando in px tutte le volte che usi il css!
* Il codice CSS è incluso in un file esterno, così prendi questa come pagina modello e la ricopi tutte le volte che vuoi cambiando
solo questo testo

</div> 
</body> 
</html>

file style.css


body &#123; 
background-color&#58; black;
background-image&#58; url&#40;layout04.jpg&#41;;
/* il problema non era nella mappatura del file.. boh&#58; era altrove, non ho capito bene dove.. commentando
e decommentando e cambiando qualcosa si è risolto.*/
background-repeat&#58; no-repeat;
color&#58; white;
width&#58; 1024px;
text-align&#58; left;
top&#58; 0px;
left&#58; 0px;
&#125; 
div#top &#123; 
margin-top&#58; 130px;
margin-left&#58; 400px;
&#125; 
div#menu &#123; 
width&#58; 155px;
float&#58; left;
margin-top&#58; 100px;
margin-left&#58; 50px;
&#125; 
div#corpo &#123; 
float&#58; right;
margin-top&#58; 100px;
width&#58; 700px; /*ti puoi spingere fino a 780 circa*/
&#125;

laharl

sei veramente un grande!
sei grande e non so come ringraziarti.
una volta finito il sito e acquistato lo spazio internet ti farò vedere il risultato!
grazie ancora!

sms

@laharl said:

sei veramente un grande!
sei grande e non so come ringraziarti.
una volta finito il sito e acquistato lo spazio internet ti farò vedere il risultato!
grazie ancora!aspetto con ansia il link

laharl

wella!
il sito sta procedendo bene, quando avrò finito acquisterò il dominio e vi farò vedere cosa sono umilmente riuscito a realizzare.
proseguo con il mio rompimento. domanda aperta a sms come a chiunque altro voglia aiutarmi.
vorrei inserire anche un news box e una bachecha nel sito, il news box tipo questo:
www.knights.it
ma nn riesco a leggere il codice, poi il browser si blocca...
nel caso mi arrangerei e userei il news box come quello sopra anche come bacheca rudimentale...
altro problemino: ho creato e provato un form che ho inserito per un'iscrizione, cosa semplice:


<form name="iscrizione" method="post" enctype="text/plain" action="mailto:email">

<table border="1">
<tr>
<td>**Nome del Personaggio principale&#58;**

<input type="text" size="19"></td>
<td>**Livello del Personaggio principale&#58;**

<select name="liv" size="3">
 <option value="1">01</option>
 <option value="2">02</option>
 <option value="3">03</option>
 <option value="4">04</option>
 <option value="5">05</option>
 <option value="6">06</option>
 <option value="7">07</option>
 <option value="8">08</option>
 <option value="9">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
</select></td>
<td>**Sesso del Personaggio&#58;**

<input type="radio" name="Sex" value="M" checked/>
Maschio

<input type="radio" name="Sex" value="F"/>
Femmina

</td>
</tr>
<tr>
<td>**Classe Primaria&#58;**

<select name="classe primaria">
 <option value="warrior">Guerriero</option>
 <option value="wizard">Elementalista</option>
 <option value="ranger">Esploratore</option>
 <option value="monk">Mistico</option>
 <option value="necro">Necromante</option>
</select></td>
<td>**Classe Secondaria&#58;**

<select name="classe secondaria">
 <option value="warrior">Guerriero</option>
 <option value="wizard">Elementalista</option>
 <option value="ranger">Esploratore</option>
 <option value="monk">Mistico</option>
 <option value="necro">Necromante</option>
</select></td>
<td>**La tua età &#40;opzionale&#41;&#58;**

<input type="text"></td>
</tr>
<tr>
<td>**Hai fatto l'ascensione?**

<select name="ascensione">
 <option value="si">Sì</option>
 <option value="no">No</option>
 <option value="cosa?!">Cheee?!</option>
</select></td>
<td>**Ti connetti dalle 21&#58;00 in poi?**

<input type="radio" name="sì" value="giocatore serale" checked/>
Sì, mi connetto quasi sempre di sera.

<input type="radio" name="no ma posso" value="giocatore non serale"/>
No, ma posso cominciare.

<td>**Impressioni o altro da farci sapere?&#40;opzionale&#41;**

<textarea rows="5" cols="20" name="Commenti">
</textarea></td>

</table>

il problema è che inviando il form compilato via email arrivano tutti i dati tranne quelli dei campi text e textarea, perchè?
poi come faccio a disabilitare il salvataggio di img dal sito?
ringrazio chiunque possa darmi una mano, e sms volesse essere così grande da risolvere anche questo problema, mi prostrerei.
alla prossima.

sms

il news box tipo questo
non capisco quale intendi
il problema è che inviando il form compilato via email arrivano tutti i dati tranne quelli dei campi text e textarea, perchè?
ti conviene utilizzare un linguaggio lato server.
ce ne sono diversi, dipende da quali sono supportati dal tuo server.
io conosco asp .net, ma ci sono anche asp 3 e php. scegline uno (o meglio.. guarda quali sono supportati) e poi chiedi una mano nel forum apposito..

poi come faccio a disabilitare il salvataggio di img dal sito?

non puoi..
o meglio potresti disabilitare il tasto destro.
ma si potrebbe comunque salvare la pagina.
ma si potrebbe cmq andare a ritrovare le immagini nella cartella temporanea del browser
ma si potrebbe cmq fare un print screen

laharl

@sms said:

non capisco quale intendi

quello al centro della pagina con news, data e commenti inseribili, ma forse sarà anche quello asp o php?
@sms said:

ti conviene utilizzare un linguaggio lato server.
ce ne sono diversi, dipende da quali sono supportati dal tuo server.
io conosco asp .net, ma ci sono anche asp 3 e php. scegline uno (o meglio.. guarda quali sono supportati) e poi chiedi una mano nel forum apposito..

hai ragione, errore mio, lo farò.
@sms said:

o meglio potresti disabilitare il tasto destro.

sono tutte ottime ragioni, ma mi basterebbe il tasto destro, tanto la percentuale di gente in grado di smanecchiarci sopra presente in quel gioco è bassa.
grazie ancora

emmebar

@laharl said:

sono tutte ottime ragioni, ma mi basterebbe il tasto destro, tanto la percentuale di gente in grado di smanecchiarci sopra presente in quel gioco è bassa.
grazie ancora

Questo è un Jscript che disabilita il tasto destro

<script language="Javascript">
<!--
var message="Attenzione, il tasto destro è disbilitato in questa pagina."
function click&#40;e&#41; &#123;
if &#40;document.all&#41; &#123;
if &#40;event.button == 2&#41; &#123;
alert&#40;message&#41;;
return false;
&#125;
&#125;
if &#40;document.layers&#41; &#123;
if &#40;e.which == 3&#41; &#123;
alert&#40;message&#41;;
return false;
&#125;
&#125;
&#125;
if &#40;document.layers&#41; &#123;
document.captureEvents&#40;Event.MOUSEDOWN&#41;;
&#125;

document.onmousedown=click


//-->
</script>

Comunque come ha giustamente detto sms non è che così impedisci il salvataggio di immagini, rendi solo le cose un pochino più difficili.

Ah dimenticavo, questo codice non funziona con Mozilla Firefox.

laharl

grazie mille, questo risolve un problema.