The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Newbie - Edit template: how to lower the height of the bands?
calmabubbasst
post Jul 20 2022, 02:15 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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?

IPB Image
IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 20 2022, 04:06 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



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

CODE
.container {
    padding: 64px;
}


Try to change that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 20 2022, 04:40 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Jul 20 2022, 03:37 PM
Post #4


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Jul 20 2022, 03:42 PM
Post #5


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Jul 20 2022, 03:54 PM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



...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?)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 20 2022, 04:59 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



What other pages do you mean?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Jul 21 2022, 12:48 AM
Post #8


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 21 2022, 07:35 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 21 2022, 04:56 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 21 2022, 06:24 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



wacko.gif

Could one of them be cached? But why would only non https pages evoke the cached style sheet?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 22 2022, 07:44 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 22 2022, 11:42 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Jul 23 2022, 01:24 AM
Post #14


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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)?

IPB Image

Tnx U very very much
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 23 2022, 06:49 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 24 2022, 05:34 AM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,194
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Aug 12 2022, 02:45 AM
Post #17


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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
IPB Image
IPB Image

this is the photo taken by the chrome browser from the pc in the office
IPB Image
IPB Image

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 ^__^

This post has been edited by calmabubbasst: Aug 12 2022, 02:49 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 12 2022, 04:59 AM
Post #18


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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

this is the photo taken by the chrome browser from the pc at home
IPB Image
IPB Image

this is the photo taken by the chrome browser from the pc in the office
IPB Image
IPB Image

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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
calmabubbasst
post Aug 13 2022, 03:03 AM
Post #19


Newbie
*

Group: Members
Posts: 12
Joined: 20-July 22
Member No.: 28,449



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?

This post has been edited by calmabubbasst: Aug 13 2022, 03:04 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2022, 05:43 AM
Post #20


.
********

Group: WDG Moderators
Posts: 9,152
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th August 2022 - 11:40 AM