bellissimo!!. giacomo puoi mettere on line le slide del tuo progetto liquidlife? http://www.paitadesign.com/liquidlife/progetto.html

Il sito della mia tesi è online. Ti firmi Dario, ma ci conosciamo di persona?

Se ti riferisci al sito del progetto di tesi, no, è rimasto solo a livello di concept; per quanto riguarda le slide del progetto, non sono online, perché credo che la mia presentazione sia già sufficiente. Mi fa piacere che tu lo trovi interessante: ti occupi di siti web? O di progetti legati all’ambiente?

Ciaoo! ma come devo impostarla la foto (dimensione e risoluzione) che poi si adatterà al tipo di monitor? grazie mille…

ma non pesa troppo l’immagine a quella dimensione?? grazie ancora

Per il peso/qualità dell’immagine fai un po’ di prove: il mio era solo un esempio, vedi tu come impostare la qualità della jpg.
Per quanto riguarda la centratura degli elementi della pagina, ti conviene racchiuderli tutti in un div contenitore e assegnare ad esso questi stili per centrarlo in verticale e orizzontale:

#contenitore {
height:100px; /*qui ci metti l’altezza del tuo contenitore*/
width:100px;/*qui ci metti la larghezza del tuo contenitore*/
position:absolute; /*l’elemento è tolto del flusso naturale della pagina e posizionato in modo assoluto*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-top:-50px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/
left:50%; /*il bordo laterale sinistro dell’elemento si troverà al 50% della larghezza disponibile*/
margin-left:-50px; /*la metà dellla larghezza dell’elemento è tolta come margine sinistro per centrarlo*/
}

Così dovrebbe funzionare.
Ciao!

Ho messo il codice che ti ho indicato in una pagina di esempio. Prova a guardare qui: http://www.paitadesign.com/examples/div-centrato/esempio-div-centrato.html
Il div verde è sempre centrato rispetto al suo genitore, che è la pagina. Prova a ridimensionare il browser: il div sarà sempre nel centro.
Ciao!

Non tenere in considerazione la vista progettazione, usa DW solo come text-editor per il codice. Il risultato lo vedi nel bewser.
A presto. Ciao!

Ciao Francesco! Vedrai che di ora in ora diventerai sempre più esperto! Ecco una guida sommaria, con alcuni link utili. Per prima cosa, crea una nuova pagina HTML con Dreamweaver : Ctrl +N. Poi, nel pannello devi specificare la codifica dei caratteri (di solito UTF-8 oppure ISO 8859-1) e impostare il DOCTYPE delle tue pagine. Una volta creata la tua prima pagina HTML, inserisci nel tag head il collegamento al file CSS. Nel tag BODY, devi inserire il codice HTML.
Per tutti i miei tutorial ho inserito il codice CSS in pagina, pratica non ortodossa, e sconsigliabile come "modus operandi", ma adatta per le demo veloci del mio blog. A presto, ciao! Giac

Credo di aver capito: devi inserire i tuoi contenuti in un div posizionato relative o absolute (vedi risposta in questa pagina e link su come centrare un div).

Per quanto riguarda i behaviours, personalmente non li ho mai usati. Se vuoi incominciare a mettere degli effetti, ti consiglio una libreria Javascript esterna (se sei a digiuno anche di quella, leggiti il mio post di introduzione a jQuery e un po’ di informazioni su cosa puoi fare.).

Per i .png, infine, occhio alla compatibilità con IE6.

Valuta se le .png sono il formato adatto di immagine, oppure se potrebbero andare bene anche delle .gif o .jpeg.

Giac

Ciao Tiziano!
Ecco le risposte:

1. per posizionare i box sopra lo sfondo puoi fare come è stato fatto nel sito ringvemedia.com per gli elementi con id="menu" e id="cont". Sono posizionati absolute. Per funzionare correttamente devono avere height e width dichiarate, e si posizioneranno relativamente al primo genitore che sia relative o absolute. Per dare un occhio al codice, usa Firebug, è ottimo.

2. non vedo dove sia la differenza! Guarda il codice CSS del sito e controlla l’HTML con Firebug. L’immagine di sfondo è in pagina, non via CSS.

Spero di esserti stato di aiuto. Alla prossima.
Giac

Ciao!! questa volta ho un file swf di dimensioni 759px (larghezza) x 582 px però non riesco a centralo rispetto a tutti i monitor come faccio?? grazie mille!!

non è online ..se vuoi te lo posso inviare!

ok…

Documento senza titolo

<!–

Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.

<!–

swfobject.registerObject(“FlashID”);

html, body, #bg, #bg table, #bg td {
height:100%;
overflow:hidden;
width:100%;
}

#bg div {
height:200px;
left:0;
position:absolute;
top:0;
width:200%;
z-index: 1;
}

#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
z-index: 1;
}

#bg td {
text-align:left;
vertical-align:top;
z-index: 1;
}
#contenitore {
height:582px; /*qui ci metti l’altezza del tuo contenitore*/
width:759px;/*qui ci metti la larghezza del tuo contenitore*/
position:absolute; /*l’elemento è tolto del flusso naturale della pagina e posizionato in modo assoluto*/
top:50%; /*il bordo superiore dell’elemento si troverà al 50% dell’altezza disponibile*/
margin-top:-250px; /*la metà dell’altezza dell’elemento è tolta come margine superiore per centrarlo*/
left:50%; /*il bordo laterale sinistro dell’elemento si troverà al 50% della larghezza disponibile*/
margin-left:-250px;
z-index: 3;
}

#header {
float: left;
width: 545px;
position: relative;
height: 139px;
z-index: 3;
}

sono riuscito..non avevo calcolato la metà dell’oggetto da inserire nel margin-top e left..

grazie lo stesso!!!

ciao giacomo :)

prima di tutto grazie per le tue condivisioni in questo blog! cerca cerca vi sono approdata e mettendo insieme quello che consigli in questo e nel post sull’eliminare il tratteggio di un’area cliccabile spero di riuscire a risolvere la difficoltà che sto affrontando.

ti spiego: volevo creare un’intro/splash page per un sito, una semplice pagina bianca con solo un’immagine/logo al centro e sotto qualche riga di testa, il tutto che fungesse da link alla main page.

sto lavorando non DW ma direttamente con joomla. ho studiato html qualcosa come 15 anni fa e più tardi webmastering con DW ma poi non ci ho mai lavorato, per cui ora aver a che fare con un CMS e soprattutto con fogli CSS è tutto nuovo per me (ma anche.. appassionante ;)). ad ogni modo, sono riuscita a ottenere la mia pagina intro utilizzando un altro template che ho svuotato delle immagini che davano il layout grafico e ho ottenuto l’effetto voluto semplicemente mettendo quei contenuti in un articolo pubblicato sulla voce di menu corrispondente. ho risolto il problema degli URL (ora l’intro punta correttamente a “sito.ext” e immagine e testo linkano a “sito.ext/home”), ma effettivamente ero infastidita dall’effetto grafico dato dal box tratteggiato che compare una volta che ci si clicca sopra.

seguendo il tuo succitato articolo, proverò a inserire il parametro ‘outline:none’ per risolvere quell’aspetto, ma quando pensavo appunto a possibili soluzioni mi ero chiesta se per caso non avrei potuto ottenere questa semplice pagina di intro in modo più facile e pulito giusto inserendo un’immagine (posso benissimo metterci anche il testo già dentro) come background nel body della pagina. solo.. non sapevo come farlo!

leggendo ora questo post, spero di riuscire a farlo. solo, ho un paio di cose di cui vorrei essere certa: voglio infatti evitare che venga ridimensionata a seconda della finestra del browser (come invece avviene nella pagina d’esempio che hai postato, con la città di sfondo) perché si tratta nel mio caso in realtà solo di una immagine di media/piccola grandezza le cui dimensioni devono restare sempre fisse. e, dev’essere sempre centrata in pagina.

riguardo a questa seconda cosa, credo di aver capito dai vari interventi che basta settare in modo che venga mantenuta sempre a una distanza del 50% da sopra e sinistra.
ma, come fare invece per mantenere fisse le sue dimensioni, che parametri impostare? (immagino sia una domanda banale per chi lavora con i codici abitualmente, ma come detto per me invece è ancora tutto piuttosto nuovo)

anche, avresti voglia di dirmi anche già come rendere poi tutta l’area un link?

ti ringrazio molto se avrai modo di darmi consigli, perché mettere assieme tutte queste info da più fonti per ottenere poi del codice che funzioni mi crea un po’ di ansia! (ho paura di generare errori che poi magari mi creano ancora più difficoltà di soluzione..)

un caro saluto :)

ciao sto cercando di inserire in un sito una immagine come sfondo, e sto seguendo alla lettera il tuo esempio con il plug in jquery ma non funziona. Nella head io ho scritto questo:

$.backstretch(“imm/bg_image.jpg”);

body { background:url(imm/bg_image.jpg) fixed center top no-repeat; }

jQuery.each(jQuery.browser, function(i) {

if($.browser.msie && $.browser.version <= 6 )

{ /*Se il browser Ë uguale a IE6: Non fare niente*/ }

else

{ /*Altrimenti: Esegui il plugin*/

$.backstretch("imm/bg_image.jpg");}

})

ma l'immagine non mi viene visualizzata e mi compare il monitor bianco con la scritta :

jQuery.each ecc ecc…

come posso risolvere questo problema????

confido in un tuo consiglio

grazie paolo

Ciao Paolo, per usare il plugin “backstretch” devi sapere prima come inserire correttamente i CSS e il codice JavaScript. Segui i tutorial che ti ho indicato, poi prova di nuovo a utilizzare il plugin: vedrai che non avrai nessun problema. Ciao!

giacomo, grazie!

senz’altro leggerò i tutorial indicati e farò prove per trovare la soluzione adatta.

ancora grazie per questi tuoi interessanti e utili post, e per la tua cortesia e precisione nel rispondere!!

un caro saluto!

ps: nel frattempo sono cmq riuscita a usare anche l’outline :D

Ciao Cinzia, prova a mettere nel foglio di stile

overflow-x: hidden;

associato al contentore, nel tuo caso, credo sia il

body

. Ciao!

Il documento inserito nei commenti del blog non si vede: carica tutto online sul tuo spazio web e posta il link. Ciao!

purtroppo non inserisco in pubblico il mio lavoro finchè non è finito :)

posso inviare il codice alla mail che è presente quì sotto nel tuo blog?

ciao

mandato!

spero ci sia tutto!

ciao
Cinzia :)

Ciao Manuel! Allora, se ho capito bene la tua domanda è: “Quando inserire una immagine tramite CSS e quando invece inserirla in pagina”, giusto? Diciamo per prima cosa che i CSS servono sia per organizzare sia per definire lo stile del contenuto. Sono due cose diverse: nel primo caso mi servono per disporre i in pagina tutti quei contenuti che devono essere poter fruiti anche disattivando i fogli di stile. Ma essi servono anche per definire lo stile di presentazione dei contenuti stessi. Nel caso del post sull’immagine di sfondo, tutte le tecniche proposte utilizzano un’immagine in pagina resa scalabile tramite i CSS e/o con jQuery, dato che non è possibile adattare lo sfondo di un elemento tramite la proprietà background dei CSS. In questo caso, in effetti, viene utilizzato un elemento in pagina non in modo strutturale, ma per fini decorativi (anche se per il plugin di jQuery l’inserimento è gestito al caricamento della pagina, e non scritto direttamente in pagina). Spero di essere stato chiaro! A presto!