Pagina 2 di 3 primaprima 1 2 3 ultimoultimo
Visualizzazione dei risultati da 11 a 20 su 29
  1. #11
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    Dunque, dunque... Innanzitutto, per rispondere alle tue domande:
    1) nel div ci stanno il testo title+description. Il position:absolute di #home-image > div collassa tutto il testo, ma dove altro potrei metterlo se il template è fatto così.
    2) la forma contratta del valore cover l'ho vista su quasi tutti i tutorial, uno per esempio è questo.
    Altri suggeriscono di mettere uno slash come no-repeat 50% fixed / cover ma non vedo nessun cambiamento.

    Ho poi scoperto che c'è una classe presa da bootstrap.min.css e se tolgo width:100px allora l'immagine rimane fissa. Non si ridimensiona se responsive ma almeno copre l'intero spazio a disposizione. Non ci interessa (dato il risultato) ma non potrebbe creare un conflitto?

    ...non ci sto arrivando :S

  2. #12
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    1) nel div ci stanno il testo title+description. Il position:absolute di #home-image > div collassa tutto il testo, ma dove altro potrei metterlo se il template è fatto così.
    Se il template è fatto così non discuto. Mi pareva solo strano che in un elemento nominato #home-image ci fosse altra roba che non fosse un immagine. In questo caso prova a togliere il position:absolute per quegli elementi che ci stanno dentro; verifica quindi che il div non collassi.
    2) la forma contratta del valore cover l'ho vista su quasi tutti i tutorial, uno per esempio è questo.
    Sei scusato allora; ad ogni modo quel tutorial riporta una notazione errata:
    codice:
    body {
      background: url(background-photo.jpg) center center cover no-repeat fixed;
    }
    Questo codice infatti non non è valido; puoi verificarlo tramite la console del tuo browser e tramite il validatore, come già ti ho consigliato.

    Altri suggeriscono di mettere uno slash come no-repeat 50% fixed / cover ma non vedo nessun cambiamento.
    Non vedi nessun cambiamento perché anche questo codice non è valido. Leggi bene cosa suggeriscono quegli altri.
    Una sintassi corretta potrebbe essere tuttalpiù questa:
    codice:
    no-repeat 50% / cover fixed
    Infatti per creare la forma contratta si devono accoppiare le sotto-proprietà background-position e background-size (esattamente queste due) separando i valori con uno slash.

    Ho poi scoperto che c'è una classe presa da bootstrap.min.css e se tolgo width:100px allora l'immagine rimane fissa. Non si ridimensiona se responsive ma almeno copre l'intero spazio a disposizione. Non ci interessa (dato il risultato) ma non potrebbe creare un conflitto?
    Non so, ma prova a seguire quanto indicato per i precedenti punti; vedi cosa ne vien fuori.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #13
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    Come ti dicevo, togliere position:absolute dal div mi toglie completamente l'immagine. Lavorare poi sul testo è inutile, perchè vivono di vita propria. Quindi non è un problema di posizioni ma di ridimensionamento.

    Il css è questo, e la notazione background-size l'ho modificata in tutti i modi, ma non cambia il risultato:
    codice:
    #home-image > div {position:absolute;width:100%;padding-top:12%;top:0;}
    #home-image img-responsive {background:url('airplane.jpg') center center cover no-repeat fixed;}
    @media only screen and (max-width:767px) {#home-image img-responsive {background-image:url('airplane.jpg');}}
    Sto anche seguendo questo tutorial.
    Sei sicuro che tu vedi la soluzione?
    Ultima modifica di stardom; 30-01-2019 a 20:48

  4. #14
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    Come ti dicevo, togliere position:absolute dal div mi toglie completamente l'immagine.
    No, gli elementi dentro il div #home-image NON devono essere absolute perché altrimenti il div collassa, cioè il suo ingombro si azzera e gli elementi successivi vanno a coprire ciò che sta dentro il div stesso. Dell'immagine (l'elemento <img>) non ci può fregar di meno dal momento che non devi usare un elemento <img> ma devi impostare l'immagine stessa come background di quel div. A maggior ragione il div non deve collassare, altrimenti il background (e quindi l'immagine messa come background) non si vedrebbe.

    Togli quindi quel position:absolute.

    Il css è questo, e la notazione background-size l'ho modificata in tutti i modi, ma non cambia il risultato:
    [...]
    #home-image img-responsive {background:url('airplane.jpg') center center cover no-repeat fixed;}
    1) Continui a fare lo stesso errore; te lo ripeto in caratteri cubitali: VA MESSO UNO SLASH TRA I VALORI DI BACKGROUND-POSITION E BACKGROUND-SIZE

    2) Che roba è img-responsive? Se fosse una classe ci andrebbe un punto prima del nome (#home-image .img-responsive). Ad ogni modo quella classe non ci va per niente, tant'è che l'elemento <img> (a cui fa riferimento tale classe) va eliminato dal codice HTML. Il background con l'immagine devi applicarlo direttamente al div contenitore, cioè all'elemento #home-image

    3) Occhio al percorso dell'immagine, se usi un percorso relativo e il css sta dentro un file esterno, devi considerare che quel percorso è relativo alla cartella in cui si trova lo stesso file css. Vedi qualche guida, qui un articolo.

    Sei sicuro che tu vedi la soluzione?


    Ti dico esattamente cosa devi fare:

    - Elimina l'elemento <img> dal tuo HTML (puoi anche lasciarlo commentato come hai già fatto):
    codice HTML:
    <div class="" id="home-image">
        <!-- <img class="img-responsive" src="wp-content/themes/globo-child/assets/img/airplane.jpg" alt="elicottero homepage" /> -->
        <div>...</div>
    </div>
    .
    - Nel file style.css alla riga 56 trovi questa roba:
    codice:
    #home-image > div {
        position: absolute;
        width: 100%;
        padding-top: 12%;
        top: 0;
    }
    .
    Rimuovi il position come già ti ho spiegato più volte. A quel punto puoi anche rimuovere top:0.
    In sostanza sarà:
    codice:
    #home-image > div {
        width: 100%;
        padding-top: 12%;
    }
    .
    - Aggiungi una nuova regola per applicare il background al div in questione:
    codice:
    #home-image {
        background: url(assets/img/airplane.jpg) no-repeat center / cover;
    }
    .
    Il gioco è fatto; vedi se funziona... se non funziona rileggi bene le indicazioni che ho indicato qui.

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #15
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    innanzitutto ti ringrazio per la pazienza... stavo anche investigando alcune tags di html5, come la "contain", e mi davano risultati interessanti.
    Tornando alle modifiche che mi hai suggerito, l'immagine ora fa il suo dovere di ridimensionarsi se responsive, ma si è andato a rompere qualcosa: l'immagine stessa non riempie più lo schermo, e quindi crea uno spazio sopra la barra menu.

    vorrei solo realizzare questo: immagine interamente adattabile a qualsiasi altezza/larghezza
    Ultima modifica di stardom; 30-01-2019 a 23:28

  6. #16
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    innanzitutto ti ringrazio per la pazienza...
    Figurati, è difficile ma cerco di tenermi in allenamento

    ma si è andato a rompere qualcosa: l'immagine stessa non riempie più lo schermo, e quindi crea uno spazio sopra la barra menu.
    Ho dato un rapido sguardo, vedo lo spazio con FireFox e con Edge ma non lo vedo con Chrome. Posso pensare a qualche regola interpretata diversamente dai vari browser o (generalmente il caso più comune) qualche pasticcio nel codice html che si ripercuote quindi sulla visualizzazione in modo diverso a seconda di come i vari browser cercano di rattoppare le falle.

    Provo ad approfondire e cerco di capire da cosa può dipendere.



    EDIT:

    vorrei solo realizzare questo:
    Credimi, e quello a cui stiamo cercando di arrivare fin dall'inizio di questa discussione.
    Ultima modifica di KillerWorm; 30-01-2019 a 23:54
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #17
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    E' un problema di alcune caratteristiche del box-model che differiscono da browser a browser. La causa è dovuta al margine inferiore dell'elemento <h2> che sta dentro quel div.
    Alcuni browser (come FF e Edge) normalmente estendono i margini oltre i limiti stessi degli elementi genitori. Nel tuo caso, essendo <h2> l'ultimo elemento in basso al div contenitore, il suo margine viene trasmesso al div stesso che sposta verso il basso la barra menu.

    Chrome invece mantiene il margine all'interno del contenitore che si estende per soddisfare lo spazio richiesto.

    Basta quindi azzerare quel margine per h2.
    Alla riga 58 del file css trovi questo:
    codice:
    #home-image h2 {
        color: #5d5349;
        font-size: 48px;
        margin: 10px 0;
        position: relative;
        text-transform: uppercase;
        text-shadow: 2px 2px 3px #000;
    }
    modifica il margin in questo modo:
    codice:
    margin: 10px 0 0;
    il margine inferiore quindi è azzerato.

    Se ti serve comunque spostare verso l'alto quell'elemento h2 puoi usare un padding da applicare allo stesso h2 o al div contenitore.
    Una cosa del genere:
    codice:
    padding-bottom: 10px;
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  8. #18
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    ok Killer, quel piccolo margine mi riporta il menu adiacente alla fotografia, ma come ti spieghi che la stessa non riempie più lo schermo? Lì non è una questione di margin/padding. Mi rendo conto che l'html non è proprio perfetto, specialmente perchè incluso in un template, e questo può crearci problemi

  9. #19
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    Non riesco a seguirti; cosa intendi per "non riempie più lo schermo"?
    Parliamo sempre dell'elemento #home-image o di cosa?
    A me sembra stia funzionando come dovrebbe.
    Puoi chiarire?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  10. #20
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    ...si, scusami, avrei corretto la mia precedente ma il forum non riconosceva la password e bloccava l'account.

    Allora, l'immagine era a metà perchè non avevo ancora applicato il padding-bottom al h2 (anche se non mi piace avere un valore 550px) . Adesso funziona (e ti ringrazio veramente, era un problema che avevo da mesi) ma c'è un piccolo difetto (screenshot): l'immagine non si ridimensiona mantenendo le proporzioni, ma il viewport la sovrasta. Ed infatti il container sottostante l'immagine non mantiene la sua posizione, appunto sottostante, e gli va sopra.

    Io avrei bisogno che l'immagine si ridimensioni senza mai venir tagliata (come nell'esempio). Poi mi creo io le varie media-queries per i testi.
    Ultima modifica di stardom; 01-02-2019 a 22:35

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.