Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2006
    Messaggi
    41

    Oggetto non ripetuto tramite valore : repeat-x;

    Un saluto a tutti di seguito posto link della pagina oggetto delle domande che sottoporro :

    http://canovaccio.altervista.org/Sito_2/Esercizio.htm

    Domande :

    1) Come potrete notare ho inserito nella pagina htm l'id top con nidificati altri due div red e red_2 sapete spiegarmi perché nel css nella proprietà red_2 non riesco ad ottenere la ripetizione dello slice e per ottenerlo devo inserire un valore di width del 91%se inserisco 100% l'immagine viene sfasata e traslata sotto ma non basterebbe il valore repeat-x come inserito nella proprietà background -
    Probabilmente commetto un errore madornale ma se notate però la dichiarazione del div #blur il valore repeat-y nella proprietà background mi consente
    di ottenere la ripetizione verticale dello slice -

    2) Ho inserito nel tag <head> la stringa relativa all'inserimento di una favicon nella barra del titolo - sapete dirmi perché la visualizzo solo dopo aver caricato
    la pagine nel mi spazio host mentre in locale prima di caricarla non la vedo (è solo una pura e semplice curiosità) -

    3) Potete controllare se tutti i meta tag inseriti sono corretti se alcuni sono superflui o se ci sono degli errori -

    Come sempre Vi ringrazio tutti anticipatamente attendo vostra replica e vi saluto tutti

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, rispondo ai 3 punti anche se l'oggetto in discussione riguarda giusto il punto 1.

    1.
    Puoi risolvere in diversi e svariati modi ma ci vorrebbe un wikipedia per spiegarti nel dettaglio quali sono le variabili in gioco e come poter gestire al meglio la cosa. Mi limito a darti qualche indicazione e proporti una possibile soluzione con ciò che hai già sviluppato.

    Il tutto gira attorno al "box model CSS".
    In sostanza un elemento block (come un semplice div) di norma si estende per il 100% del suo contenitore. Applicando però il float, questa caratteristica viene "persa", per cui il div collassa riducendosi in base al suo contenuto.

    Ora, l'approccio dei due div usati solo per inserire quella banda puramente estetica, a me non piace molto; piuttosto andrei a risolvere in diversi altri modi, ad esempio con dei background multipli o con degli pseudo-elementi. Ad ogni modo, se mantieni quei due div, puoi comunque risolvere calcolandoti opportunamente gli ingombri.

    Nota che quel tuo 91% non va comunque bene se ad esempio si andasse a ridurre la larghezza della finestra del browser. Il problema resterebbe comunque.

    Calcolando che la width del primo div è 108px e che i margini orizzontali sono 0px e 25px, la loro somma fa esattamente 133px. Questo è il valore che dovresti togliere al 100% del secondo div.

    Per la proprietà width del secondo div puoi quindi usare la funzione calc() in questo modo:
    codice:
    width: calc(100% - 133px);
    Questo dovrebbe essere sufficiente per risolvere ma, ripeto, potrebbero esserci mille altri modi più o meno adeguati.

    Aggiungo comunque: per ulteriori informazioni riguardo il box model e argomenti annessi, può esserti utile consultare i link utili CSS se già non lo hai fatto. Tra i primi capitoli puoi trovare molti riferimenti a guide di base che spiegano questi e altri concetti fondamentali.

    2.
    Ho provato con attuali versioni di FF e CH, il problema non si presenta, mentre lo noto con Edge e IE11.

    Personalmente non so dirti quali siano di preciso le cause ma so che il problema è relativo ad alcuni browser (IE tra tutti) e molti hanno suggerito/provato svariati workaround che, da quel che ho letto, non funzionano comunque o funzionano in parte.

    Posso giusto consigliarti di fare qualche gugleata del tipo: "favicon not showing locally"

    Io, dalle poche ricerche che ho fatto, non ho trovato nulla di ufficiale ma giusto svariate discussioni; qui alcune:
    Favicon NOT working on Edge
    local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

    3.
    Per verificare se il markup e/o il codice CSS è valido, ti basta usare un validatore; ce ne sono diversi online (vedi al capitolo 5 dei link utili CSS, sotto la voce "Validatori"). Una prima analisi puoi quindi farla tu stesso, ad esempio con questo validatore: https://validator.w3.org/nu/?doc=htt...FEsercizio.htm

    In effetti ci sono alcuni errore, direi comunque "minimi" perché non influiscono sull'aspetto visivo del layout, però è sempre bene abituarsi a correggere qualunque errore.

    Direi inoltre che molti meta-tag che hai inserito sono superflui; mi limito però solo a questa osservazione perché bisognerebbe comunque analizzare l'elaborato all'interno del suo contesto di utilizzo per poter comprendere e valutare ciò che può essere ragionevole adoperare...

    [MOD]
    ...ma soprattutto si andrebbe off-topic; infatti abbiamo già messo troppa carne al fuoco. La regola d'oro è "una discussione <=> un argomento"; meglio non uscire fuori dall'oggetto in questione, più di quanto già ho fatto io rispondendo a questi altri due punti.

    Tra l'altro, questi ultimi due punti non riguardano nello specifico il CSS; per cui (senza offesa) se ritieni opportuno chiedere ulteriore aiuto riguardo questi o altri punti non inerenti l'oggetto della discussione, ti invito ad aprire delle eventuali nuove e specifiche discussioni nel/nei forum più appropriato/i. Grazie.

    Buona domenica e buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2006
    Messaggi
    41
    Ciao Killerworm e grazie perfetto la dritta del tuo valore ha messo le tutte le cose a posto -

    Per le apertura di nuovi topic hai ragione era molto che non mi connettevo al forum di html.it -

    Buona giornata -

  4. #4
    Utente di HTML.it
    Registrato dal
    Aug 2006
    Messaggi
    41
    Una cosa volevo però sottolineare inserendo proprietà e valore cosi :

    codice:
    .red_2 {
        background: url(Images/Red_line_little.png);
        width: calc(100% - 133px);
        height:50px;
        float:left;
        margin:10px 0 10px 0;
    }
    Ometto il valore repeat-x nella proprietà background quindi la slice Red_line_little.png non essendo ripetuta viene
    allargata e quindi perdere risoluzione cioè dovessi farlo con una slice più grande e complessa pur essendo a 90dpi
    anche su schermo si dovrebbe vedere una perdita di qualità cosa che invece repeat-x garantisce ripetendo l'immagine
    in orizzontale - sai per caso indicarmi una soluzione alternativa omettendo float e ripristinando repeat-x

    Grazie -
    Ultima modifica di KillerWorm; 12-08-2018 a 19:34 Motivo: tag CODE

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao Killerworm e grazie perfetto la dritta del tuo valore ha messo le tutte le cose a posto -
    Bene

    Per le apertura di nuovi topic hai ragione era molto che non mi connettevo al forum di html.it -
    Capisco, in effetti ho visto ora che la tua ultima visita è stata circa 4 anni fa.
    Consiglio allora di dare una spolverata al regolamento di sezione tra le discussioni in rilievo

    [Mod]
    Quando posti del codice è bene inserirlo tra gli appositi tag [CODE][/CODE] così che il testo del tuo messaggio risulti più leggibile/comprensibile. Per ora correggo io ma fai attenzione in futuro. Grazie.


    Ometto il valore repeat-x nella proprietà background quindi la slice Red_line_little.png non essendo ripetuta viene
    allargata e quindi perdere risoluzione cioè dovessi farlo con una slice più grande e complessa pur essendo a 90dpi
    anche su schermo si dovrebbe vedere una perdita di qualità cosa che invece repeat-x garantisce ripetendo l'immagine
    in orizzontale - sai per caso indicarmi una soluzione alternativa omettendo float e ripristinando repeat-x
    Potresti ometterlo oppure specificarlo ma nel tuo caso il problema non sussiste.

    In realtà non avviene nessun "allungamento" a meno che non vai a modificare la proprietà background-size. L'immagine in background è comunque ripetuta anche se ometti repeat-x.

    Il valore di default per background-repeat è repeat, per cui l'immagine, di norma, resterà delle dimensioni originali se ometti il valore repeat-x, e sarà comunque ripetuta sia in orizzontale che verticale.

    Nel tuo caso, dal momento che l'immagine è alta 50px e lo stesso il tuo div, vedrai che si ripeterà comunque in orizzontale.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Utente di HTML.it
    Registrato dal
    Aug 2006
    Messaggi
    41
    Perfetto grazie mille ………….

  7. #7
    Utente di HTML.it
    Registrato dal
    Aug 2006
    Messaggi
    41
    Un saluto anche se il thread aperto ha risolto il problema avrei la necessita di aprirne uno nuovo in merito ad una mia richiesta su cosa studiare, che linguaggi prioritari approfondire per poter avere in mano il mestiere di web master, ho dato un occhiata e nel menu non ho trovato argomenti pertinenti potete darmi una dritta su dove aprirlo oppure rispondere direttamente qui - attualmente ho buone competenze in : html, css, grafica raster e vettoriale - grazie

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    [Mod]
    Ciao, la regola d'oro è "un argomento, una discussione", puoi aprire in off-topic, dovresti anche trovare lì qualche discussione di qualche utente che si è posto i tuoi stessi dubbi. Qui chiudo.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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 © 2024 vBulletin Solutions, Inc. All rights reserved.