Markup Webdesign Journal

Zeit Kräfte zu sammeln und sich zu inspirieren. Es wird ein heißer Herbst… Den Code zum Selberbasteln gibt es auch.

XHTML

<div id="null">
  <div id="eins">
    <div id="zwei">
      <div id="drei">
        <div id="vier">
          <div id="fuenf">
            <div id="sechs">
              <div id="sieben">
                <div id="acht">
                  <div id="neun">
                    <div id="zehn">
                      <div id="elf">
                        <div id="zwoelf">
                          <!--unendliche Weiten-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<h2>CSS Sommerloch</h2>
<p>Auch bei XHTML nix los</p>
</div>

CSS

 div {
 padding: 10px;
 }
 #null {
   width: 240px;
   height: 240px;
   padding: 0;
   border: 1px solid #92b01a;
   background: #fafafa;
   text-align: center;
   }
 html>body #null {
   width: 260px;
   height: 320px;
   padding: 0 0 50px 0;
   }
        #null h2, p {
   	font-family: 'Trebuchet MS', Arial, Sans-Serif;
   	margin: 20px;
   	}
 #eins {
   width: 240px;
   height: 240px;
   border-bottom: 1px solid #92B01A;
   background: #cffa24;
   }
 #zwei {
   width: 220px;
   height: 220px;
   background: #caf423;
   }
 #drei {
   width: 200px;
   height: 200px;
   background: #c4ed22;
   }
 #vier {
   width: 180px;
   height: 180px;
   background: #bfe621;
   }
 #fuenf {
   width: 160px;
   height: 160px;
   background: #b9df20;
   }
 #sechs {
   width: 140px;
   height: 140px;
   background: #b4d920;
   }
 #sieben {
   width: 120px;
   height: 120px;
   background: #aed21f;
   }
 #acht {
   width: 100px;
   height: 100px;
   background: #a8cb1e;
   }
 #neun {
   width: 80px;
   height: 80px;
   background: #a3c41d;
   }
 #zehn {
   width: 60px;
   height: 60px;
   background: #9ebe1c;
   }
 #elf {
   width: 40px;
   height: 40px;
   background: #98b71b;
   }
 #zwoelf {
   width: 20px;
   height: 20px;
   background: #92b01a;
   }