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

Why won't my Bootstrap button link work in browsers?

Community Beginner ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

I'm trying to add a button link to my page at http://iwadasn.info The page uses bootstrap. The link is 
<a href="stories.html" class="btn btn-primary">Read More</a>

The same link is used on other pages such as stories.html and works fine but for some reason doesn't work on the index.html page. Anyone got any ideas? Yes - I have uploaded the bootstrap-4.4.1.css file to my css folder and called it in the page header with <link href="css/bootstrap-4.4.1.css" rel="stylesheet">

I'm using Dreamweaver 21.3 build 15593

Views

382

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 2 Correct answers

LEGEND , Sep 30, 2023 Sep 30, 2023

Its because:

<div class="img"></div>

has been positioned over the top of all the other content on the page. That's what happens when you use position: absolute; The element gets taken out of the natural html flow and creates havoc UNLESS you know what you are doing. On this ocassion its blocking access to any user related content like links.

 

A quick fix would be to to add the inline css style below to your button as shown in bold text:

 

<a href="https://iwadasn.info/stories.html" class="btn btn-pri

...

Votes

Translate

Translate
LEGEND , Sep 30, 2023 Sep 30, 2023
quote

That doesn't seem to be the answer but since it was a good idea, I adopted it


By @jaydax1

 

Then think again, it most certainly was the issue and a very common issue it is, for newbies to web development. I've seen it a zillion times before. l tested your page locally so nothing to do with your files not being uploaded to your server.

 

Actually it's not a very good idea, it's more of a hack, which you should not need to use assuming the construction of the page has been built properly.

Votes

Translate

Translate
LEGEND ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

Its because:

<div class="img"></div>

has been positioned over the top of all the other content on the page. That's what happens when you use position: absolute; The element gets taken out of the natural html flow and creates havoc UNLESS you know what you are doing. On this ocassion its blocking access to any user related content like links.

 

A quick fix would be to to add the inline css style below to your button as shown in bold text:

 

<a href="https://iwadasn.info/stories.html" class="btn btn-primary" style="position: relative; z-index:100;">Read More</a>

 

This will force it above the <div class="img"></div> container and it then becomes clickable.

 

Unfortuantely the same problem is happening with your copyright link.

 

Can you not attach background image to another container like:

<div class="jumbotronb jumbotron-fluid text-center">

 

ALSO it seems you are editing the default bootstrap.css file. YOU SHOULD NEVER DO THAT - guaranteed problems will arise. If you require to alter the default Bootstrap css properties or even add your own css then do that in a seperate css style sheet and link it to the page AFTER the link to the default bootstrap.css file.

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 Beginner ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

That doesn't seem to be the answer but since it was a good idea, I adopted it. Investigating further I found that changes I made to the page were not being uploaded to the server, despite Dreamweaver asking me if dependant files should be uploaded. To fix it I found that deleting the server index.html file then uploading the client-side file did the trick.

Seems this may be a bug in Dreamweaver or perhaps there's a setting I may not be aware of in my copy.

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 ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

quote

That doesn't seem to be the answer but since it was a good idea, I adopted it


By @jaydax1

 

Then think again, it most certainly was the issue and a very common issue it is, for newbies to web development. I've seen it a zillion times before. l tested your page locally so nothing to do with your files not being uploaded to your server.

 

Actually it's not a very good idea, it's more of a hack, which you should not need to use assuming the construction of the page has been built properly.

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 Beginner ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

Mea culpa. My response was NOT correct and came from continuing to test while also writing a response.
I made the change you suggested, and it didn't appear to work. I then discovered my file was not being sent to the server. I fixed that and the page now works with your suggestion.
It's not a bug in Dreamweaver either. The last time I worked on a Dreamweaver website I was irritated by pages being uploaded when I saved them locally but before they were finished. I changed my preferences to fix that and since I use Dreamweaver infrequently now, I had completely forgotten I had disabled sync settings.

 

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 ,
Sep 30, 2023 Sep 30, 2023

Copy link to clipboard

Copied

LATEST

Ctrl/Cmd + S = Save document.

Ctrl/Cmd + Shift + U = Upload document to server.

 

 

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