|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
ciao eccomi con un'altro quesito...  quello che vedete....è solo a scopo di esempio lo sfondo in azzurro sottostante e stato fatto con una piccola immagine e poi duplicata in sovrapposizione a questo, all'interno di un div ho inserito l'altra immagine che vedete sopra,la risoluzione è di 1024x768,quello che non capisco! come mai impostando la risoluzione del mio monitor a 1024 mi trovo le barre di scorrimento sia verticali che orizzontali? mentre se lascio impostato a 1440x900 le barre non ci sono... c'è un sistema per poter visualizzare le pagine web intere a qualunque risoluzione, senza quelle fastidiosissime barre di scorrimento? grazie ciao
|
|
|
|
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Ogni monitor ha una risoluzione predefinita, es. 1024X768 (è quella dello schermo LCD da 15"). Se ciò che hai messo nella tua pagina web supera (come dimensioni) la risoluzione dello schermo, ti appaiono inevitabilmente le barre di scorrimento.
Uno dei sistemi per evitare questo inconveniente consiste nel costruire le pagine web in una tabella (con una sola cella) di larghezza predefinita: attualmente 1000 pixel vanno abbastanza bene (anche se chi ha un vecchio monitor CRT da 15" con risoluzione di 800X600 pixel vedrà le famigerate barre). Se non vuoi usare le tabelle, lo stesso risultato puoi ottenerlo con i CSS.
Certamente Wubullo ti saprà dare altre utili indicazioni. Quello che non ho capito è cosa c'entra centrare uno sfondo ...
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
hemm...corretto il titolo della discussione  la risoluzione del mio monitor è 1440 ;) infatti quel problema a chi ha i vecchi monitor con risoluzione 800 sarà ancora peggio...ma chi ha ancora monitor così piccoli....! ;) ho trovato molti siti che a qualunque risoluzione imposti il monitor vedi sempre le pagine belle centrate e senza barre... avranno fatto un miracolo!? :))) scherzoo!! magari impostando qualcosa nel codice....sentiamo Wubullo! che di codice se ne intende ;) ciao
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Cari amici, la vostra fiducia nei miei consigli mi lusinga! Temo però che mi sopravvalutiate...  Per venire alla domanda di pollonia, la questione è abbastanza semplice. Il layout generale di un sito è regolato da due parametri CSS: le regole assegnate al tag <body> e quelle assegnate a un'altra sezione, che normalmente viene chiamata <div id="container">. Vediamo il problema più da vicino: Code:<!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" dir="ltr" lang="it-IT"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Questa è una pagina di prova</title> <link type="text/css" rel="stylesheet" media="screen" href="http://www.miosito.it/css/style.css" /> </head> <body> <div id="container"> <!-- Qui inizia il riquadro che contiene tutta la pagina del nostro sito --> <div id="header"> <!-- Qui inizia il riquadro che contiene la testata del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene la testata del nostro sito --> <div id="nav"> <!-- Qui inizia il riquadro che contiene il menu di navigazione del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene il menu di navigazione del nostro sito --> <div id="content"> <!-- Qui inizia il riquadro che contiene il corpo del testo principale del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene il corpo del testo principale del nostro sito --> <div id="footer"> <!-- Qui inizia il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) --> </div> <!-- Qui FINISCE il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) --> </div> <!-- Qui FINISCE il riquadro che contiene tutta la pagina del nostro sito --> </body> </html> Le regole CSS assegnate al tag <body>, se dotate di qualche piccolo accorgimento, conferiscono alla pagina un formato compatibile con qualunque risoluzione del browser. Nel nostro caso: Code:body {
background:transparent url('sfondo-piccolo.gif') repeat scroll center; /* Tutte le proprietà di background in un'unica dichiarazione! */
text-align:center;
margin:0;
padding:0 0 20px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
} A questo punto nascono i problemi. Se al <div id="container"> ora vogliamo assegnare una dimensione e un'immagine di sfondo, dovremo tener presente che qui la risoluzione dello schermo diventa un fattore. Normalmente si risolve così: Code:#container { width:850px; /* LA SOLUZIONE */ height:550px; /* LA SOLUZIONE */ margin: 20px auto 20px auto; /* Questa dichiarazione è importantissima! */ padding:5px; text-align:left; background: transparent url('sfondo-centrale.gif') no-repeat scroll center; /* Volendo, si può circoscrivere il <div> entro un bordo --> border:3px solid #000000; */ Ho assegnato al container una larghezza di 850px e un'altezza di 550px; va da sé che a questo punto anche l'immagine che uso da sfondo dovrà avere le stesse dimensioni. Questo accorgimento risolve i problemi per tutti i monitor con risoluzione fino a 1024X768. Per adattare il riquadro anche ai monitor più piccoli, si dovrà ridurre l'ampiezza del container (e di conseguenza dell'immagine di sfondo ad esso assegnata) fino a 790px. Ma... Ne vale la pena?  Un buon sito normalmente ha un container dell'ampiezza di 900 / 950 px (più piccolo, il contenuto diventa sacrificato). Chi non si rassegna ad abbandonare la risoluzione 800X600 dovrà usare lo scroller, ma - secondo me - è un problema suo!  Spero di non aver creato confusione e di aver fornito una risposta utile. Qualora non dovesse essere così, rimango a tua disposizione! A presto, 
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Bravo Wubullo.
Per Pollonia aggiungo che le risoluzioni più usate (80-90 % delle volte) sono ormai 1280X1024 e 1024X768. La percentuale di chi ha schermi da 800X600 pixel è bassissima, anche perché si tratta dei vecchi monitor CRT.
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
ecofive ha scritto:le risoluzioni più usate (80-90 % delle volte) sono ormai 1280X1024 e 1024X768. La percentuale di chi ha schermi da 800X600 pixel è bassissima, anche perché si tratta dei vecchi monitor CRT. Per la cronaca: io uso addirittura la risoluzione 1280X800px!
|
|
Rank: AiutAmico
Iscritto dal : 10/31/2004
Posts: 7,183
|
@wubullo ... --- > è possibile vedere in praticacome funziona il codice .... a livello prova ? grazie
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
maopapof ha scritto:@wubullo ... --- > è possibile vedere in pratica la funzione del codice .... a livello prova ? grazie Ciao maopapof! In realtà questo esempio non esiste da nessuna parte: l'ho scritto di getto, a mo' di esempio. Se vuoi puoi creartelo in locale! 1) Incolla questo codice in un editor HTML (testuale) o in un file di "Blocco note" e salvalo con estensione .htm: Code:<!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" dir="ltr" lang="it-IT"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Questa è una pagina di prova</title> <link type="text/css" rel="stylesheet" media="screen" href="style.css" /> </head> <body> <div id="container"> <!-- Qui inizia il riquadro che contiene tutta la pagina del nostro sito --> <div id="header"> <!-- Qui inizia il riquadro che contiene la testata del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene la testata del nostro sito --> <div id="nav"> <!-- Qui inizia il riquadro che contiene il menu di navigazione del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene il menu di navigazione del nostro sito --> <div id="content"> <!-- Qui inizia il riquadro che contiene il corpo del testo principale del nostro sito --> </div> <!-- Qui FINISCE il riquadro che contiene il corpo del testo principale del nostro sito --> <div id="footer"> <!-- Qui inizia il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) --> </div> <!-- Qui FINISCE il riquadro che contiene il piè di pagina del nostro sito (di solito, ci sono i credits) --> </div> <!-- Qui FINISCE il riquadro che contiene tutta la pagina del nostro sito --> </body> </html> 2) Incolla questo codice in un editor HTML (testuale) o in un file di "Blocco note" e salvalo col nome style.css: Code:body {
background:transparent url('sfondo-piccolo.gif') repeat scroll center; /* Tutte le proprietà di background in un'unica dichiarazione! */
text-align:center;
margin:0;
padding:0 0 20px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000000;
}
#container {
width:850px; /* LA SOLUZIONE */
height:550px; /* LA SOLUZIONE */
margin: 20px auto 20px auto; /* Questa dichiarazione è importantissima! */
padding:5px;
text-align:left;
background: transparent url('sfondo-centrale.gif') no-repeat scroll center 5px;
border:3px solid #000000;
} 3) A questo punto, non ti rimane che: - utilizzare un'immaginetta qualunque per lo sfondo del <body> (attenzione: si ripeterà in orizzontale e in verticale!) modificando questo valore: background:transparent url('nomefile.estensione'); - utilizzare un'altra immagine per lo sfondo del <div id="container">. A seconda della dimensione e del nome di questa immagine, dovrai agire sui parametri: width:larghezza dell'immagine in pixel; - height:altezza dell'immagine in pixel; - background: transparent url('nomefile.estensione'). N.B.: file .htm, file .css e immagini dovranno essere contenute tutte nella stessa cartella (per esempio: "prova_sito"). Per altre curiosità, sono a tua disposizione. A presto,
|
|
Rank: AiutAmico
Iscritto dal : 10/31/2004
Posts: 7,183
|
@wubullo.... grazie ... provo ... ci mancava proprio una persona disponibile come @eco .... complimenti :O) posterò in sezione html un mio personale problema ... www.ammortizzatori-maudar.com ( da 800 apache/flash corretto w3c ok ) spero che mi possiate aiutare ciao grazie ed a presto:O)
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Mao, non c'è di che!
Ho guardato il sito e ho già visto il problema (sarà complicato, ma forse riusciremo a venirne fuori!). Ci sentiamo su un nuovo topic.
Ciao!
|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
finita la breve vacanza....si torna al lavoro! ecofive... scusami, ho inserito un esempio non proprio appropriato,quello a cui mi riferivo è un'unica immagine, senza colonne, però sempre con uno sfondo sottostante. per quanto riguarda la risoluzione dello schermo,infatti oramai 800x600 andrà a scomparire,però realizzando anche una pagina da 1024 (come sto facendo io...) e si ha un monitor con risoluzioni da 1200 in sù,ci si trova la pagina spostata tutta sulla sinistra e un bruttissimo spazio bianco sulla destra che compensa lo spazio mancante a tale risoluzione per questo motivo volevo centrare l'immagine, ma allo stesso tempo che rimanesse sempre centrata a qualunque risoluzione si ha il monitor.grazie anche a te per le dritte! :) wubullo....grande come sempre... ;) grazie per le "lezioni" di HTML ;) ne farò tesoro! scrivi che è un esempio....per cui non posso copiarlo nel mio codice? ti posto quì direttamente il mio codice con le impostazioni della mia pagina così si capisce meglio,e magari può servire a qualcun'altro! :) ciao
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
pollonia ha scritto:realizzando anche
una pagina da 1024 (come sto facendo io...) e si ha un monitor con risoluzioni da 1200 in sù,ci si trova la pagina
spostata tutta sulla sinistra e un bruttissimo spazio bianco sulla destra che compensa lo spazio mancante a tale risoluzione
per questo motivo volevo centrare l'immagine, ma allo stesso tempo che rimanesse sempre
centrata a qualunque risoluzione si ha il monitor.grazie anche a te per le dritte! Code:#container { width:850px; /* LA SOLUZIONE */ height:550px; /* LA SOLUZIONE */ margin: 20px auto 20px auto; /* Questa dichiarazione serve per centrare la <div>! */ padding:5px; text-align:left; background: transparent url('sfondo-centrale.gif') no-repeat scroll center 5px; border:3px solid #000000; } Guarda cosa ti ho scritto alla voce margin... pollonia ha scritto:scrivi che è un esempio....per cui non posso copiarlo nel mio codice? Puoi anche copiarlo, a patto che cambi gli URL delle immagini, sennò non funziona! pollonia ha scritto:ti posto quì direttamente il mio codice con le impostazioni della mia pagina
così si capisce meglio,e magari può servire a qualcun'altro! Rimango in attesa. Ciao!
|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
questo è il codice... c'è uno sfondo poi ho inserito un div e ho richiamato all'interno l'immagine e questa è spostata sulla sinistra (mentre dovrebbe stare centrata...) <!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"> <!-- body { background-image: url(sfondo%20prova.jpg); background-repeat: repeat; } #apDiv1 { position:absolute; left:223px; top:11px; width:850px; height:550px; z-index:1; } --> </style></head> <body> <div id="apDiv1"><img src="immagine prova.jpg" width="1024" height="768" /></div> </body> </html> ho provato ad inserirci il codice che hai scritto tu...ma non succede niente! probabilmente non lo inserisco nel posto giusto. un'ultima cosa...mi potresti spiegare la differenza tra "div" e "div pa" io uso di solito il "div pa" poi magari sbaglio... grazie ciao
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Per i div PA vedi qui: http://help.adobe.com/it_IT/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7e14a.htmlMi pare però che ti stia infognando con i codici. Per avere un'immagine centrata basta questo codice (è un esempio): <div style="text-align: center;"><img style="width: 538px; height: 422px;" alt="" src="cartella/immagine.jpg"></div> Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
mi sà che hai ragione! stò diventando matta con il codice (certo che voi siete dei geni a capirlo ;) ) ma d'altronde, se non lo capisci non fai niente, solo con la grafica come stò facendo io non risolvo nulla... non stò risolvendo niente...l'immagine stà sempre sulla sinistra e se si centra, inserendo il vostro codice...e andando poi a impostare il monitor a 1024 in fondo c'è la barra di scorrimento  uff...non capisco dove sbaglio!! ciao
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Ciao pollonia! Mi spiace, ma questa volta devo darti una tiratina di orecchi: non mi hai dato molto retta!  Di tutte le cose che ti avevo scritto non vedo traccia nel codice che hai postato....  Riproviamo: Code:<!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"> <!-- body { background-image: url('sfondo_prova.jpg'); background-repeat: repeat; } #apDiv1 { width:???px; height:???px; margin: 20px auto 20px auto; /* Questa dichiarazione serve per centrare la <div>! */ padding:5px; background: transparent url('immagine_prova.jpg') no-repeat scroll center 5px; } --> </style></head> <body> <div id="apDiv1"></div> </body> </html> Per prima cosa, rinomina i file immagine inserendo gli underscore al posto degli spazi. Mi ero poi premurato di dirti che il background di una <div> interna al <body> deve essere 900 / 950 px, non già di suo 1024! Inoltre, se dai a una <div> un posizionamento assoulto (come avevi scritto: position:absolute;) ogni browser interpreterà il posizionamento a suo modo, tanto più se dai come istruzione left:223px;, che - come sai - significa " posiziona a 223px dal margine sinistro"... Ancora: dove stanno le istruzioni per margin?!?!? Per concludere: ridimensiona la tua "immagine_prova.jpg" a 900 / 950 px di larghezza, riprova con questo nuovo codice che ti ho postato sostituendo a width:???px; e height:???px; la dimensione di "immagine_prova.jpg" (dopo appunto averla ridimensionata). Se hai dubbi, siamo qua. A presto.
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Pollonia, ti lascio nelle abili mani di Wubullo; non voler però fare tutto e subito.
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 10/15/2010
Posts: 68
|
grazie ragazzi per la pazienza... ;) wubullo... nel codice che ti ho postato non erano presenti le tue modifiche, ma solo le mie operazioni basi,cioè! impostazione dello sfondo, creazione del div e inserimento dell'immagine nel suo interno...scusami, non te l'avevo specificato ad ogni modo...riprovo! ;) ecofive....tranquì,non ho mai preteso di fare tutto subito,pensa... che a questo progetto ci stò lavorando gia da due anni....più calma di così!! :) e se sono ancora dietro è per merito delle persone come voi che mi seguono e mi aiutano,altrimenti io avrei già mollato da tempo ;) mi stò rendendo conto che è un progetto enorme e complicato da seguire...però,per quanto difficile sia, mi appassiona e mi và bene così...non ho fretta! ;) vi faccio sapere! ciao
|
|
|
Guest |