Participant

Answered

Scrolling Issue:

Forum|Forum|2 years ago
July 26, 2023
5 replies
2487 views

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?

This topic has been closed for replies.

Correct answer Nancy OShea

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!

@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 3rd column and hit CREATE button.

4. SaveAs index.html.

This will give you a good starting point that you can work with. And it will work in all devices and browsers.

Post back if you have any questions.

B i r n o u

Legend

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

Nancy OShea

Community Expert

Oh Lord, please deliver us from Chat GPT. 🤐

Nancy O'Shea— Product User & Community Expert

E

Eliass31295466029uAuthor

Participant

here are the code snippets, please assist me with them, i would really be grateful for your effort of checking them,

HTML :

<!DOCTYPE html>

<head>

<title>IQ-Matrix - The Future Being Shaped: Empowering Businesses with Artificial Intelligence's Driven Innovations</title>

</head>

<body>

<h1>Revolutionize The Way You Do Business</h1>

<h2>Join The New Generation Of <strong>Ai-Powered </strong> Businesses </h2>

<p>Step into a World of Boundless Potential.At IQ-Matrix, We Believe in the Power of AI to Rewrite the Rules of Your Business's Success. Our Futuristic AI-Powered Innovations Propel Your Business to New Horizons. Stay Ahead of the Curve and Discover Endless Growth, Profitability, and Efficiency. Empower Your Business to Thrive in the Digital Age, And Lead your Way to a Brighter Tomorrow.</p>

</section>

<p></p>

</div>

</section>

</section>

</section>

</section>

</footer>

</body>

</html>

CSS hero:

@1552174 url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

/* Your existing CSS styles for the Hero section */

/* ... */

/* Styles for the side containers */

body, html {

height: 1000vh;

}

#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;

}

/* Styles for the side containers in Hero section */

.side-container {

position: absolute;

top: 0;

bottom: 0;

width: 27%;

background-repeat: no-repeat;

background-size: cover;

}

.side-container.left {

left: 0;

background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/background (1).png");

}

.side-container.right {

right: 0;

background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/Background.png");

}

/* Styles for Hero Headline */

#hero h1 {

font-family: 'Inter', sans-serif;

font-weight: 777;

font-size: 45px;

font-style: normal;

line-height: 50px;

color: white;

margin-bottom: 50px;

text-align: center;

max-width: 85%;

margin-bottom: -30px; /* Your existing CSS styles for Hero section */

}

#hero h2 {

font-family: 'Inter', sans-serif;

font-weight: 700;

font-size: 37px;

font-style: normal;

line-height: 43px;

color: white;

margin-top: 35px;

text-align: center;

max-width: 85%;

margin-bottom: -20px; /* Your existing CSS styles for Hero section */

}

/* Styles for Additional hero content */

#hero p {

font-family: 'Inter', sans-serif;

font-weight: 200;

font-size: 18px;

line-height: 20px;

color: #7b88a8;

margin-top: 50px;

max-width: 70%;

margin: 50px;

margin-left: auto;

margin-right: auto;

text-align: center;

}

/* Styles for Call-to-Action Button */

#hero .cta-button {

background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/Capture d'écran 2023-07-25 152528.png");

background-size: cover;

background-repeat: no-repeat;

padding: 0;

border: none;

width: 370px; /* Set the width of the button to fit the image */

height: 60px; /* Set the height of the button to fit the image */

margin-top: -21px;

animation: waveGradient 4s linear infinite;

border-radius: 17px;

transition: transform 0.2s;

filter 0.2s;

cursor: pointer;

}

#hero .cta-button:hover {

background-color: #0056b3;

transform: scale(1.1);

filter: brightness(1.1);

cursor: pointer;

}

#hero img:last-child {

margin-top: 0px;

width: 350px

}

/* Logo Styles */

.logo {

width: 150px; /* Set the width of the logo */

height: auto; /* Allow the height to adjust proportionally */

position: absolute;

top: 0; /* Adjust the top value to position the logo at the top of the page */

left: 50%; /* Center the logo horizontally */

transform: translateX(-45%);

border-radius: 50%;

}

.bottom-image {

width: 67%;

height: auto;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

border-radius: 17% 17% 0 0;

}

/* Styles for the About Us section */

#about-us {

background-color: black;

display: flex;

justify-content: space-between;

align-items: center;

padding: 50px 20px; /* Adjust the padding as needed */

}

/* Styles for the side containers in Hero section */

.side-container {

position: absolute;

top: 0;

bottom: 0;

width: 27%;

background-repeat: no-repeat;

background-size: cover;

}

.side-container.left {

left: 0;

background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/background (1).png");

}

.side-container.right {

right: 0;

background-image: url("C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/Background.png");

}

/* Styles for the About Us section */
#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 */
}

/* Styles for the content inside the About Us section */
#about-us .about-content {
max-width: 800px; /* Adjust the max-width as needed */
text-align: center;
}

#about-us h3 {
color: white;
font-size: 24px;
font-weight: bold;
}

#about-us p {
color: white;
font-size: 18px;
max-width: 600px;
}

#about-us img {
max-width: 100%;
margin-top: 20px; /* Adjust the margin-top for spacing between text and image */
}

Jon Fritz

Community Expert

I see absolute links to files on your hard drive in your code. That is almost always a sign that you are not working from a Defined Site in the program.

Defining a site is the crucial first step when working in DW and allows the program to correctly manage your site assets. Without it, you will run into all kinds of problems.

Even for html emails, one off newsletter pages and the like, defining a site will make DW work better...

https://helpx.adobe.com/dreamweaver/how-to/define-a-dreamweaver-site.html