Author Topic: Map Tutorial [ CSS & HTML ]  (Read 863 times)


  • Owlbear
  • *
  • Posts: 350
    • View Profile
Map Tutorial [ CSS & HTML ]
« on: March 22, 2006, 01:23:09 AM »
Hi, this turned out to be more of a template than a tutorial.  Had some problems posting code.

for reference, my map.  ---->      Map of Relygar   ( you're welcome to 'view page source' if you like. ((goto 'VIEW' at the top of the browser >> [ page ] Source)) ).

--- ****** What you need. ****** ---
* text editor ( i recommend 'wordpad' over 'notepad' you can not use MSWORD ).

--- ****** What you need to know. ****** ---

super-basics in few words.
- HTML (Hyper Text Markup Language) is a webpage programming language.   Consider this the structure / skeleton for your map.
- CSS (Cascading Style Sheets) is also a webpage programming language.   Consider this the skin / style for your map.
*  When used together, we get a good webpage.
*  You can style your webpage in HTML, but you shouldn't !  :crazy:

--- ****** Tutorial. ****** ---  
( i had a lot of problems posting the code in the forum.  All of the actual tutorial information is in the source code i link to. )

1. Make a new folder on your desktop entitled 'map' or something equally as clever.

2.  Right click on these links and 'Save Link As'
* this is the base HTML for your map.
Code: (html4strict) [Select]



* 100 x 200

* 200 x 200

* 300 x 50

* this is the style for the map.
Code: (CSS) [Select]
/* This is where you decide where your map stuff will go, known as the 'style sheet'.
NOTE:   In CSS an 'id' is defined by placing a '#' sign directly infront of the name.
        A 'class' is defined by placing a '.' infront of the name.*/

/* In the HTML i wrote,
.  This defines the 'id' of 'whole_page'. */
#whole_map {
height: 390px;
width: 497px;
background-image: url('./map_graph.jpg');

/* In the HTML i wrote, * 100 x 200 .  This defines the 'class' of 'city1'. */
.city1 {
position: absolute;  
top: 100px;           /*This is how I tell the HTML where to put this*/
left: 200px;          /* Trial and error is an easy way to get things where you want them. */

.city2 {
position: absolute;
top: 200px;
left: 200px;

.city3 {
position: absolute;
top: 300px;
left: 50px;

/* Rinse, Repeat */

*Notice how HTML is similar to the BBcode you use on the forum to style your post.    
Map Graph
* the background image i used in the example.
* Make sure you've saved all these files to the 'map' directory you made.

3. Open the file 'map.html'in your text editor.
*  Read through it, then do the same to 'map.css'.  

You can open map.html in yor webrowser to see the results.

----  sorry, I was trying to post the actual tutorial here, but somethings funky with the [ code] tags.

Ill see if i can make this look better later.   And I'll post how I made the 'legend' and those cool symbols (if viewing my page's source code doesnt help).

Paint.NET this is a free program designed to replace the default paint program.
-  After you download, and install it, it will tell you that you need the '.NET framework' and will automatically send you to this page to get it.
- Absolutely worth getting if you're using MSpaint.  (i use it.)

Let me know if you have any questions.
« Last Edit: March 23, 2006, 10:51:26 PM by daggerhart »
"So, Scientology, you may have won THIS battle, but the million-year war for earth has just begun!" the two said in a statement that seemed to parody Scientology as science fiction. "Temporarily anozinizing our episode will NOT stop us from keeping Thetans forever trapped in your pitiful man-bodies. Curses and drat! You have obstructed us for now, but your feeble bid to save humanity will fail! Hail Xenu!!!"