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

Re: Hyperlinks don't work [Branched from 2017 topic]

New Here ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

I have the same issue.  When I fill in a link, the navigator doesn't navigate there.  I think this is what the person was trying to say, don't know.  Anyway:

Using the demo they provided, I added a web page it should like to, so it is all exactly as provided for the RENDERED tutorial, just, I added a link instead of the hash tag and you can not click on Home, About, or anything and have it go to the link:

<header>
<a class="site-logo">
<img class="logo" src="images/logo-white.png">
</a>
<nav class="site-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="../PortfolioBWH.html">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tickets</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

I read out there that there might be problems with cod with ul li a all in one line like this, which is in the css file

.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #fff;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid white;
}
Has anyone at adobe made the RENDERED demo nav words at the top successfully go to a web page, as in a link, hyperlink?  Thanks.
J
TOPICS
Code

Views

448

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

Not only at Adobe, but the whole world has successfully coded hyperlinks. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Wappler, the only real Dreamweaver alternative.

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

I challenge you to take the adobe tutorial files (the html and the cs) and take one nav button and make it link to a file.  I did just that, here it is.  The only code I changed was to add the file I wanted it to link to.

http://www.brushwithscience.com/Demos/css-layout-indexDone.html

Under the About button, I linked to a file.  Don't like my file, put your own.  The code is all right there, or you can get it here:

https://helpx.adobe.com/dreamweaver/how-to/learn-css-basics-of-web-page-layout.html?playlist=/servic...

elpx.adobe.com

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

And when I say file, I mean a file on my site, so you can put any url you like in there.

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

And just to be sure, I put a link from the internet 🙂

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

This is not a link. 

<a class="site-logo">
<img class="logo" src="images/logo-white.png">
</a>

 

This is a link:

<a class="site-logo" href="https://example.com">
<img class="logo" src="images/logo-white.png">
</a>

 

This is not a link.

<li><a href="#">Home</a></li>

 

This is a link:

<li><a href="index.html">Home</a></li>

 

See the differences between absolute, page-relative and site root-relative links below.

https://helpx.adobe.com/dreamweaver/using/linking-navigation.html

 

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
New Here ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

I replaced this code with a proper link, and that doesn't help\

<nav class="site-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://wappler.io">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tickets</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

All I did was take the tutorial, replace the hash tag with a link.  Doesn't 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
Community Expert ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

It works for me. 

 

I suspect something is missing that you're not sharing with us.

Upload your problem page to your remote server and post the URL here.  We'll take a closer close at what you've got going on.

 

 

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

Perhaps there is something wrong with the tutorial css file regarding nav.  If you don't feel like looking at the tutorial files, here is an excerpt.

.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 80%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #fff;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid white;
}

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

I put a regualr link versus the nav link on my own website I am redoing.  you can see that the nav words at the top do nothing, while the regular link sitting in the middle of the picture labeled portfolio works.  There is definitely a problem with the way the tutorial is doing it, so you have to use the whol package, not just a little excerpt of the code.

http://www.brushwithscience.com/IntexLap.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
New Here ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

Thanks for looking.

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

That tutorial is very outdated.  I don't recommend using it in 2023.

 

Navigation links work just fine.  But nobody can access them because your <header> is burried underneath the hero-content by these styles. Remove them and navigation links will appear on top as expected.

 

.hero-content {
	font-family: 'acumin-pro-extra-condensed', sans-serif;
	color: black;
	position: absolute;
	z-index: 20000;
	padding-top: 30em;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	

 

That said, I wouldn't spend more time on this layout. Modern Bootstrap uses CSS Flexbox instead of old fashioned floats. It's better for many reasons.

 

image.png

 

As a quick example.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--minified Bootstrap 5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<!--navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--COMMENT-->
<div class="container mt-3">
<div class="row">
<div class="col-md-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>

<p>In this example, the navigation bar is hidden on all small screens and replaced by a button in the top right corner.
</p>
<p>When  button is clicked, the  navigation bar will open to reveal vertically stacked links.</p>
</div>
</div>
</div>

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

 

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
Community Expert ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

Bootstrap Tutorials:

https://helpx.adobe.com/dreamweaver/using/bootstrap.html

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

 

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

The problem here is that your 'hero-content' section is sitting above the 'site-nav'. This prevents the links form being clickable because you have used:

 

position: absolute;
z-index: 20000;

The sticking plaster solution is to add z-index: 30000; to the 'header' css
header {
width: 100%;
top: 0;
padding: 1.5em;
position: fixed;
z-index: 30000;
}

 

Be aware you have also declared another 'header' css selector further down your css list which needs to be deleted. Please do not duplicate css selectors around all over the place as it makes it almost impossible to troubleshoot!

 

The tutorial is dated and you should not be using it today. No one uses floats anymore to layout a page. The tutorial should be removed as a source of learning.

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

quote

The tutorial is dated and you should not be using it today. No one uses floats anymore to layout a page. The tutorial should be removed as a source of learning.


By @osgood_

 

I am dated, Dreamweaver is dated so why shouldn't the tutorial be dated? All three of us still function. 😁

Wappler, the only real Dreamweaver alternative.

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 ,
Feb 05, 2023 Feb 05, 2023

Copy link to clipboard

Copied

Thank you, everyone, I will try all of this and reconsider my approach to website building.  I will try and see in a bit.

all the best

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 ,
Feb 14, 2023 Feb 14, 2023

Copy link to clipboard

Copied

OK, all of the suggestions are basically asking me to alter the tutorial file.  Since it is not recommended that I use this tutorial and need to venture into new territory, like Bootstrap and whatever, my solution was to go to Wix.  I didn't want to do that.  I wanted to stay on my own host and do it myself, but I have never used bootstrap and do not see a tutorial like the nice video for Dreamweaver.  Do you plan to have one?  

Now, I am moving on to my eBook.  Does InDesign plan to allow for continuous audio over multiple page turns?  If not, is there anything out there that does? 

Thanks,

Julie

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 ,
Feb 14, 2023 Feb 14, 2023

Copy link to clipboard

Copied

LATEST

Bootstrap is very well documented by Bootstrap.  Millions of websites use it and it has a very strong support community.

 

===========

 

Auidio books on Audible are a separate category.

https://www.amazon.com/audiobooks/s?k=audiobooks

 

Refer to Kindle Direct Publishing's specifications for e-books containing audio/video.

https://kdp.amazon.com/help/topic/GCRRGQL2SPQXYXD4

 

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