pronounsThey/Them
544written posts
offlinecurrently
So I've been picking and poking at this for a bit and I'm officially stumped! I want to make an interactive map, and all the pieces are where they need to go and it works mechanically, but I can't seem to get the text to sit within the boxes that pop up! Ideally I would like for the information to pop up in a box that's black with a lower opacity and white text, something sleek, but I've only managed to make it clunky and kooky looking, the text is all out of whack and I've run out of ideas to fix it! fairfarren.jcink.net/index.php?act=Pages&pid=2^The page itself! I think I've coded myself into a corner because I can't seem to effectively alter the text boxes at all? I'd really appreciate someone rescuing me from myself LOL! And the entire code block
<div class="distribution-map">
<img src="https://img.nickpic.host/UvmyGe.png" alt="" />
<button class="map-point" style="top:62.2%;left:18.8%">
<div class="content">
<div class="centered-y">
<h2>Haven</h2>
<p>Haven is the right place to go if the sky is your home, built into the face of a great mountain, the city spills out into the surrounding base of the mountain. A tangled confusion of cable cars and winding streets, the city is the favored spot for those with flight capabilities.</p>
</div>
</div>
</button>
<button class="map-point" style="top:28.9%;left:35.9%">
<div class="content">
<div class="centered-y">
<h2>Refuge</h2>
<p>Refuge is a sprawling but comfortable city crisscrossed with trolley lines and littered with parks and walking trails. Many who come to this place from the Starfall Shores inevitably opt to stay far beyond their initial adjustment period. This city is the true melting pot of Halcyon, boasting an incredibly varied and diverse population both human and non-human alike.</p>
</div>
</div>
</button>
<button class="map-point" style="top:51.8%;left:77.6%">
<div class="content">
<div class="centered-y">
<h2>Sanctuary</h2>
<p>The city by the lake, Sanctuary is a canal riddled town that can be an overwhelming labyrinth to newcomers upon their first visit, they are a city known for the arts and that is evident in every piece of architecture. The lake is a favorite destination throughout the entire year, from the warm months of swimming and sailing, to the cold ice skating competitions, Sanctuary is a favored travel destination for all of Halcyon. </p>
</div>
</div>
</button>
<button class="map-point" style="top:81%;left:17.4%">
<div class="content">
<div class="centered-y">
<h2>Fairshore</h2>
<p>South of Haven is the coastal village of Fairshore, much of the buildings are constructed out onto jetties and piers to accommodate the large concentration of sea-folk who have chosen to settle here. They are the main supplier of fish to the rest of the region.</p>
</div>
</div>
</button>
<button class="map-point" style="top:20.3%;left:53.5%">
<div class="content">
<div class="centered-y">
<h2>Maplerest</h2>
<p>Caught in a perpetual state of fall for reasons unknown, Maplerest is a village that seems trapped in the autumnal grips of October, you see a lot of monsters and spooky folk calling this city home, but they're all mostly friendly.</p>
</div>
</div>
</button>
<button class="map-point" style="top:15%;left:67.6%">
<div class="content">
<div class="centered-y">
<h2>Wolfcross</h2>
<p>The largest forest in the region, Wolfcross is dominated by the animals that have come to call the region home, some species such as lions or wolves will choose to settle into their own specific groups, there is no one village of Wolfcross, it is instead the entire forest.</p>
</div>
</div>
</button>
<button class="map-point" style="top:45.2%;left:52.2%">
<div class="content">
<div class="centered-y">
<h2>Lakecrest</h2>
<p>A very small lake-side village that is quaint and medieval in nature, there is a high population of fairy folk here, but it mainly cropped up as a halfway point between Refuge and Sanctuary. There is a large inn and several general stores, but only a small handful of people actually live here.</p>
</div>
</div>
</button>
<button class="map-point" style="top:70.2%;left:77.7%">
<div class="content">
<div class="centered-y">
<h2>Winterwell</h2>
<p>Near the base of the mountains that dominate Sanctuary's horizon line is the village of Winterwell, caught in a perpetual cold, this small village doesn't see regular seasons, instead it sees less or more snow depending on the time of year, with a small window of green and relative warmth in the summer months.</p>
</div>
</div>
</button>
<button class="map-point" style="top:65%;left:56.7%">
<div class="content">
<div class="centered-y">
<h2>Wildmire</h2>
<p>A small village nestled in the moors across the bay from Lakecrest, this village was founded and is heavily populated by the bipedal animal-folk, especially known for their hunting and trapping, they export a large amount of meat and tools from their blacksmiths.</p>
</div>
</div>
</button>
<button class="map-point" style="top:13.1%;left:27%">
<div class="content">
<div class="centered-y">
<h2>Stardust Shores</h2>
<p>One of the first locations most will see upon entering this world, the sands are a crystal white that seem to sparkle in the sunlight, and at night they're lit up with the bioluminescent material that gives the region its name. The city that was founded is small, but serves as an entry point to the rest of Halcyon.</p>
</div>
</div>
</button>
</div>
<style>
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
border-bottom: 1px solid var(--bordercolor);
font-family: Silkscreen;
color: var(--accent-color);
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
text-align: right;
}
h3 {
font-size: 18pt;
}
h4 {
font-family: var(--mono-font);
font-size: 20px;
color: #3C4789;
letter-spacing: 3px;
text-transform: uppercase;
margin: auto;
}
h4 {
display: flex;
flex-direction: row;
}
h4:before, h4:after{
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
h4:before {
margin-right: 10px;
}
h4:after {
margin-left: 10px;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
color: #fff;
margin: 5px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 5px;
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 15px;
height: 15px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0s ease-in-out 0s, width 0s ease-in-out 0s, height 0s ease-in-out 0s, z-index 0s ease-in-out 0s;
-o-transition: opacity 0s ease-in-out 0s, width 0s ease-in-out 0s, height 0s ease-in-out 0s, z-index 0s ease-in-out 0s;
-webkit-transition: opacity 0s ease-in-out, width 0s ease-in-out, height 0s ease-in-out, z-index 0s ease-in-out;
-webkit-transition-delay: 0s, 0s, 0s, 0s;
transition: opacity 0s ease-in-out 0s, width 0s ease-in-out 0s, height 0s ease-in-out 0s, z-index 0s ease-in-out 0s;
border: none;
border-radius: 0px;
border-color: #000;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
transition: opacity 0s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.72);
padding: 20px;
overflow: auto;
display: block;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
margin: auto;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
color: #fff;
z-index: 1;
transition: opacity 0s ease-in-out, width 0s ease-in-out, height 0s ease-in-out;
padding: 10px;
overflow: auto;
text-align: justify;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0s ease-in-out 0s, height 0s ease-in-out, overflow 0s ease-in-out;
-o-transition: opacity 0s ease-in-out 0s, height 0s ease-in-out, overflow 0s ease-in-out;
-webkit-transition: opacity 0s ease-in-out, height 0s ease-in-out, overflow 0s ease-in-out;
-webkit-transition-delay: 0s, 0s, 0s;
transition: opacity 0s ease-in-out 0s, height 0s ease-in-out, overflow 0s ease-in-out;
overflow: auto;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #000;
}
</style>
|
|
