• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Scrolling Issue:

New Here ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

When I open the HTML file in the browser, the webpage does not scroll, and it appears to be limited to a single screen height. As a result, I cannot access the content beyond the visible screen area. I have checked the CSS for any conflicting settings, but I couldn't identify the cause. Is there any specific setting or property that could be causing this issue?

Views

883

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 28, 2023 Jul 28, 2023

@Eliass31295466029u.

DO NOT use absolute positioning in primary layouts.  Absolute positioning isn't condusive to responsive, flexible pages that will work on multiple devices and screen sizes.  This is what's preventing you from creating new page sections.

 

My advice is as follows:

1. Start over with a pre-styled responsive Starter Template in Dreamweaver. 

2. After defining your site (mentioned above), go to File > New > Starter Templates > Bootstrap Templates. 

3. Select a layout from the 3r

...

Votes

Translate

Translate
Community Expert ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

For advanced users with special use cases, Bootstrap contains position- classes.  Notice the important caveat highlighted in this screenshot.

image.png

 

This supports what I posted earlier.  Unless the OP has additional questions, I've nothing more to say on this topic.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

This whole topic makes me smile. As an example, the logo. This appears to be of most importance for designers. So that they can perform their gorrilla dance? 

 

But what about the user? Smashing Magazine gives a quick summary:

 

BenPleysier_0-1690675921881.png

 

What about the person that owns the site, the client? Do they allow the time for a developer to clown around trying to figure the styling out? Do they care whether the logo is absolute positioned? Please come to your senses and not do what brought the British Motor industry down on its knees. Time equals cost!

 

In a matter of minutes, I created this, not perfect as yet, but a darn site faster thatn what is hapening here. No, I will not upset some by mentioning the framework that is being used.

 

BenPleysier_1-1690676624412.png

 

Think about it!

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2023 Jul 30, 2023

Copy link to clipboard

Copied

quote

This whole topic makes me smile. As an example, the logo. This appears to be of most importance for designers. So that they can perform their gorrilla dance


By @BenPleysier

 

Of course it's not the upmost importance for just the designer, rather more the company. Why do you think some companies pay thousands, sometimes millions of pounds to have a logo produced, backed up by a 400 plus page corporate identity manual of how it MUST be used.

 

Spoken l would assume by someone who has never been in the creative industry at a serious level and has little idea of the process of producing a corporate logo where dozens of initial concepts, in a rainbow of color combinations and optional font faces could be submitted and tweaked and tweaked again over a period of months.

 

I'm not saying this is always the case but there are companies out there who soley specialise in  producing corporate identities.

 

quote

This whole topic makes me smile. As an example, the logo. This appears to be of most importance for designers. So that they can perform their gorrilla dance? 

 

But what about the user? Smashing Magazine gives a quick summary:

 

BenPleysier_0-1690675921881.png

 

What about the person that owns the site, the client? Do they allow the time for a developer to clown around trying to figure the styling out? Do they care whether the logo is absolute positioned? 

 

By @BenPleysier

 

I don't think anyone has said the client cares about what workflow, positioning is used to create their website, some may have specific requirements but most won't care.........not really sure what point your trying to make with that statement. My point was consider what's available and use it when and where it might be applicable.

 

quote

In a matter of minutes, I created this, not perfect as yet, but a darn site faster thatn what is hapening here. No, I will not upset some by mentioning the framework that is being used.

 

BenPleysier_1-1690676624412.png

 

Think about it!


By @BenPleysier

 

Thanks for that but l don't know 'what is actually happening here' other than debating the merits of some useful positioning attributes. Anyone with some kind of coding knowledge could produce a layout, with or without a framework, in a matter of minutes............hummm.

 

As for faster......its all relevant isn't it, its about how well you know how to do something or use something. I've seen users struggle for days in the other IDEs forum to do something which could have been done in a few minutes, assuming you had the coding knowledge. What you might save in time you generally will lose somewhere else along the way, unless you have a better than average knowledge about what you are working with.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 30, 2023 Jul 30, 2023

Copy link to clipboard

Copied

quote

For advanced users with special use cases, Bootstrap contains position- classes.  Notice the important caveat highlighted in this screenshot.

image.png

 

This supports what I posted earlier.  Unless the OP has additional questions, I've nothing more to say on this topic.

 


By @Nancy OShea

 

OK well that statement is somewhat incorrect and needs clarifying. You can add position relative to any container and it will still be responsive. You can insert an absolutely positioned container within a relatively positioned container and it will be responsive. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 28, 2023 Jul 28, 2023

Copy link to clipboard

Copied

quote

thank you for your appreciated responce, i am actually planning to modify the file paths when hosting the website, i am a beginner so please forgive me for any inconvenience i might cause to you, i am trying to get better, but could you please guide me to solve the problem i am facing of not being able to add a section to the page, and thank you very much for your time!


By @Eliass31295466029u

 

Really difficult to provide any meaningful answers as we dont know what the page is supposed to look like. 

 

You don't need to position the 'hero' section absolutely or use top/left:

 

#hero {
    background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/background (2).png");
    background-color: black;
    background-size: 100% 100%;
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
You're using margin-top 120% to hack the start position of the 'about' section as a result of positioning the hero section absolutely, which removes the hero section from the normal html flow so the 'about' section has no idea its there and will sit under it, at the top of the page, unless you force its position, which you have done by using margin-top. You don't need margin-top if you delete the absolute positioning from the 'hero' css, the 'about' section will just follow in the normal html flow then any section/s you insert should follow in the order inserted.
 
#about-us {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px; /* Adjust the padding as needed */
margin-top: 120%; /* Adjust the margin-top to position the section below the Hero section */
}
 
Not sure why the below code is at the start of your page as it is repeated directly after. Plus you shouldn't be using the same id, in this case 'hero', any more than once per page.
 
<section id="hero">
        <!-- Left Side Container -->
        <div class="side-container left"></div>
 
        <!-- Right Side Container -->
        <div class="side-container right"></div>
 
 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 28, 2023 Jul 28, 2023

Copy link to clipboard

Copied

And to complete what @Nancy OShea  explains, there are various ways of addressing paths :

  • absolute link : <img src="https://www.lesite.com/images/your_image.ext">
  • relative to the document: <img src="your_image.ext"> (depending on your hosting document location)
  • relative to the site: <img src="/images/your_image.ext">

 

More on this thread : https://stackoverflow.com/questions/24028561/relative-path-in-html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 31, 2023 Jul 31, 2023

Copy link to clipboard

Copied

quote

Thank you so MUCH for the mansplaining & side slaps.  😬

I can see how following discussions that splinter off in other directions might prove too challenging for an elderly irregular contributor with minimal posting history.  Fortunately, the OP fully understood my replies and that's what counts.  😇

Sleep well & don't let the bed bugs bite you.

By @Nancy OShea

 

Firstly, thank you for your feedback. However, I noticed that your message could be interpreted as condescending towards me, and I would like to address the situation. My experience on the forum may vary in certain situations, but I strive to contribute constructively.

 

I want to mention that in addition to my forum participation, I have a busy schedule with work commitments, running the studio, and fulfilling responsibilities to clients, including reviewing technical works, articles, and preparing for conferences. The forum is not my sole occupation, and I do my best to balance my engagements.

 

We are all here to exchange ideas and learn from each other, and I believe it's important not to impose our own ideas on others solely based on their level of experience.

 

Let's maintain an atmosphere of respect and support for all contributors, regardless of their background or expertise. If you have specific questions about my contributions or any points you would like to discuss further, I'd be glad to engage.

 

Thank you again for your attention, and have a pleasant day

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 01, 2023 Aug 01, 2023

Copy link to clipboard

Copied

LATEST

Oh Lord, please deliver us from Chat GPT.  🤐

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines