glisha/centered.css

## centered.css
    * {
        margin:0;
        padding:0;
        }

    html, body {
        height:100%;
        }

    body {
        font-size: 100.01%/1.4;
        font-family: "DejaVu Sans", sans-serif;
        text-align:center; /* horizontal centering for IE Win quirks */
        }

    #distance {
        width:1px;
        height:50%;
        margin-bottom:-13.75em; /* half of container's height */
        float:left;
        }

    #container {
        margin:0 auto;
        position:relative; /* puts container in front of distance */
        text-align:left;
        height:27.5em;
        width:45em;
        clear:left;
        }

    #container > * {
        margin: 1.5em 0;
        text-align:center;
        }

## iemac-center.css
/* thank you http://d-graff.de/fricca/center.html fricca[at]uk2.net for your great example */


html, body {
	height:auto;
	}

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Која ми е адресата?</title>
<link rel="stylesheet" href="centered.css" type="text/css">
<style type="text/css">@import("iemac-center.css");</style>
<style type="text/css">
  body {
    font-family: "DejaVu Sans", sans-serif;
  }
  #distance {
     margin-bottom:-17.75em;
  }
  #container {
    width: 45em;
    height: 17.5em;
    border: 1px solid #000;
  }
  #container h1, form {
    text-align:center;
  }

  #info p {
    width: 35em;
    margin: 1em 5em;
    text-align: center;
    line-height: 1.4em;
    color: #777;
  }
  #notice {
     width: 45em;
     margin:0 auto;
     position:relative;
     text-align: left;
     line-height: 1.4em;
     color: #777;
  }
  #notice ul {
    list-style-position: inside;
    padding-left: 1.5em;
    text-indent: -1em;
  }
  #notice A {text-decoration: none; border-bottom: 1px dashed;}
  #notice A:link {color: #000}
  #notice A:visited {color: #777}
  #notice A:hover {color: blue; border-bottom: 1px solid}

  span#fonts {
    font-family:monospace;
    font-size:0.8em;
  }

</style>
</head>
<body>
<div id="distance"></div>

<div id="container">
    <h1>
        <!--#echo var="REMOTE_ADDR"--><br />
        <img src="/check" />
    </h1>
    <div id='info'>
       <p>е адресата со која пристапуваш до тука</p>
    </div>
</div>
<div id='notice'>
    <strong>Екстра:</strong>
    <ul>
        <li>Со <a href="/get">http://myip.ot.mk/get</a> ќе ја добиеш само адресата без пропратниов spam;</li>
        <li>Со <a href="http://ipv6.ot.mk">ipv6.ot.mk</a> или <a href="http://ipv4.ot.mk">ipv4.ot.mk</a> форсираш ipv4 или ipv6.</li>
        <li>Можеш да ембедираш слика <a href="http://myip.ot.mk/check">&lt;img src="http://myip.ot.mk/check" &gt;</a>, која ќе ти каже дали користиш ipv4 или ipv6;</li>
        <li>Конфигурацијата е на <a href="https://gist.github.com/1710068">gist</a>.</li>
    </ul>

</div>

</body>
</html>

## myip.conf
# nginx config file, I just include it in the main config file
    server {
        listen       80;
        server_name  ip.ot.mk myip.ot.mk ipv4.ot.mk;
        root html;

        location / {
            default_type text/html;
            index index.html;
            ssi on;
        }
        location =/check {
            default_type image/png;
            alias html/ipv4.png;
        }
        location =/ip.png {
            alias html/ipv4.png;
        }
        location =/get {
            default_type text/html;
            alias html/myip.html;
            ssi on;
        }

    }

    server {
        listen       [::]:80 ipv6only=on;
        server_name  ip.ot.mk myip.ot.mk ipv6.ot.mk;
        root html;

        location / {
            default_type text/html;
            index index.html;
            ssi on;
        }
        location =/check {
            default_type image/png;
            alias html/ipv4.png;
        }
        location =/ip.png {
            alias html/ipv4.png;
        }
        location =/get {
            default_type text/html;
            alias html/myip.html;
            ssi on;
        }
    }

## myip.html
<!--#echo var="REMOTE_ADDR"-->
	* {
	margin:0;
	padding:0;
	}

	html, body {
	height:100%;
	}

	body {
	font-size: 100.01%/1.4;
	font-family: "DejaVu Sans", sans-serif;
	text-align:center; /* horizontal centering for IE Win quirks */
	}

	#distance {
	width:1px;
	height:50%;
	margin-bottom:-13.75em; /* half of container's height */
	float:left;
	}

	#container {
	margin:0 auto;
	position:relative; /* puts container in front of distance */
	text-align:left;
	height:27.5em;
	width:45em;
	clear:left;
	}

	#container > * {
	margin: 1.5em 0;
	text-align:center;
	}
	/* thank you http://d-graff.de/fricca/center.html fricca[at]uk2.net for your great example */


	html, body {
	height:auto;
	}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Која ми е адресата?</title>
	<link rel="stylesheet" href="centered.css" type="text/css">
	<style type="text/css">@import("iemac-center.css");</style>
	<style type="text/css">
	body {
	font-family: "DejaVu Sans", sans-serif;
	}
	#distance {
	margin-bottom:-17.75em;
	}
	#container {
	width: 45em;
	height: 17.5em;
	border: 1px solid #000;
	}
	#container h1, form {
	text-align:center;
	}

	#info p {
	width: 35em;
	margin: 1em 5em;
	text-align: center;
	line-height: 1.4em;
	color: #777;
	}
	#notice {
	width: 45em;
	margin:0 auto;
	position:relative;
	text-align: left;
	line-height: 1.4em;
	color: #777;
	}
	#notice ul {
	list-style-position: inside;
	padding-left: 1.5em;
	text-indent: -1em;
	}
	#notice A {text-decoration: none; border-bottom: 1px dashed;}
	#notice A:link {color: #000}
	#notice A:visited {color: #777}
	#notice A:hover {color: blue; border-bottom: 1px solid}

	span#fonts {
	font-family:monospace;
	font-size:0.8em;
	}

	</style>
	</head>
	<body>
	<div id="distance"></div>

	<div id="container">
	<h1>
	<!--#echo var="REMOTE_ADDR"--><br />
	<img src="/check" />
	</h1>
	<div id='info'>
	<p>е адресата со која пристапуваш до тука</p>
	</div>
	</div>
	<div id='notice'>
	<strong>Екстра:</strong>
	<ul>
	<li>Со <a href="/get">http://myip.ot.mk/get</a> ќе ја добиеш само адресата без пропратниов spam;</li>
	<li>Со <a href="http://ipv6.ot.mk">ipv6.ot.mk</a> или <a href="http://ipv4.ot.mk">ipv4.ot.mk</a> форсираш ipv4 или ipv6.</li>
	<li>Можеш да ембедираш слика <a href="http://myip.ot.mk/check"><img src="http://myip.ot.mk/check" ></a>, која ќе ти каже дали користиш ipv4 или ipv6;</li>
	<li>Конфигурацијата е на <a href="https://gist.github.com/1710068">gist</a>.</li>
	</ul>

	</div>

	</body>
	</html>
	# nginx config file, I just include it in the main config file
	server {
	listen 80;
	server_name ip.ot.mk myip.ot.mk ipv4.ot.mk;
	root html;

	location / {
	default_type text/html;
	index index.html;
	ssi on;
	}
	location =/check {
	default_type image/png;
	alias html/ipv4.png;
	}
	location =/ip.png {
	alias html/ipv4.png;
	}
	location =/get {
	default_type text/html;
	alias html/myip.html;
	ssi on;
	}

	}

	server {
	listen [::]:80 ipv6only=on;
	server_name ip.ot.mk myip.ot.mk ipv6.ot.mk;
	root html;

	location / {
	default_type text/html;
	index index.html;
	ssi on;
	}
	location =/check {
	default_type image/png;
	alias html/ipv4.png;
	}
	location =/ip.png {
	alias html/ipv4.png;
	}
	location =/get {
	default_type text/html;
	alias html/myip.html;
	ssi on;
	}
	}