#html #css
Вопрос:
У меня есть карта 1000×1300, которая будет содержать области размером 20 пикселей, но в настоящее время на ней не отображаются какие-либо области.(они отображаются серым цветом в Firefox inspect). Также мне нужно создать сетку, которая разделяла бы области, чтобы пользователю было легче их выбирать. Любая помощь была бы великолепна!
#biggrid {
position: relative;
top: 0;
right:50px;
width: 1300px;
height: 1000px;
border: 3px solid purple;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#bigmap {
display:inline-block;
height:1000px;
width:1300px;
background-size:cover;
background: url("../images/banner-bg.jpg") no-repeat;
}
area{
border:7px solid grey;
display:inline-block;
} <div id="biggrid">
<map id="bigmap">
<area shape="rect" coords="0,0,10,10" href="images/logoicon.png"
title="getpixel.net, stock photography">
<area title="First area ever!"/>
</map>
<div> Область выделена серым цветом:
Комментарии:
1. Одна из проблем, которую я вижу, заключается в том, что div #biggrid расположен на 50 пикселей левее, так что область 10×10 находится за пределами окна просмотра.