Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Modifica template: come abbassare altezza
Forum - HTML / CSS - Modifica template: come abbassare altezza

Avatar
calmabubbasst (Normal User)
Newbie


Messaggi: 5
Iscritto: 20/07/2022

Segnala al moderatore
Postato alle 8:54
Mercoledì, 20/07/2022
Ciao a tutti, stò modificando un template per adattarlo alle mie esigenze, sono partito da template perchè di html sò molto poco e cerco di arrangiarmi come posso, e di CSS ancora meno ... :(

In ogni caso, la faccenda è questa:

in questa pagina di prova https://www.nastri-trasportatori.net/Altrivideo52.html quello che vorrei ottenere è abbassare le altezze
"A" "B" "C" e "D"

Ho cercato in tutto il codice e fatte diverse prove (per quello che riuscivo) ma non sono stato in grado di capire chi è che comanda quelle altezze e come intervenire per ridurle a piacere ...

Sapreste aiutarmi?

link immagini abbassa1 e abbassa2 per vedere i punti "A" "B" "C" e "D"


https://ibb.co/M6PTcjn
https://ibb.co/b363kXY

[url=https://ibb.co/M6PTcjn][img]https://i.ibb.co/jR3Kyxh/abbassa-1.jpg[/img]
[url=https://ibb.co/b363kXY][img]https://i.ibb.co/Jdcd9H8/abbassa-2.jpg[/img]


calmabubbasst ha allegato un file: abbassa-1.JPG (62312 bytes)
Clicca qui per guardare l'immagine

Ultima modifica effettuata da calmabubbasst il 20/07/2022 alle 8:57
PM Quote
Avatar
AldoBaldo (Member)
Guru


Messaggi: 639
Iscritto: 08/01/2015

Segnala al moderatore
Postato alle 17:46
Mercoledì, 20/07/2022
Scusa la pigrizia, ma il listato della pagina è trabordante, scoraggia la lettura (infatti ho smesso dopo due minuti)!
Provo a buttar lì una risposta generica sperando che possa esserti comunque utile.

In genere le distanze (diciamo "i bordi") sia in css sia in html le trovi indicate come margin e padding. Con un po' di pazienza e di fortuna puoi provare a cercare i margin e i padding presenti nel codice e adattarli verificandoli ad ogni modifica, finché non trovi quelli giusti. Se i due minuti di lettura non mi han portato fuori strada, io comincerei l'indagine dal file...

https://www.nastri-trasportatori.net/style.css

Buona fortuna!


ATTENZIONE! Sono un hobbista e l'affidabilità delle mie conoscenze informatiche è molto limitata. Non prendere come esempio il codice che scrivo, perché non ho alcuna formazione accademica e rischieresti di apprendere pratiche controproducenti.
PM Quote
Avatar
calmabubbasst (Normal User)
Newbie


Messaggi: 5
Iscritto: 20/07/2022

Segnala al moderatore
Postato alle 20:45
Mercoledì, 20/07/2022
Testo quotato

Postato originariamente da AldoBaldo:

Scusa la pigrizia, ma il listato della pagina è trabordante, scoraggia la lettura (infatti ho smesso dopo due minuti)!
Provo a buttar lì una risposta generica sperando che possa esserti comunque utile.

In genere le distanze (diciamo "i bordi") sia in css sia in html le trovi indicate come margin e padding. Con un po' di pazienza e di fortuna puoi provare a cercare i margin e i padding presenti nel codice e adattarli verificandoli ad ogni modifica, finché non trovi quelli giusti. Se i due minuti di lettura non mi han portato fuori strada, io comincerei l'indagine dal file...

https://www.nastri-trasportatori.net/style.css

Buona fortuna!



Ciao @aldobaldo e grazie!
Nessuna pigrizia, grazie per lo spunto, vado alla ricerca - una cosa ti chiedo (visto che di html e css ne capisco davvero poco),
quella pagina presenta margini o bordi eccessivi, mentre le altre pagine del sito no (vedi anche solo la home index): metti che scopro che trovo che il margin "colpevole" è nel file css in riga 500 e che il suo valore è 100,
e io provo a dimezzare inserendo 50

Il mio dubbio è, non è che quel margin nel file css in riga 500, comanda i margini sia i margini di pagine index ma anche in quella che voglio modificare? Ovvero, non rischio di sistemare una pagina ma di rovinare tutte le altre?

C'è un modo per scoprirlo o l'unica è provare e al limite ripristinare?

Un grosso GRAZIE e spero di leggerti presto

PM Quote
Avatar
AldoBaldo (Member)
Guru


Messaggi: 639
Iscritto: 08/01/2015

Segnala al moderatore
Postato alle 9:39
Giovedì, 21/07/2022
Premessa: neppure io sono un "esperto", diciamo che la definizione più adatta sarebbe "smanettone".

Nell'attivarmi per risponderti ho riguardato la tua pagina web, e direi che hai già trovato la soluzione, giusto? Comunque sia, questa risposta potrebbe esserti utile in situazioni future, quindi te la do ugualmente.

Nel file altrivideo52.html alla riga 66 trovi questo tag:

Codice sorgente - presumibilmente Plain Text

  1. <link href="style.css" rel="stylesheet">



Un tag di questo genere chiede al browser di "includere" il file indicato nella procedura di composizione della pagina, come se il suo contenuto fosse scritto per esteso al posto del tag stesso.

Più avanti nello stesso file, trovi questa serie di righe:

Codice sorgente - presumibilmente HTML / CSS

  1. <div class="section_title">
  2.     <h2>Nuovi VIDEO</h2>
  3.     <p>
  4.         CF SYSTEM srl produce NASTRI TRASPORTATORI per ogni.. EDILVEYOR.
  5.         <br>Dapprima ci siamo dedicati alla conoscenza delle pec ... di trasportatore attuale.
  6.     </p>
  7. </div>



Questa è la parte che riguarda la formattazione del titolo. Nota che l'intero titolo è racchiuso entro un blocco div di classe section_title. Ci sono alte probabilità che la definizione delle caratteristiche di formattazione da impiegare per quella classe div si trovino nel file style.css, per cui si prova a cercare in quel file.

Il file stile.css contiene una valanga di informazioni per la formattazione, che l'autore ha intelligentemente pensato di suddividere in sezioni per facilitarne la consultazione (grazie! non è da tutti). Con una facile ricerca, fortunosamente si trovano subito diverse definizioni che riguardano section_title, a partire dalla riga 47:

Codice sorgente - presumibilmente Plain Text

  1. .section_title {
  2.     padding-top: 20px;
  3.     padding-bottom: 10px;
  4. }
  5. .section_title h2 {
  6.     text-transform: none;
  7.     text-align: center;
  8.     position: relative;
  9.     color: #333;
  10.     font-size: 30px;
  11.     font-weight: 400;
  12. }
  13. .section_title h2:after {
  14.     content: "";
  15.     position: absolute;
  16.     bottom: -20px;
  17.     width: 60px;
  18.     height: 1px;
  19.     background-color: #f39c12;
  20.     left: 50%;
  21.     margin-left: -30px;
  22. }
  23. .section_title p {
  24.     text-align: center;
  25.     margin-top: 45px;
  26.     color: #333;
  27.     font-size: 18px;
  28.     line-height: 28px;
  29.     font-weight: 300;
  30. }



Agendo qui puoi ottenere il risultato che cerchi e che, direi, hai già ottenuto.

Qualora si dovesse verificare la situazione che hai puntualizzato nella tua seconda domanda, ovvero che quelle definizioni agiscano anche in altri file .html che invece NON si vorrebbero modificare, mi vengono in mente due soluzioni:

1) creare un intero secondo file style_av52.css e modificare la riga 66 di Altrivideo52.html in questo modo:

Codice sorgente - presumibilmente Plain Text

  1. <link href="style_av52.css" rel="stylesheet">



Col che la tua pagina Altrivideo52.html sarà l'unica ad applicare le modifiche (a meno che tu includa style_altrivideo52.css anche in altri file .html).

2) modificare il file style.css creando nuove classi personalizzate, ad esempio section_title_av52, da sostituire, nel file Altrivideo52.html, alle classi section_title che siano le uniche che intendi modificare.

Codice sorgente - presumibilmente Plain Text

  1. .section_title {
  2.     padding-top: 20px;
  3.     padding-bottom: 10px;
  4. }
  5. .section_title h2 {
  6.     text-transform: none;
  7.     text-align: center;
  8.     position: relative;
  9.     color: #333;
  10.     font-size: 30px;
  11.     font-weight: 400;
  12. }
  13. .section_title_av52 {
  14.     padding-top: 200px;
  15.     padding-bottom: 100px;
  16. }
  17. .section_title_av52 h2 {
  18.     text-transform: uppercase;
  19.     text-align: left;
  20.     position: relative;
  21.     color: #fff;
  22.     font-size: 48px;
  23.     font-weight: 400;
  24. }
  25. .section_title h2:after {
  26.     content: "";
  27.     position: absolute;
  28.     bottom: -20px;
  29.     width: 60px;
  30.     height: 1px;
  31.     background-color: #f39c12;
  32.     left: 50%;
  33.     margin-left: -30px;
  34. }
  35. .section_title p {
  36.     text-align: center;
  37.     margin-top: 45px;
  38.     color: #333;
  39.     font-size: 18px;
  40.     line-height: 28px;
  41.     font-weight: 300;
  42. }



I nomi che ho scelto per le nuove classi e per il nuovo file sono del tutto indicativi, basta che non siano nomi già usati altrove.

Ultima modifica effettuata da AldoBaldo il 21/07/2022 alle 9:45


ATTENZIONE! Sono un hobbista e l'affidabilità delle mie conoscenze informatiche è molto limitata. Non prendere come esempio il codice che scrivo, perché non ho alcuna formazione accademica e rischieresti di apprendere pratiche controproducenti.
PM Quote
Avatar
AldoBaldo (Member)
Guru


Messaggi: 639
Iscritto: 08/01/2015

Segnala al moderatore
Postato alle 9:50
Giovedì, 21/07/2022
Ah... se non lo conosci, prova a fare un salto su https://www.w3schools.com/


ATTENZIONE! Sono un hobbista e l'affidabilità delle mie conoscenze informatiche è molto limitata. Non prendere come esempio il codice che scrivo, perché non ho alcuna formazione accademica e rischieresti di apprendere pratiche controproducenti.
PM Quote
Avatar
calmabubbasst (Normal User)
Newbie


Messaggi: 5
Iscritto: 20/07/2022

Segnala al moderatore
Postato alle 16:21
Sabato, 23/07/2022
Testo quotato

Postato originariamente da AldoBaldo:

Premessa: neppure io sono un "esperto", diciamo che la definizione più adatta sarebbe "smanettone".

Nell'attivarmi per risponderti ho riguardato la tua pagina web, e direi che hai già trovato la soluzione, giusto? Comunque sia, questa risposta potrebbe esserti utile in situazioni future, quindi te la do ugualmente.

...



Alla faccia dello SMANETTONE ... allora io faccio schifo ...

.. e infatti .. non ho risolto come volevo: mi hanno suggerito di variare
le fasce A/B con ".section_title" (in style.css, linea 47)
le fasce C/D con ".copyright" (in style.css, linea 1048)
ma come vedi anche se passo da "65" a "5" non riesco ad assottigliare come vorrei ...
quindi ci deve essere una altro parametro da variare ... ma quale??

Mi avevano suggerito anche di variare

.container {
    padding: 64px;
}
nella pagina, ma non funziona nemmeno quello ... :(

Hai qualche altra idea?

Grazie, grazie molte per il tuo aiuto :)

Ultima modifica effettuata da calmabubbasst il 23/07/2022 alle 16:23
PM Quote
Avatar
AldoBaldo (Member)
Guru


Messaggi: 639
Iscritto: 08/01/2015

Segnala al moderatore
Postato alle 14:26
Domenica, 24/07/2022
Cercherei volentieri di venirti incontro, ma riguardando la pagina non riesco a capire cosa vorresti fare. Una soluzione (se ti va di provare) potrebbe essere che tu mettessi insieme un'unica immagine che rappresentasse la versione finale di quel che desideri ottenere, tipo uno "screenshot" della pagina COMPLETA. A quel punto potrei provare a trovare qualche cavillo per arrivare al risultato grafico che avrei sotto agli occhi senza possibilità di "interpretazioni" errate. Che ne dici?


ATTENZIONE! Sono un hobbista e l'affidabilità delle mie conoscenze informatiche è molto limitata. Non prendere come esempio il codice che scrivo, perché non ho alcuna formazione accademica e rischieresti di apprendere pratiche controproducenti.
PM Quote
Avatar
calmabubbasst (Normal User)
Newbie


Messaggi: 5
Iscritto: 20/07/2022

Segnala al moderatore
Postato alle 12:52
Giovedì, 18/08/2022
Ciao @aldobaldo

ho provato a smanettare e questo è quello che sono riuscito a fare ==>
https://www.nastri-trasportatori.net/Altrivideo53.html

lo strano è che ora, se io guardo la pagina con crhome da casa, vedo la pagina e i margini modificati in un modo (corretto) se invece  guardo la pagina con crhome da ufficio, vedo i margini molto più grandi e mi piace meno ... e non capisco gli altri quale versione vedono ... :(

Inoltre, sempre a proposito di "margini", se provi a visualizzare la pagina da cell, vedrai che in orizzontale, bene o male va bene, ma in verticale
https://ibb.co/q7Xpgm6

stesso problema lo ritrovo anche nella pagina principale https://www.nastri-trasportatori.net/
(che è padre di tutte le altre pagine che ho cercato di modificare ed adattare)

Sapresti aiutarmi anche quì a copre come fare per "allineare" il tutto correttamente, solo quando si utilizza il cellulare in verticale?

PM Quote