Hamumu Software Hamumu Software Hamumu Software
Name
Password Register
Latest Journal update: Oct 22, 2017
Old 05-05-2015, 09:40 PM   #1
Boneheads
King of the Boneheads
 
Boneheads's Avatar
 
Join Date: Apr 2009
Location: Utah, United States
Posts: 1,249
Default HTML/CSS Help

I've been making fun little webpages in my free time, and I'm having trouble with one. I have two buttons, "Germany" and "Czech Republic". Here's the URL: http://zix.supernuker.com/thi/pnemaps.html
I want to make it so the "clickable region" of each button is limited to its opaque pixels (if that makes any bit of sense).
Here's the HTML:
HTML Code:
<!DOCTYPE html>

<html>
    <head>
        <link rel=stylesheet href="http://zix.supernuker.com/thi/pnemaps.css" type="text/css">
        <title>pne: Maps</title>
    </head>
    <body>
        <a class="country" class="europe_cou" id="cou_europe_germany_b" href="#">
                  <p id="cou_europe_germany_t">Germany</p>
        </a>
        
        <a class="country" class="europe_cou" id="cou_europe_czech-republic_b" href="#">
                  <p id="cou_europe_czech-republic_t">Czech Republic</p>
        </a>
    </body>
</html>

and here's the CSS:
Code:
body {
    font-family: "Open Sans", sans-serif;
}

/* For all countries */

.country {
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: center;
}

/* For all countries in Europe */

.europe_cou {

}

/* Germany, Europe */

#cou_europe_germany_b {
    width: 97px;
    height: 129px;
    background-image: url(http://zix.supernuker.com/thi/pnemaps_button_germany.png);
}

#cou_europe_germany_b:hover {
    background-position: 97px;
}

#cou_europe_germany_t {
    font-size: 16px;
  padding-top: 43px;
}

/* Czech Republic, Europe */

#cou_europe_czech-republic_b {
    width: 71px;
    height: 41px;
    background-image: url(http://zix.supernuker.com/thi/pnemaps_button_czech-republic.png);
  margin: -75px 0px 0px 69px;
}

#cou_europe_czech-republic_b:hover {
    background-position: 71px;
}

#cou_europe_czech-republic_t {
  font-size: 10px;
  margin-left: 1px;
  padding-top: 11px;
  line-height: 10px;
}

I've read a little bit about <map>, <area>, svg, etc.. but I have no idea how to incorporate it into my code. If anybody could help me with this, I'd be very much grateful.
Boneheads is offline   Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Custom HTML/CSS for certain URLs/Domains? Boneheads General Blabber 2 04-18-2015 11:43 AM
HTML Help 2 Boneheads General Blabber 8 03-26-2010 10:16 AM
HTML Help Boneheads General Blabber 8 02-20-2010 07:26 PM
HTML helps ducklegion Total Mayhem 4 04-05-2008 04:18 AM
HTML Justin General Blabber 3 06-04-2005 10:36 AM


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2017, vBulletin Solutions Inc.
Site Map
Copyright 2017, Hamumu Games Inc.