Buongiorno a tutti!
Sto cercando di riprodurre un bordo intorno a un sito che sto facendo in Wordpress,
la difficoltà è che il bordo mi servirebbe fisso e su tutti e 4 i lati della finestra, anche durante lo scroll della pagina.
Qualcuno riesce ad aiutarmi?
Vi ringrazio tutti infinitamente e vi saluto!
Ciao, difficile risponderti in maniera mirata, non è chiaro quale sia il contesto e il reale utilizzo di ciò che descrivi.
Questo bordo ha uno scopo funzionale o è solo uno sghiribizzo ornamentale?
Il contenuto scorre (o può scorrere) dentro un contenitore che non sia l'intero <body> o <html>, così da poter limitare le dimensioni a quelle del viewport?
Puoi postare un link del sito/pagina di cui parli, così che si possa verificare come intervenire?
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ciao KillerWirm, davvero grazie infinite per l'interessamento!Originariamente inviata da KillerWorm
Il bordo avrà solo uno scopo ornamentale, ti lascio un link come reference per farmi capire: https://www.pasticceriamarchesi.com/eu/it.html
Ancora mille grazie!!
Ok, ho visto.
Non so se hai già apportato delle modifiche ma vedo che già così hai una sorta di bordo fisso attorno alla finestra, con il colore beige di fondo; in parte dato da un padding e in parte (inel limite basso) dato da un elemento fisso.
Fammi capire se hai per caso già risolto oppure quale risultato vorresti ottenere di preciso.
EDIT:
ho capito ora che quello è l'effetto che vuoi ottenereti lascio un link come reference
Prova intanto ad analizzare quella pagina attraverso l'ispezione degli elementi (F12 da tastiera o attraverso il menu contestuale facendo click dx sugli elementi) per capire come è stato creato quell'effetto.
Bisogna poi vedere se nel tuo caso si possa applicare una cosa simile.
Intanto dai uno sguardo, poi vediamo come si può elaborare la cosa.
Ultima modifica di KillerWorm; 21-03-2022 a 17:59
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie ancora KillerWorm
Avevo già provato a vedere con iperseleziona ma su quella pagina sembra che abbiamo aggiunto solo un pò di padding al body..
Io sto provando invece qualcosa del genere:
Sia aggiungendo il padding che il mio codice il risultato non cambia, cioè aggiunge il bordo a tutto il sito ma bisogna scorrere per visualizzarlo sul lato in bassocodice HTML:#page{ border-style:solid; border-width:20px; border-color:#b4c1de;}
Certo ma come ho indicato nel post precedente, il bordo del lato basso è creato da un elemento fisso; in sostanza hanno usato un div opportunamente dimensionato e a cui hanno applicato position:fixed e bottom:0. Fai "ispeziona" su quel bordo basso e vedi le regole CSS che sono state impostate.ma bisogna scorrere per visualizzarlo sul lato in basso
Puoi notare che gli viene applicata questa regola:
Il position:fixed infatti fa in modo di posizionare l'elemento in relazione alla finestra.codice:.Footer .footer--border { height: 10px; background-color: inherit; width: 100%; position: fixed; bottom: 0px; left: 0px; z-index: 2; }
Chiaramente anche per il bordo alto vale la stessa cosa. Puoi notare infatti che la parte alta è stata impostata sempre come fixed.
Questa la regola che hanno usato:
Chiaramente qui sono state applicate varie proprietà per determinare opportunamente la dimensione e la posizione.codice:.Header .header-wrapper { background-color: var(--pmn-main-bg); position: fixed; left: 10px; z-index: 300; width: calc(100% - 20px); top: 0; height: 56px; display: flex; justify-content: space-between; align-items: center; }
Nel tuo caso bisognerebbe vedere il contesto per capire come meglio puoi intervenire.
Come suggerito da Vincent.Zeno può essere utile anche applicare opportunamente il box-sizing in modo da considerare bordi e padding nel calcolo delle dimensioni.
Fai magari qualche altra prova alla luce di quanto indicato.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando
