• 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

719

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
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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.

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
New Here ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

 

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 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

 

 

 

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
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

quote

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.

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 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

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 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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
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
New Here ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

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

HTML :

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IQ-Matrix - The Future Being Shaped: Empowering Businesses with Artificial Intelligence's Driven Innovations</title>
<link rel="icon" href="C:\Users\Ilyass HUSTLER\Desktop\Website ProjeX\Home\My project-1.png"type="image/x-icon">
    <!-- Link to Homepage CSS -->
    <link rel="stylesheet" href="Home.css">
<link rel="stylesheet" href="about.css">
 
 
</head>
 
<body>
<section id="hero">
        <!-- Left Side Container -->
        <div class="side-container left"></div>
 
        <!-- Right Side Container -->
        <div class="side-container right"></div>
    <!-- Hero Section -->
    <section id="hero">
<div class="side-container left"></div>
<div class="side-container right"></div>
 
<!-- GIF Logo -->
        <img src="C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/ezgif.com-crop (2).gif" alt="Your Logo" class="logo">
        <!-- Your AI-themed illustration or image goes here -->
        
        
        <!-- Hero Headline -->
        <h1>Revolutionize The Way You Do Business</h1>
<h2>Join The New Generation Of <strong>Ai-Powered&nbsp;</strong> Businesses </h2>
        
        <!-- Additional hero content if needed -->
        <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>
        
        <!-- Call-to-Action Button -->
        <a href="#services" class="cta-button">&nbsp;</a>
 
<!-- Image Under CTA Button -->
    <img src="C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/Capture d'écran 2023-07-25 153916 (1).jpg">
</section>
 
<img src="C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/Capture d'écran 2023-07-25 194059 ).png" alt="Image at the Bottom" class="bottom-image">
 
 
<!-- About Us Section -->
    <section id="about-us">
        <div class="about-content">
            <h3></h3>
            <p></p>
            <!-- Add the image here -->
            <img src="C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/ig 212.png">
        </div>
    </section>
 
<!-- Introduction Section -->
<section id="introduction">
<!-- Your introduction content goes here -->
</section>
 
<!-- Services Section -->
<section id="services">
<!-- Your services content goes here -->
</section>
 
<!-- Offer Section -->
<section id="offer">
<!-- Your offer content goes here -->
</section>
 
<!-- Rest of the HTML content for other sections -->
<!-- ... -->
 
<!-- Footer Section -->
<footer>
<!-- Your footer content goes here -->
</footer>
 
<!-- Link to Homepage CSS -->
<link rel="stylesheet" href="path/to/homepage.css">
</body>
 
</html>
 
CSS hero: 
 
 
        /* 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 */
}

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 27, 2023 Jul 27, 2023

Copy link to clipboard

Copied

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 

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 27, 2023 Jul 27, 2023

Copy link to clipboard

Copied

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

<img src="C:/Users/Ilyass HUSTLER/Desktop/Website ProjeX/Home/ig 212.png">

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.

CC-localsite.jpg

 

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
New Here ,
Jul 28, 2023 Jul 28, 2023

Copy link to clipboard

Copied

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!

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

@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
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 28, 2023 Jul 28, 2023

Copy link to clipboard

Copied

@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 😉

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

@B i r n o u

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

Jump to latest replyJump 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
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 28, 2023 Jul 28, 2023

Copy link to clipboard

Copied

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

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

quotewhy 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
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

??? 😕

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.

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 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

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.

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

quote

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.

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

quote

...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
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
LEGEND ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

quote

@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.

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

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
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
LEGEND ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

quote
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.

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

quoteI 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
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
LEGEND ,
Jul 29, 2023 Jul 29, 2023

Copy link to clipboard

Copied

quote
quoteI 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?

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