html - 元素定位关闭
问题描述
我正在为历史课编写一个网站。该网站的背景是一张欧洲地图,地图上是数字。该网站的目标是将这些号码定位在特定国家/地区,以便当用户将鼠标悬停在某个号码上时,它会显示该国家/地区的方言和宗教。我的问题是,当我在另一台计算机上打开网站时,所有数字都关闭了,并且没有定位在正确的国家/地区。我尝试使用百分比来定位它们无济于事。我确定这是一个业余错误,但我似乎找不到解决方案,我需要明天在学校展示该网站。如果有人能想到解决方案,将不胜感激!我已经发布了以下页面之一的代码。
编辑这里是该站点屏幕截图的链接,其中 1 位于正确的位置,但是在另一台 PC 上打开时它会发生变化。https://gyazo.com/9b4bc7d51178d45c74130f7ea4b0b9e2
<html>
<head>
<title>Celtic Region</title>
<style>
div {
float: left;
position: relative;
}
body {
margin: 0px;
background-color: ffffcc;
}
.header {
width: 100%;
height: 8%;
font-size: 50px;
font-family: verdana;
background-color: 659DBD;
text-align: center;
text-shadow: 2px 2px 6px black;
padding-bottom: 15px;
color: white;
}
.navbar {
width: 100%;
height: 5%;
display: inline-block;
text-align: center;
background-color: 659DBD;
font-family: verdana;
font-size: 25px;
padding-top: 5px;
box-shadow: 8px 8px 10px gray;
}
.navbar a:link {
text-decoration: none;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
color: white;
border-radius: 10px;
text-shadow: 2px 2px 3px gray;
}
.navbar a:visited {
color: white;
}
.navbar a:hover {
background-color: gray;
visibility: visible;
}
.map {
background: url(BlankMap.png) no-repeat 50% 0;
}
.irishGaelic {
font-family: verdana;
font-size: 30px;
left: 360px;
top: 470px;
position: absolute;
}
.irishGaelic:hover .popupText {
visibility: visible;
}
.popupText {
visibility: hidden;
font-size: 15px;
position: static;
background-color: black;
color: white;
border-radius: 6px;
padding: 5px;
}
.scotsGaelic {
font-family: verdana;
font-size: 30px;
left: 240px;
top: 600px;
position: absolute;
}
.scotsGaelic:hover .popupText {
visibility: visible;
}
.welsh {
font-family: verdana;
font-size: 30px;
top: 610px;
left: 370px;
position: absolute;
}
.welsh:hover .popupText {
visibility: visible;
}
.breton {
font-family: verdana;
font-size: 30px;
left: 350px;
top: 760px;
position: absolute;
}
.breton:hover .popupText {
visibility: visible;
}
</style>
</head>
<body>
<div class="header">
Western Europe Ethno Linguistic Map
</div>
<div class="navbar">
<a href="CelticRegion.html">Celtic Region</a>
<a href="GermanicRegion.html">Germanic Region</a>
<a href="RomanceRegion.html">Romance Region</a>
</div>
<div class="map">
<img src="BlankMap.png" alt="Western Europe">
<div class="irishGaelic">1
<div class="popupText">
Dialect: Irish-Gaelic<br>
Religion: Catholic
</div>
</div>
<div class="scotsGaelic">2
<div class="popupText">
Dialect: Scots-Gaelic<br>
Religion: Protestant
</div>
</div>
<div class="welsh">3
<div class="popupText">
Dialect: Welsh<br>
Religion: Protestant
</div>
</div>
<div class="breton">4
<div class="popupText">
Dialect: Breton<br>
Religion: Protestant
</div>
</div>
</div>
</body>
解决方案
推荐阅读
- java - Java:如何验证自然语言文本
- multithreading - 创建两个可变引用,它们对 Rust 中的结构是线程安全的
- gradle - 无法使用 Gradle 构建 Git 项目
- python - 如何使用 Requests POST 方法从网站获取搜索结果?
- react-native - 为什么在更新到 macOS catalina 后立即在 react-native 中出现“Watchman crawl failed”错误?
- php - file_get_contents(): json 文件的文件名不能为空
- javascript - 量角器 - sendKeys md-contact-chips 不工作
- javascript - 如何将数百个 JS 对象属性放入数组中以用作 chart.js 轴/数据
- sql - SQL 完整性检查在更新和插入时不同
- javascript - 使用 getElementsByClassName() 方法获取匹配类的前 x 个元素