Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
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 ...
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"
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...
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.
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...
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?
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
<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
<div class="section_title">
<h2>Nuovi VIDEO</h2>
<p>
CF SYSTEM srl produce NASTRI TRASPORTATORI per ogni.. EDILVEYOR.
<br>Dapprima ci siamo dedicati alla conoscenza delle pec ... di trasportatore attuale.
</p>
</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
.section_title {
padding-top: 20px;
padding-bottom: 10px;
}
.section_title h2 {
text-transform: none;
text-align: center;
position: relative;
color: #333;
font-size: 30px;
font-weight: 400;
}
.section_title h2:after {
content: "";
position: absolute;
bottom: -20px;
width: 60px;
height: 1px;
background-color: #f39c12;
left: 50%;
margin-left: -30px;
}
.section_title p {
text-align: center;
margin-top: 45px;
color: #333;
font-size: 18px;
line-height: 28px;
font-weight: 300;
}
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
<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
.section_title {
padding-top: 20px;
padding-bottom: 10px;
}
.section_title h2 {
text-transform: none;
text-align: center;
position: relative;
color: #333;
font-size: 30px;
font-weight: 400;
}
.section_title_av52 {
padding-top: 200px;
padding-bottom: 100px;
}
.section_title_av52 h2 {
text-transform: uppercase;
text-align: left;
position: relative;
color: #fff;
font-size: 48px;
font-weight: 400;
}
.section_title h2:after {
content: "";
position: absolute;
bottom: -20px;
width: 60px;
height: 1px;
background-color: #f39c12;
left: 50%;
margin-left: -30px;
}
.section_title p {
text-align: center;
margin-top: 45px;
color: #333;
font-size: 18px;
line-height: 28px;
font-weight: 300;
}
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.
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.
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
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.
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?
calmabubbasst ha allegato un file: abbassa-1.JPG (62312 bytes)
