Hallo das hier ist ein tolles Test, viel Vergnügen. 'haha

XXXX

Knutsch

eure Ruby

/*  Typo
----------------------------------------------- */

a:link, a:visited
{
    text-decoration: underline;
    color:#3a4557;
text-shadow: #c0c0c0 3px 3px 5px;
}
a:active {     text-decoration: underline; }
a:hover { text-decoration:none; }

a img{
      opacity: 1.0;
      -webkit-transition: all 0.3s linear 0s;
         -moz-transition: all 0.3s linear 0s;
           -o-transition: all 0.3s linear 0s;
              transition: all 0.3s linear 0s;}
              border-radius: 40px;
a img:hover{opacity: 0.6;
      -webkit-transition: all 0.3s linear 0s;
         -moz-transition: all 0.3s linear 0s;
           -o-transition: all 0.3s linear 0s;
              transition: all 0.3s linear 0s;}
               border-radius: 40px;


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p {    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
    background: #333333 url(http://i10.glitter-graphics.org/pub/1140/1140490he5kbo0xir.gif) top left;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
    margin:0 auto;
    width:834px;
    background: url(http://img6.imagebanana.com/img/b56qbxlz/Unbenannt1Kopie.png);
    border-radius: 40px;
    box-shadow: 3px 3px 4px #000;
}

#header
{
    padding:40px;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
    float:left;
    width:220px;
    padding:17px;
    background: url(http://img6.imagebanana.com/img/4p9isv1v/Unbenannt1Kopie2.png);

}
#sidebar
{
    padding-top:10px;
}

#content
{
    float:right;

    width:530px;
    padding:17px;

}

#footer
{
    clear:both;
    margin-top:10px;
    height:65px;
}

#footer .gutter
{
    height:30px;
    padding:35px 15px 0 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;    
    padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;
    border-bottom:1px solid #CCC;
text-shadow: #c0c0c0 3px 3px 5px;
}


ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
    background:#EEE;
    color:black;
}

ul.mainNav1 a.current { font-weight:bold; }

<div id="container">
    <center>
        <br />
        <img src="http://fc04.deviantart.net/fs70/i/2012/092/e/f/still_life_simplicity__by_puellade-d4uppw6.jpg" alt="" style="width: 700px; height: 400px;" />
        <h2>
            -WEIDENRAUSCHEN-
        </h2>
        <br />

        <div id="navigation">
            <var>navigation[1|2|3]</var>
            <div id="sidebar">
                <var>sidebar</var>
            </div>
        </div>

        <div id="content">
            <var>content</var>
        </div>

        <div id="footer">
            <div class="gutter">
                <var>footer</var>
            </div>
        </div>
    </center>
</div>
<script type="text/javascript">
// <![CDATA[
var speed=40; // lower number for faster
var warp=3; // from 1 to 10
var stars=150; // number of stars
var colour="#999"; // colour of stars
var position=2000; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page

/****************************
*      Star Warp Effect     *
*(c)2005-11 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var strz=new Array();
var swide=800;
var shigh=600;
warp=1+warp/125;
window.onload=function() { if (document.getElementById) {
  var i, temp;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.overflow="visible";
  boddie.style.backgroundColor="transparent";
  boddie.style.zIndex=position;
  i=document.body.style.backgroundColor;
  if (document.body.parentNode) {
    if (i) document.body.parentNode.style.backgroundColor=i;
    document.body.style.backgroundColor="transparent";
  }
  document.body.insertBefore(boddie, document.body.firstChild);
  set_width();
  for (i=0; i<stars; i++) {
    strs[i]=document.createElement("div");
    strs[i].style.color=colour;
        strs[i].style.backgroundColor="transparent";
    strs[i].style.position="absolute";
        strs[i].appendChild(document.createTextNode("*"));
        strs[i].style.font="13px monospace";
    stdy[i]=Math.random()*6-3;
    stdx[i]=Math.random()*8-4;
    temp=Math.random()*100;
    strx[i]=swide/2+temp*stdx[i];
    stry[i]=shigh/2+temp*stdy[i];
    if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
    else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
    else strz[i]=2;
        strs[i].style.fontSize=strz[i]+"px";
    boddie.appendChild(strs[i]);
  }
  setInterval("warp_drive()", speed);
}}

function warp_drive() {
  var i;
  for (i=0; i<stars; i++) {
    stry[i]+=stdy[i];
    strx[i]+=stdx[i];
    stdx[i]*=warp;
    stdy[i]*=warp;
    if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) {
          if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px";
      strs[i].style.left=strx[i]+"px";
      strs[i].style.top=stry[i]+"px"
    }
    else {
      strx[i]=swide/2;
      stry[i]=shigh/2;
      strx[i]+=3*(stdx[i]=Math.random()*8-4);
      stry[i]+=3*(stdy[i]=Math.random()*6-3);
          if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
      else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
      else strz[i]=2;
          strs[i].style.fontSize=strz[i]+"px";
    }
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>