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

Tab pane content moves down

Explorer ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

Hi wonderful people,

After making my pages all php in order to link up with a template, the tab panes are not working properly - content in each subsequent pane moves down the page even further than the last - using Dreamweaver 21.1 Bootstrap 4.4.1

https://www.quodvultdeus.com/KS3_Philo.php

There is nothing additional in the css apart from the default settings - margin (auto) and padding (3em) for each pane. Any ideas?

Views

339

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

LEGEND , May 30, 2021 May 30, 2021
quote

I have just republished the page with Lorem Ipsum content replaying the links etc but the tab pane error still occurs.

https://www.quodvultdeus.com/TestingTabPanes.php

 


By @Weat01

 

 

You still have errors in your coding. Maybe either Nancy or Ben can give you some advice as to what to do to correct them, they are efficient Bootstrap users. I don't sort Bootstrap errors out because the component code is too bloated for me to have any desire to waste my time looking through the mess it creates.

 

EDITED

...

Votes

Translate

Translate
Community Expert ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

Fix your code errors.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.quodvultdeus.com%2FKS3_Philo.php

 

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
Explorer ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

OK I have fixed most of them but I don't understand the hats error :
"The aria controls attribute must point to an element in the same document."
 
<li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Nature of God&nbsp;&nbsp;</a> </li> <li class="nav-item"> <a class="nav-link" href="#paneThree1" role="tab" id="hatstab2" data-toggle="tab" aria-controls="hats">Theology of Body&nbsp;&nbsp;</a> </li>
 
The corresponding code for the pane content is
 
<div role="tabpanel" class="tab-pane fade" id="paneTwo1" aria-labelledby="hatstab1"> <div role="tabpanel" class="tab-pane fade" id="paneThree1" aria-labelledby="hatstab2">
 
What should I change? The 'hats' field is default
Also W3 tells me that it doesn't like the div tag that starts off the tab panel content (not being a child of ul), but how can i remove this?
 
<div id="clothingnavcontent1" class="tab-content">
 

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

 

 

 

quote

the tab panes are not working properly - content in each subsequent pane moves down the page even further than the last - using Dreamweaver 21.1 Bootstrap 4.4.1

 

By @Weat01


What is the below junk? Did Bootstrap output that. I know Bootstrap is pretty bad when it comes to how much extra coding and utility classes it uses for simple components, but even this is beyond the capabilities of Bootstrap.

 

On the following page, if you scroll way down, under the heading 'Javascript behaviour' you will find a couple of Bootstrap tab nav examples, with code.

https://getbootstrap.com/docs/4.0/components/navs/ 

 

 

<div role="tabpanel" class="tab-pane fade show active" id="home1" aria-labelledby="hometab1">
       	  <p>KNOWING GOD<br>
        <p class="Paragraph-Style-18pt" id="u250481-4" style="user-select: auto;">Ways of Knowing God<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP1_WaysKnowGod.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-8" style="user-select: auto;">Activity <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP1_WaysKnowingGod.docx" style="user-select: auto;">Texts</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-9" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-13" style="user-select: auto;">Through Jesus<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP2_ThroughJesus.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-16" style="user-select: auto;"><a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/HWKnowingJesusSEN.docx" style="user-select: auto;"><span id="u250481-14" style="user-select: auto;">SEN/HW sheet</span></a></p>
        <p class="Paragraph-Style-18pt" id="u250481-17" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-21" style="user-select: auto;">Through the Bible - <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP3_ThroughBible.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-24" style="user-select: auto;"><a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP3_GodBibleSEN.docx" style="user-select: auto;"><span id="u250481-22" style="user-select: auto;">SEN Sheet</span></a></p>
        <p class="Paragraph-Style-18pt" id="u250481-25" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-29" style="user-select: auto;">Through Prayer<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP4_ThroughPrayer.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-30" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-34" style="user-select: auto;">Through Conversion <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP5_ThroughConversion.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-38" style="user-select: auto;">Extra activity -<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP4_ConversionStory.docx" style="user-select: auto;"> story</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-39" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-43" style="user-select: auto;">Through Church <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Miracles.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-44" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-48" style="user-select: auto;">Through Miracles <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP7_ChurchTradition.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-52" style="user-select: auto;">Miracles <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Miracles.docx" style="user-select: auto;">Activity</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-53" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-57" style="user-select: auto;">Through Nature <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Nature.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-58" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-62" style="user-select: auto;">Through History <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Nature.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-66" style="user-select: auto;">Activity<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP7_History.docx" style="user-select: auto;"> Texts</a></p>
        <p class="Paragraph-Style-14pt" id="u250481-67" style="user-select: auto;">&nbsp;</p>
      </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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

Blaming Bootstrap is no solution.  The critical code errors must be resolved ASAP. 

 

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

quote

Blaming Bootstrap is no solution.  The critical code errors must be resolved ASAP. 

 


By @Nancy OShea

 

Joke, cant resist, the OP seemed to point the finger partially at Bootstrap - <snip>using Dreamweaver 21.1 Bootstrap 4.4.1</snip>

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
Explorer ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

I originally made the site using Muse, and as a short cut to getting all the links to all the individual files, i copied the html export of the file, and it came with junk included.

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

quote

I originally made the site using Muse, and as a short cut to getting all the links to all the individual files, i copied the html export of the file, and it came with junk included.


By @Weat01

 

I think youre better off rebuilding the tab panel component by refering to the Bootstrap documentation at the link I provided. At the moment it's very messy and by the time you interweave the Bootstrap code that is needed it will become even more obtuse.

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
Explorer ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

I have just republished the page with Lorem Ipsum content replaying the links etc but the tab pane error still occurs.

https://www.quodvultdeus.com/TestingTabPanes.php

 

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

quote

I have just republished the page with Lorem Ipsum content replaying the links etc but the tab pane error still occurs.

https://www.quodvultdeus.com/TestingTabPanes.php

 


By @Weat01

 

 

You still have errors in your coding. Maybe either Nancy or Ben can give you some advice as to what to do to correct them, they are efficient Bootstrap users. I don't sort Bootstrap errors out because the component code is too bloated for me to have any desire to waste my time looking through the mess it creates.

 

EDITED

Can you please STOP corrupting the default Bootstrap css file. If you link the CDN version up to your page and get rid of the corrupted version of the css file you currently have, the tab panel works as expected, regardless of the errors still in your page.

 

CDN version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

 

How do you expect things to function correctly when you keep corrupting them, it aint going to happen my friend, not in a million years.

 

NEVER alter the default Bootstrap file UNLESS you're a css expert. If you want to overide the default styling use a separate stylesheet linked to your page/s

 

 

 

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 ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

LATEST

 

quote

I originally made the site using Muse...

======

Pure poison and a really bad way to begin a new project.   Muse code was hideous.  Garbage in, garbage out.  For best results, start fresh with clean code.

 

1. Go to File > New > Starter Template.

2. Click on Bootstrap Templates.

3. Pick a layout.

4. Hit the Create button.

5. File > SaveAs BS4-tabbed-panels.html (see screenshot).

 

File > New > Starter TemplatesFile > New > Starter Templates

 

Once saved, your Files Panel should look something like this:

Files Panel (F8), Local SiteFiles Panel (F8), Local Site

 

Go to Insert > Bootstrap Components> Tab.

Ctrl + S to save.

 

 

 

Post back if you have further 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