chore: update navigation bar style

kalisio · Aug 19, 2024 · 8caa1d8 · 8caa1d8
1 parent 35b7576
commit 8caa1d8
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/demo/osm-boundaries.html b/demo/osm-boundaries.html
@@ -6,9 +6,23 @@
 	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
 	<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Work+Sans:[email protected]&family=Petrona:[email protected]&family=Raleway:[email protected]" rel="stylesheet">
 </head>
+<style> 
+	#map {
+		width: 100%;
+		height: 950px;
+		float: top;
+	}
+	#navabar{
+		height: 50px;
+		float: top
+	}
+	.container {
+		display: flex;
+	}
+</style>
 <body>
-	<div id="map" style="position: absolute; top: 0; left:0; bottom:0; right: 0;">
-	<div style="position: absolute; z-index: 999"><h2>Highlighted level
+	<div id="navbar">
+	<h2 style="color: black;"> <center> Highlighted level
 		<select id="selectedLevel">
 			<option value="None">None</option>
 			<option value="2">2</option>
@@ -31,8 +45,8 @@
 			<option value="English">English</option>
 			<option value="French">French</option>
 		</select>
-	</h2></div>
-
+	</center></h2></div>
+	<div id="map"></div>
 	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 	<script src="https://unpkg.com/protomaps-leaflet@latest/dist/protomaps-leaflet.js"></script>
 	<script src="leaflet-pmtiles.js"></script>