Эффект HTML
Вот что происходит, когда я запускаю HTML ниже в браузере (Chrome & Safari).
Не может быть нормального поведения. Чего мне не хватает?
При использовании фреймворка Materialize (materializecss.com) никаких дополнительных CSS с CSS-файлом материализации не требуется.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content="styling, interieur, kleur, inrichting">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/css/materialize.min.css">
<style>
.btn-floating {margin: auto;}
</style>
<title>BOOST-Restyling Interieur Styling</title>
<link rel="icon" type="image/gif" href="img/boost.ico">
</head>
<body>
<div class="center">
<div class="left">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar vorig project"
href="prj-5-detail.html"><i class="material-icons">chevron_left</i></a>
</div>
<div class="center">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Terug naar
projecten" href="projecten.html"><i class="material-icons">close</i>
</a>
</div>
<div class="right">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar volgend
project" href="prj-2-detail.html"><i class="material-icons">
chevron_right</i>
</a>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Compiled and minified Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/js/materialize.min.js"></script>
</body>
</html>