Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Newbie - Edit template: how to lower the height of the bands?

Posted by: calmabubbasst Jul 20 2022, 02:15 AM

Hi everyone, I'm editing a template to suit my needs,
I started from template because I know very little about html and I try to arrange myself as I can,
and I know even less about CSS ... sad.gif

In any case, the point is this:

in this test page https://www.nastri-trasportatori.net/Altrivideo52.html what I would like to achieve is to lower the heights of the bands
"A" "B" "C" and "D"

I searched the whole code and made several tests (as far as I could) but I was unable to understand who is in charge of those heights and how to intervene to reduce them as desired ...

Could you help me?

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

Tnx ^__^

PS: I am Italian and also my level of English is not very high: please explain to me how to a 4 year old child ;-P

Posted by: pandy Jul 20 2022, 04:06 AM

It's a complex layout. But I think most of the height comes from this rule.

CODE
.container {
    padding: 64px;
}


Try to change that.

Posted by: Christian J Jul 20 2022, 04:40 AM

For the bands A/B you may also need to reduce padding-top and padding-bottom values of ".section_title" (in style.css, line 47) and for bands C/D the same values of ".copyright" (in style.css, line 1048).

Posted by: calmabubbasst Jul 20 2022, 03:37 PM

QUOTE(pandy @ Jul 20 2022, 04:06 AM) *

It's a complex layout. But I think most of the height comes from this rule.

CODE
.container {
    padding: 64px;
}


Try to change that.


hello @pandy thanks for your suggestion, unfortunately it doesn't work, would you have any other suggestions?

Posted by: calmabubbasst Jul 20 2022, 03:42 PM

QUOTE(Christian J @ Jul 20 2022, 04:40 AM) *

For the bands A/B you may also need to reduce padding-top and padding-bottom values of ".section_title" (in style.css, line 47) and for bands C/D the same values of ".copyright" (in style.css, line 1048).



hi @Christian J thanks for your suggestion, i've change both but unfortunately it doesn't work, would you have any other suggestions?

If that helps, I might as well do without external CSS, but I need to be guided


I hope for another kind suggestion from you

Posted by: calmabubbasst Jul 20 2022, 03:54 PM

...wait wait, it run fine, it's fixed

Changing browser now i see it fixed smile.gif maybe before i update the page in wrong way


WOW, ITS FIXED smile.gif

I was afraid that changing those values would fix that page but I could ruin all the others, instead everything is ok ...

(how is it possible that the other pages have not undergone changes?)

Posted by: pandy Jul 20 2022, 04:59 PM

What other pages do you mean?

Posted by: calmabubbasst Jul 21 2022, 12:48 AM

QUOTE(pandy @ Jul 20 2022, 04:59 PM) *

What other pages do you mean?


http://www.nastri-trasportatori.net/

http://www.nastri-trasportatori.net/tramoggia.html
http://www.nastri-trasportatori.net/sponda.html
https://www.nastri-trasportatori.net/video27.html
...

.. and the last 3 seems dont be fixed ... why?

Posted by: pandy Jul 21 2022, 07:35 AM

Are you sure it doesn't affect the other pages? At for example http://www.nastri-trasportatori.net/tramoggia.html it doesn't look like the footer container has a padding, as per your revised style sheet.

Posted by: Christian J Jul 21 2022, 04:56 PM

https://www.nastri-trasportatori.net/video27.html still has extra padding in ".copyright". Seems URLs using HTTP or HTTPS return different stylesheets, here's line 1048 in each:

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

CODE

.copyright {
    background-color: #1A1D22;
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 3px solid #f39c12;
}


https://www.nastri-trasportatori.net/style.css
CODE
.copyright {
    background-color: #1A1D22;
    padding-bottom: 65px;
    padding-top: 65px;
    border-bottom: 3px solid #f39c12;
}

Posted by: pandy Jul 21 2022, 06:24 PM

wacko.gif

Could one of them be cached? But why would only non https pages evoke the cached style sheet?

Posted by: Christian J Jul 22 2022, 07:44 AM

QUOTE(pandy @ Jul 22 2022, 01:24 AM) *

wacko.gif

Could one of them be cached?

Not by my browser, I didn't visit https://www.nastri-trasportatori.net/video27.html before this.

Don't know how HTTPS is handled by web servers, can some content negotiation be involved?

QUOTE
But why would only non https pages evoke the cached style sheet?

No, https://www.nastri-trasportatori.net/style.css has the old padding values but uses HTTPS. If it was cached it should have been the other way around.

Posted by: pandy Jul 22 2022, 11:42 AM

QUOTE(Christian J @ Jul 22 2022, 02:44 PM) *

QUOTE(pandy @ Jul 22 2022, 01:24 AM) *

wacko.gif

Could one of them be cached?

Not by my browser, I didn't visit https://www.nastri-trasportatori.net/video27.html before this.


I figured as much. I didn't mean your browser cache.
QUOTE

Don't know how HTTPS is handled by web servers, can some content negotiation be involved?

Me neither.

QUOTE

QUOTE
But why would only non https pages evoke the cached style sheet?

No, https://www.nastri-trasportatori.net/style.css has the old padding values but uses HTTPS. If it was cached it should have been the other way around.


OK. It was a long shot anyway.

Posted by: calmabubbasst Jul 23 2022, 01:24 AM

Thanks guys, many thanks smile.gif

You are a river in flood with lots of useful information I can't understand them all well but I'm trying smile.gif

Today I will try to modify also line 1048 and we will see,
in fact, however, if I change the browser the height of the bands changes ...

I would like to ask you 2 more things:

- http or https I activated https some time ago, I thought this was enough, but now I understand that I have to change my web page too, is that correct? It is enough that I change all the links that start from my main page and edit them from
href = "http: //www.myweb.ok/ok.html" to
href = "httpS: //www.myweb.ok/ok.html"
or do I have to do other actions?

- If you look at the main page with a smart phone, and look at the site vertically, you will notice that there is a white vertical band on the right: I think it is the fault of how I entered the video code ...
How can I do to correct this point too, so that everything is aligned and without a white band, only when I use a smart phone in portrait view (while the rest of the time everything remains as it is now)?

https://ibb.co/hBpkp5C

Tnx U very very much

Posted by: Christian J Jul 23 2022, 06:49 PM

QUOTE(calmabubbasst @ Jul 23 2022, 08:24 AM) *

- http or https I activated https some time ago, I thought this was enough, but now I understand that I have to change my web page too, is that correct? It is enough that I change all the links that start from my main page and edit them from
href = "http: //www.myweb.ok/ok.html" to
href = "httpS: //www.myweb.ok/ok.html"
or do I have to do other actions?

You shouldn't change links to other sites.

In links to pages on your own site you can use relative URLs, like you already do:

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

I have no idea why HTTP and HTTPS return different stylesheets. Maybe your webhost can explain it. unsure.gif

QUOTE
- If you look at the main page with a smart phone, and look at the site vertically, you will notice that there is a white vertical band on the right: I think it is the fault of how I entered the video code ...

That seems to be the BODY element's background (which is white by default). For some reason the page section with a gray background becomes more slim than it needs to be in narrow phone screen windows.

Posted by: pandy Jul 24 2022, 05:34 AM

I get different behaviour in different browsers when the page width shrinks. In k-meleon I get what you see on your phone. In updated FF and Edge the gray does not disappear, but the menu does and isn't replace with a button and the logo doesn't shrink.


Attached Image

Posted by: calmabubbasst Aug 12 2022, 02:45 AM

QUOTE(Christian J @ Jul 23 2022, 06:49 PM) *

I have no idea why HTTP and HTTPS return different stylesheets. Maybe your webhost can explain it. unsure.gif


Hello and thank you very much to both of you,
thanks to your suggestions I was able to create what I wanted almost 100% https://www.nastri-trasportatori.net/Altrivideo53.html

There are still some things to fix and I don't understand how to do it, in fact it seems that http and https are NOT to blame for the height difference of the blanks, in fact

this is the photo taken by the chrome browser from the pc at home
https://ibb.co/wynMd6Z
https://ibb.co/v1qXRm1

this is the photo taken by the chrome browser from the pc in the office
https://ibb.co/Z6VKB7H
https://ibb.co/wMj6534

What could be the final solution? What's i ha to do now in order to fix at 100%?

regarding the other problem of the width of the videos on the other page, I did not understand the solution, I think I will open a new dedicated post: I hope that I will find you to help me there too smile.gif

Indeed, I will open 2 new posts because I have 2 separate questions.

Thank you, see you soon ^__^

Posted by: Christian J Aug 12 2022, 04:59 AM

QUOTE(calmabubbasst @ Aug 12 2022, 09:45 AM) *

this is the photo taken by the chrome browser from the pc at home
https://ibb.co/wynMd6Z
https://ibb.co/v1qXRm1

this is the photo taken by the chrome browser from the pc in the office
https://ibb.co/Z6VKB7H
https://ibb.co/wMj6534

Maybe the old version is cached in your office browser? Try reloading the page. In some browsers, reloading the HTML file may still not update embedded files (such as stylesheets) though.

Now I checked https://www.nastri-trasportatori.net/style.css directly again, and my Vivaldi browser was still displaying the old version, but after reloading the new version showed up.



Posted by: calmabubbasst Aug 13 2022, 03:03 AM

QUOTE(Christian J @ Aug 12 2022, 04:59 AM) *

Maybe the old version is cached in your office browser? Try reloading the page. In some browsers, reloading the HTML file may still not update embedded files (such as stylesheets) though.

Now I checked https://www.nastri-trasportatori.net/style.css directly again, and my Vivaldi browser was still displaying the old version, but after reloading the new version showed up.



Hi @Christian J
i'm press F5 every time I chnge a single letters in my html code smile.gif
but that's the result ...

With your browser, what version you could see? The "home" version or "office" version?

Posted by: Christian J Aug 13 2022, 05:43 AM

QUOTE(calmabubbasst @ Aug 13 2022, 10:03 AM) *

With your browser, what version you could see? The "home" version or "office" version?

I got the Home version.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)