• User Attivo

    provo a spigartelo:

    se come sfondo utilizzo colore unico non ho problemi per qualsiasi risoluzione.

    se invece utilizzo una foto di risoluzione che so 7601100 , quando ho risoluzione 800600 o 1024*768 l'immagine rimane corretta visto che lo width e' dell' 80%.
    Quando invece porto la risoluzione dello schermo a 1280 o 1600 .. avendo impostato la width al 80% dello schermo mi trovo a un box del'80% di 1280 o di 1600 quindi per riempire il box la fotografia viene "raddoppiata" esempio: se ho la foto che rappresenta il david di michelangelo avro' un david + un'altro pezzo ottenendo un effetto terribile ! larghezza foto 760px + un'altro pezzo di foto per arrivare alla dimensione dell' 80%di 1280 o di 1600.

    Spero di essermi spiegato ....fammi sapere


  • Super User

    Ah ok perfetto 🙂

    Avrai per quello sfondo , all'interno del tuo css, l'attributo "background".
    Basta che vi aggiungi un valore che indichi allo sfondo di non ripetersi auomaticamente ne in orizzontale che verticale:

    
    "background: url( 'path/nomeimmagine') **no-repeat**;"
    
    ```Ciao!

  • User Attivo

    ciao Karedas

    grazie per l'aiuto io ho provato a mettere l'istruzione che mi hai dato , ed effettivamente funziona.... :)))

    Solamente che l'effetto e' agghiacciante !!! mica mi potresti aiutare per rendere migliore la pagina questo e l'indirizzo :
    hotelmasaccio.eu/florence_rooms.php

    In pratica oltre il problema della risoluzione , questo probema e' dato quando per esempio vado in IE (in alto)---pagina ---dimensione testo e inserisco "carattere molto grande" ...... a quel punto i caratteri diventano grandissimi.
    Il risultato e' che il testo prima andava sopra l'immagine di background che si raddoppiava mentre ora superano l'immagine e vanno sul background principale dando un'effetto d'insieme bruttissimo ... quindi cosa fare?!? ingrandisco ancora di piu' l'immagine ?!?! pero' rischio che venga un po' pidocchiosa come definizione, oppure c'e' un sistema che riconosca autamaticamente il tipo di risoluzione oppure il cambio di caratteri e automaticamente metta la foto con risoluzione piu' adatta ?!?!

    consigliami su cosa e' meglio fare....mi prosto e mi inginocchio....

    grazie
    alessandro


  • User Attivo

    aggiungo una piccola postilla, ho effettuato la modifica che mi hai detto per tutte le pagine (ogni pagina ha un css suo)
    il problema e' che in alcune pagine non mi mostra piu' l'immagine di sfondo !! non capisco come mai visto che il css per quel tratto e' uguale , se metto no-repeat non mi mostra l'immagine se levo l'istruzione me la mostra !!

    come mai !??! per favore prova a navigare dal link che ho dato cosi' sara' tutto piu' chiaro .

    grazie molte a tutti !


  • Super User

    Ciao wookie 🙂

    Allora vediamo di aiutarti:

    1.1

    Potresti aggiungere un colore di sfondo al background in modo che quando il testo supererà l'altezza della tua immagine (quella del david se ho capito bene) allora un colore andrà appunto sul background di quest'ultimo.

    Per fare questo potresti usare un colore simile a quello generale che ha lo sfondo con il David di M. (quell'azzurrino insomma) facendo tipo così:
    [html]
    background: #colore url(../david99.jpg) no-repeat scroll 0%;
    [/html]Al posto di ci va il codice alfanumerico che rappresenterà appunto il colore RGB (esempio nero è #000000) .

    Magari non sarà un effetto bellissimo però è l'unica soluzione a mio parere per uno sfondo delimitato come quello.

    **1.2

    **In alcune pagine non c'è lo sfondo perchè il div "center" - al quale è attribuito lo sfondo con il david - è collegato con il proprio ID ad un altro css chiamato "masaccio.css" che non ha nessun background tra gli attributi di quel div centrale.

    Io ho provato un attimo e mettendo come css "special.css" mi è tornato come le altre pagine - funzionante.

    Ciao!


  • User Attivo

    ciao Karedas

    ti ringrazio per le info !!

    1.2 sono riuscito a sistemarlo ora e' presente lo sfondo (si quello del david) in tutte le pagine !! yuhhuuu' !! e non si ripete piu' !! :1:

    1.1 per quanto riguarda il discorso colore si anche io immaginavo una cosa simile pero' non sapevo l'istruzione giusta quindi grazie molte, mi hai evitato di sfogliare 2 milioni di pagine prima di scovarla !!! :1:

    Pero' nella realta' per ottenere precisamente quello che volevo dai un'occhiata a questa pagina "rialtohotel.com/it/services.htm" se fai una prova come dicevo a cambiare i "caratteri" da piccoli a molto grandi vedrai la foto di sfondo che si rimpiccolisce o si ingrandisce ....questo sarebbe l'effetto che vorrei dare alle mie foto ma non so proprio come si possa fare .... forse usando tante foto con risoluzioni diverse ?!! ma poi come faccio a rendere "sensibile" il sistema in modo da rendersi conto dei cambiamenti !?!
    chiedo troppo sono forse tecniche troppo sofisticate?!?!


  • Super User

    La foto di sfondo in quel sito che hai linkato non si ridimensiona affatto 😄

    Semplicemente è stato impostato uno sfondo posizionato sul piede del contenitore del testo centrale e un colore che faccia da fondino la dove l'immagine non arriva a coprire l'interità del medesimo.
    Questo farà in modo che quando inserirai altro testo o appunto lo ridimensionerai tramite l'opzione del browser, questo si troverà sempre in basso rispetto a tutto il contenitore.

    Infatti puoi realizzare tutto questo così:
    [html]
    background: #99443C url('nomeimmagine') no-repeat bottom;
    [/html]Sta a te creare l'immagine dandogli uno sfondo di un colore e poi ripetere il codice alfanumerico quest'ultimo nel colore del background tra gli attributi del css. Stessa cosa farai nel tuo, semplicemente però aggiungendo "bottom" alla posizione del bg.

    Non so se mi sono spiegato in caso ti faccio un esempio reale sul tuo sito.

    Ciao!


  • User Attivo

    mhhh credo di si ....

    in pratica mi dici di utilizzare la tecnica del colore come dicevi qualche posto prima... pero' invece di metterla alla fine della foto dovrei metterla al'inizio in questo caso.
    Quindi se la risoluzione o il cambiamento di carattere impone di utilizzare piu' "schermo" si attiva la funzione e sopra mette colore e sotto l'immagine.
    nel caso la risouzione o il carattere e' corretto la funzione non si attiva ma viene solo l'immagine....

    be' non mi resta che provare....;)

    potrei eliminare anche la scritta rossa sull'immagine (in alto) che a parte nell'index in tutte le altre pagine non serve a nulla....e metterci colore...bo' vediamo se ci riesco....;))

    ora provo poi faccio vedere 🙂 se poi mi dai una dimostrazione accetto con piacere 🙂


  • Super User

    Si più o meno però il concetto è diverso.
    Dai un colore di sfondo tramite il codice alfanumerico a tutto il background. Tramite quell'attributo anche se un utente non vedrà le immagini per cause molteplici, il colore comunque sia farà sempre la sua parte sotto tutto il contenuto.
    Vedi tutto questo come se ci fossero dei livelli: il colore sul livello più basso , sopra e cioè al livello in primo piano sempre e comunque la tua immagine .

    Ciao facci sapere!


  • User Attivo

    accidenti alla pupazzola....io cio' provato ...ma mi sa' che ho sbagliato qualcosa oppure non viene proprio bene cosi' .....
    guarda un po' ho corretto questa pagina hotelmasaccio.eu/florence_cheapest.php

    In pratica e' si come dici te pero' da' problemi collaterali.... in pratica ho corretto questa istruzione cosi':
    background: #E1ECE8 url(../davidall.jpg) no-repeat bottom;
    pero':
    se metto caretteri da grande a molto grande l'effetto viene corretto .

    se metto caretteri medi o sotto ora l'immagine la crea dai piedi del david(bottom) a salire quindi piu' piccolo e' il carattere e meno schermo "prende" e mi tronca la testona o parte del corpo !! diventando in pratica quasi un'immagine pornografica visto cosa c'e' al centro del david ;)!!! :sad:
    Forse sarebbe il caso di fare all'incontrario !? come avevi suggerito all'inizio impostare il colore alla fine cosi' evito "stroncature" ?? anche se mi resta il dubbio di come gli altri programmatori (tipo l'esempio fatto prima) ci siano riusciti a mettere il colore in cima senza subire "troncature" nell'immagine.

    Un'altro dubbio atroce che mi e' venuto (niubbissimo) io ho creato un Css per ogni singola pagina del sito visto che diversi valori di div cambiano ....forse ho sbagliato ?! dovrei fare un un'unico css da utilizzare in tutte le pagine e cambiare solamente in html il nome dei div per renderli unici nel css ??(spero di essermi spiegato) .... io non l'ho fatto un unico Css perche' pensavo che cosi' rendevo pesante caricare la pagina attualmente visualizzata se doveva contnere anche istruzioni inutili al momento , e quindi ogni pagina si carica con il proprio css specifico..... pero' non vorrei fosse un'errore grossolano.

    edito: ho scritto insieme a karedes .... provo a correggere di nuovo secondo spiegazione


  • Super User

    Questo succede perchè l'altezza del tuo contenuto non è abbastanza per poter dare al contenitore un'altezza tale da mostare tutta la tua immagine.

    Fai così allora , invece che bottom metti "top" e l'immagine partirà dalla testa del contenitore così scendendo.


  • User Attivo

    si si avevo capito che dipendeva dal contenitore troppo piccolo , e' chiaro visto che va in base alla grandezza del testo...

    Ok credo che ora vada proprio bene e' carino ! !:))

    Comunque mi piacerebbe sapere come hanno fatto quelli dell'esempio a mettere lo sfondo ... e poi applicare sopra un'immagine partendo dal basso e riuscire a far in modo che il div sia sempre della grandezza dell'immagine stessa ... visto che a me la tagliava doveva tagliarla anche a loro no ??
    Sono curioso come una scimmia e voglio imparare ! ! 🙂

    e se qualcuno mi dice anche se un codice CSS diverso per ogni pagina html va bene ...oppure se sarebbe meglio utilizzare un'unico CSS per tutte le pagine...cosi' mi levo anche questo dubbio 😉 grazie :1:
    siete dei grandi ! KAREDAS MITO! 🙂


  • Super User

    No comunque ti sbagli anche loro utilizzano lo stesso procedimento solo che la tua immagine è alta ben *1300px *mentre la loro intorno ai 750px.

    Ovvio che il tuo contenuto dovrà essere più "ingombrante" per poter far si che l'immagine di fondo si visualizzi totalmente.
    Poi anche nel loro caso il problema si ripropone quando inversamente diminuiamo la grandezza del carattere (l'immagine si taglia).

    Il mio consiglio è quindi:

    • o riduci l'immagine
    • o crei uno spazio "virtuale" e vuoto in modo che anche con la diminuzione del carattere il tuo contenuto avrà sempre e comunque una certa altezza. Esempio:

    [HTML] #center{
    padding-bottom:30%;
    ...
    }[/HTML]

    Al posto della percentuale puoi usare altri valori.

      • Non usare una figura umana o improntata sul fatto che se ad essa manca una parte l'immagine possa apparire ridicola o insensata (nel tuo caso il tuo david diviene "pornografico" 😄 ).

    ** @**css diversi in più pagine.

    L'utilità e la funzionalità dei css esterni sta proprio nel fatto che si possono usare i soliti file più volte in più pagine creando così un lavoro più controllato, versatile e funzionale. Usare css diversi in più pagine lo consiglio unicamente quando ad esempio la pagina dei contatti ha all'interno un form. Se il foglio di stile per il form richiederà ad esempio 100-150 righe di attributi allora può essere utile fare ad esempio un form.css e aggiungerlo alla pagina dei contatti insieme al css di base.

    [HTML]<link rel="stylesheet" type="text/css" title="layout" href="style/layout.css" />
    <link rel="stylesheet" type="text/css" title="form" href="style/form.css" />
    [/HTML]

    Quindi bè , ti consiglio di sfruttare meno css possibili ^^


  • User Attivo

    1.1 Si l'immagine lo ridimensionata io appositamente a 1300 , visto che le mie pagine hanno molto testo ,di poter essere totalmente coperte dal background.
    Comunque ora ho capito la tua spiegazione grazie molte ne faro' tesoro.

    1.2 qui invece ancora non sono sicuro di aver capito.... l'esempio e' chiaro , pero' non capisco nel caso generale o specifico mio...quando dici"
    ti consiglio di sfruttare meno css possibili " non so se intendi meno istruzioni possibili oppure meno pagine caricate per ogni singola pagina html , o ancora meno pagine css nel sito e quindi uno unico e solo ?!

    per capirci esempio:

    Pagina Home ho un box diviso a 3 colonne quindi in css mettiamo ho colonSin, colonCent, colonDest dimensioni tutte del 33% di width

    Pagina 2 ho il solito box diviso in 2 colonne dove necessito di avere colonnSin 50% , colondest 50%

    Soluzioni:

    1)io attualmente creavo un CSS per l'home e un CSS per la pagina2 con le giuste % per ogni colonna
    nel mio specifico caso le istruzioni CSS fatto in questo modo sono di circa 140 righe

    2)creare un CSS unico per tutte le altre informazioni del sito poi creare #colonSin, colonDest, colonCent con 33%
    e poi
    #colonSin1, colonDest2 con 50% e in html rinominare le colonne per la pagina2

    In questo modo avro' un'unico CSS pero' molto piu' lungo rispetto alle 140 righe... visto che dovro' modificarlo in diversi punti per tutte le pagine

    Spero di essermi spiegato....:)