Testo fisso in immagine centrata. bella questione

[Nuclear]

Ciao ragazzi.

Eccovi il mio problema:
devo fare una sito web . Una mia amica, geniale in grafica, mi ha fatto 2 jpg di come impostare graficamente il sito.
In queste jpg c'è tutta l'impostazione grafica: tasti, logo, ecc. Tutto in un unica immagine.
ora cosa ho fatto:
attraverso un rinvio ad un foglio css esterno ho inserito quest'immagine come sfondo della pagina html. immagine Centrata e fixed.
figata fin qua
e qui inizian i problemi:
io devo inserire i vari testi e link in determinate parti dell'immagine. ad esempio: nell 'immagine di sfondo ora ho disegnati 2 pulsanti e voglio inserire del testo in questi 2 pulsanti.
Bene,
ho provato a inserire tabelle, pulsanti o semplice testo, ma ogni volta che apro la pagine con un browser mi sballa i testi, in quanto centra l'immagine e non i testi, che mantengono una posizione assoluta.

Insomma: vorrei ancorare dei testi in posizioni specifiche dell'immagine di sfondo, in modo che rimangano inchiodati dove le posiziono, al di là del browser o della risoluzione con cui visualizzo la pagina.

Qualche super esperto è in grado di darmi una mano?

Grazie mille

[Myaku]

credo che nessun super esperto senza vedere cosa stai combinando possa aiutarti più di tanto.
Comunque, da quanto scrivi ho notato due cose che non vanno bene:
1. non usare un'immagine unica. costruisci il layout "componendo" le varie parti della grafica
2. non usare le tabelle per il layout

Detto questo, posta il link della pagina, oppure il codice e uno screenshot della visualizzazione.

Cyà

[Mich_]

Stai sbagliando impostazione (secondo me e secondo molte persone che frequentano questa stanza).

C'e` un dibattito sempre aperto (ricordo un articolo di <edit> qualche giorno fa), se sia meglio partire dall'impostazione grafica o dalla marcatura per realizzare una pagina/sito Web.

Ad ogni modo, sia che parti dalla grafica che dalla marcatura, devi fare le cose per bene.
Se usi una immagine per lo sfondo e vuoi inserirci tutto il resto, fai una fatica bestiale, e poi il risultato rimane per pochi intimi (quelli che hanno lo stesso brwoser tuo, la stessa risluozione dello schermo): gli altri vedranno porcherie.

Invece puoi usare l'idea grafica, ritagliare gli elementi grafici originali, riprodurre con sfondi gli altri, e realizzare la composizione tramite i CSS.
Ma e` IMPORTANTE che alla base ci sia la marcatura corretta. Altrimenti sei daccapo con browser diversi e mal di testa costanti.

[fcaldera]

premesso che quello che stai facendo non è del tutto corretto, dovresti provare ad inserire quello sfondo in un contenitore generico (un div) e sarà quest'ultimo ad essere posizionato rispetto alla pagina.

Inoltre sempre impostando position: relative al contenitore, potrai dare position: absolute a tutto ciò che vi è contenuto, impostando così i riferimenti rispetto al div e non all'intera finestra.

Di fatto

- Se usi uno sfondo unico perderesti la possibilità di ridimensionare il testo mantenendo il layout coerente, obbligando l'utente a scaricare un'immagine potenzialmente di grandi dimensioni.
- Se usi tabelle per impaginare il contenuto crei codice ridondante e semanticamente errato.
- Se fai uso di posizionamenti assoluti potresti avere diversi problemi (es. sovrapposizione di elementi)


La cosa migliore sarebbe ovviamente suddividere la pagina in blocchi più piccoli e ritagliare gli elementi grafici in accordo. Il tutto senza tabelle.

[Nuclear]

Grazie ragazzi della risposta. siete stati gentilissimi

mi sembrate tutti concordare sul fatto che sto facendo una cazzata... VVoVe:

quindi, da quanto capisco è meglio spezzettare l'immagine di sfondo in varie parti.

ma nella pratica come posso fare? cioè devo dividere l'immagine secondo che criterio?
in tutte le sezioni su cui porrò del testo (ad esempio se c'è un tasto, taglio il tasto e lo salvo come immagine isolata)?

divisa l'immagine poi come posso fare a comporla? :master:

Grazie mille ancora di tutto!

[Myaku]

Originariamente inviato da Nuclear
ma nella pratica come posso fare? cioè devo dividere l'immagine secondo che criterio?
in tutte le sezioni su cui porrò del testo (ad esempio se c'è un tasto, taglio il tasto e lo salvo come immagine isolata)?

il modo in cui sezioni la grafica dipende dal layout stesso. Non c'è una regola generale. Però, il linea di massima, se hai un bottone lo salvi come immagine a sè stante

divisa l'immagine poi come posso fare a comporla? :master:

lavori di css. Ma anche qui, non è che ti si può dare una regola "generale", dipende dal layout. Ovviamente, questo presuppone che tu ci prenda un attimo confidenza studiando un po' i fogli di stile. Puoi iniziare dalle guide qui su html.it, e dalle referenze/esempi che trovi sul sito del w3c.

[Nuclear]

Grazie mille