Расположение элементов выключено - PullRequest
Новая
       7

Расположение элементов выключено

0 голосов
/ 22 мая 2018

Я кодирую сайт для урока истории.Фон сайта - карта Европы, а на карте - цифры.Цель сайта - разместить эти цифры в определенной стране, чтобы при наведении курсора на цифру отображались диалект и религия этих стран.Моя проблема в том, что когда я открываю веб-сайт на другом компьютере, все номера отключены и не расположены в правильной стране.Я пытался использовать проценты, чтобы расположить их безрезультатно.Я уверен, что это любительская ошибка, но я не могу найти решение, и мне нужно представить сайт в школе завтра.Если кто-нибудь может придумать решение, оно будет с благодарностью!Я разместил код для одной из страниц ниже.

РЕДАКТИРОВАТЬ Вот ссылка на скриншот сайта, где 1 находится в правильном положении, однако он сдвигается, когдаоткрыл на другом ПК.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>

...