Scrolling Issue:

Report · Jul 26, 2023

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?

Report · Jul 26, 2023

It's probably as a result of you setting a height on a container within the html. Without seeing the html code and css it's guess work.

Report · Jul 26, 2023

having trouble positionning a second section in my website. The new section appears behind the first section instead of right under it.

Appreciate any assistance

Report · Jul 26, 2023

Due to the crystal ball shortage, no assistance is possible without a URL.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 26, 2023

having trouble positionning a second section in my website. The new section appears behind the first section instead of right under it.
Appreciate any assistance

By @Eliass31295466029u

That would probably account for one of the sections being positioned absolutely instead of within the flow of the html. If you care to provide the code in the forum or a link to the affected page someone will most likely be able to give you some guidance.

Report · Jul 26, 2023

Any height setting paired with overflow:hidden in the CSS will take away scroll bars.

Report · Jul 26, 2023

What's the URL to your problem page online?

Answers to layout question are contained in your code.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 26, 2023

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:

@Import 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 */
}

Report · Jul 27, 2023

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

Report · Jul 27, 2023

Adding to what @Jon Fritz said, this link path is incorrectly expressed and it contains illegal spaces.

This code will work on one device & one device only— YOUR computer. If you upload this code to a website server or send it via email, nobody will ever see the images

The correct expression should be <img src="Website_ProjeX/Home/ig_212.png"> Without spaces

Go to Site > New Site and define a local site folder. See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 28, 2023

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!

Report · 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 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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 28, 2023

@Nancy OShea you should probably hook your feedback to the approriate thread, just above, where positionning is the subjct (aboslute positionning), here in this second part it can drive to confusion about what post @L e n a just below, concerning absolulte path for the image path, and complete your first answer (which has nothing to do with positioning).

just my 2 cents 😉

Report · Jul 28, 2023

@B i r n o u

I use this forum's "Threaded View" option and jump to latest reply.

Jump to latest reply

I posted directly under @Eliass31295466029u's latest reply where he wrote: "please guide me to solve the problem i am facing of not being able to add a section to the page."

I answered Eliass' question the best way possible. And I offered a solution to his layout problem.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 28, 2023

one can't teach an old fox like you how this kind of forum works... :)... we'd had some wide-ranging discussions on the subject... why do'nt you use quoting... no pun intended when filling quotas at all costs...

Report · Jul 28, 2023

why do'nt you use quoting... no pun intended when filling quotas at all costs...
By @B i r n o u

=============

??? 😕

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2023

??? 😕
By @Nancy OShea

in fact, since the entire conversation is made up of two distinct and separate parts, one dealing with positioning and the other with the paths linking resources...since both use the word "absolute", it would have been appropriate to quote the question your text was addressing.

But as I said, it was just a two-cent remark, thinking that your expertise would have helped you grasp it.

Report · Jul 29, 2023

Yeah, question was about positioning elements not about if the path links to the images were correct or not.........hmmm. l thought it was me. Sure its helpful to address other issues, of which there are many in the code, but answering the main query is more relevant.

Report · Jul 29, 2023

Yeah, question was about positioning elements not about if the path links to the images were correct or not.........hmmm. l thought it was me. Sure its helpful to address other issues, of which there are many in the code, but answering the main query is more relevant.

By @osgood_

Yes, I agree with you, which is why quotes are a valuable tool to help us follow what it's about correctly, especially when the discussion scatters into multiple topics, encapsulating polymorphic phrases and/or words.

Report · Jul 29, 2023

...filling quotas at all costs...

.. thinking that your expertise would have helped you grasp it.
By @B i r n o u

==============

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.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 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.

By @Nancy OShea

Not quite correct. You CAN use absolute positioning, the key is knowing when to use it. The positioning of the logo in the supplied code from the OP is a prime example of when absolute positioning can be of benefit, although it would have been more applicable to position the hero section relatively, as the logo div is contained within that.

Report · Jul 29, 2023

You CAN use absolute positioning, the key is knowing when to use it.
By @osgood_

=========

The logo is the least concern. It's just eye candy. The deeper concern is with the Sidebar-- a primary structural layout element. Positioning is not required for layouts. One can easily avoid them with CSS grids or flexible boxes (which Bootstrap utilizes in it's 12 box system).

That said, there are exceptions to 'rules of thumb' in special use cases. But for beginners who are just starting out, I would advise against using positioned elements until the problems they cause & how best to mitigate them are more fully understood.

I'm not here to teach a fundamental web design course. There are plenty of online tutorials they can do at their own pace which will provide that. As a Dreamweaver product expert, I am here to help users solve problems and offer them immediate solutions they can use.

TUTORIALS:

==========
Read chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/bootstrap/

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2023

You CAN use absolute positioning, the key is knowing when to use it.
By @osgood_
=========
The logo is the least concern. It's just eye candy.

By @Nancy OShea

A logo is just eye-candy.............I would regard it as a fundamentally important element myself but then what do I know. I guess 40+ years in visual design taught me nothing.

I use position absolute all the time for positioning key elements.....so to disrgard it would be a fatal mistake in my opinion. It got a bad reputation, particularly within Dreamweaver, because amatuer users abused it by draging boxes into place, which is not how it should be used. Once you know when and how to deploy position absolute it can be a perfect option in certain circumstances.

Report · Jul 29, 2023

I use position absolute all the time
By @osgood_

===========

We're not talking about YOU. As the OP stated, he's a beginner.
Since you want to pull this topic to yourself, how long have YOU been coding?
When and where was the last time YOU used position absolute for primary layout in production?
Please post the URL for us to see.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2023

I use position absolute all the time
By @osgood_
===========
We're not talking about YOU. As the OP stated, he's a beginner.
Since you want to pull this topic to yourself, how long have YOU been coding?
When and where was the last time YOU used position absolute for primary layout in production?
Please post the URL for us to see.

By @Nancy OShea

I'm just saying that position absolute shouldn't be discarded whether you're an expert coder or beginner, it has a role to play just like anything else. I believe l'm correct in saying even Bootstrap, that workflow you use for creating a mess, has a utility class for position absolute, right, or am l wrong?

Scrolling Issue:

1 Correct answer