Hyperlinks don't work [Branched from 2017 topic]

[Julie28263110pqn6]

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

[BenPleysier]

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

[Julie28263110pqn6]

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

[Julie28263110pqn6]

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

[Julie28263110pqn6]

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

[Nancy OShea]

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.

[Julie28263110pqn6]

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>

[Julie28263110pqn6]

All I did was take the tutorial, replace the hash tag with a link.  Doesn't work. 

[Nancy OShea]

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.

[Julie28263110pqn6]

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;

}

[Julie28263110pqn6]

Here is the url

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

[Julie28263110pqn6]

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

[Julie28263110pqn6]

Thanks for looking.

[Nancy OShea]

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.

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 OShea]

Bootstrap Tutorials:

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

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

[osgood_]

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.

[BenPleysier]

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

[Julie28263110pqn6]

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

[Julie28263110pqn6]

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

[Nancy OShea]

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