Bootstrap carousel : hyperlink werkt niet

Status
Niet open voor verdere reacties.
K

Krans

Nieuwe gebruiker
Lid geworden
21 apr 2019
Berichten
4
Hyperlink "href="contact.html" werkt niet !
Iemand die mij kan helpen?

<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>



<style type="text/css">
.carousel .item{
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
</style>


<body>


<table border="0" align="left" cellspacing="0" cellpadding="0" class="header">
<tr>
<td><a href="contact.html"><img src="button-contact.jpg" border="0" alt=""></a></td>
</tr>
</table>


<!----------- slide show ------------------------->


<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel" data-pause="false">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img_platiau1.jpg" alt="First Slide">
</div>
<div class="item">
<img src="img_platiau2.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="img_platiau3.jpg" alt="Third Slide">
</div>
</div>
</div>
</div>
 
Wat werkt er niet aan? Wat gebeurt er?
En met welke reden plaats je een tabel voor enkel een hyperlink?
 
Wat er niet werkt ...

Indien men met de muis de image, "button-contact.jpg" met de hyperlink "contact.html", aanklikt dan gebeurt er niets.

De reden dat dit in een tabel staat is van geen belang. Normaal zijn er meerdere links in deze tabel maar deze zijn weggelaten voor de eenvoud van deze vraag.

Indien dezelfde link onder de slideshow wordt geplaatst, dan werkt de link wel.
 
Heb je een zichtbaar voorbeeld?
 
Maar als het om een menu gaat, is een list van geen beter idee?
Tabellen zijn enkel bedoeld als matrix-overzichten, zoals prijslijsten.
 
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
   ...
<div class="row header">
  <div class="col-sm-12">
    <a style="display:inline-block" href="contact.html"><img class="img-responsive" src="button-contact.jpg" alt=""></a>
  </div>
</div>
   ...
</div><!--/.container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
class 'img-responsive' zet een display: block op de image.
Waarschijnlijk werkt het dan wel.
 
Laatst bewerkt:
Voor de button kan je ook dit gebruiken (of een andere kleur, zie Bootstrap documentatie)
Code: 
<h1><a class="btn btn-primary" href="contact.html">Contact</a></h1>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan