Div - Kody, triki, sztuczki

26 lis 2010

Ustawienie trzech tagów div w lini

.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}

<div class="a">test 123456</div>
<div class="b">123</div>
<div class="c">123</div>

.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}

<span class="a">test 12345</span>
<span class="b">123</span>
<span class="c">123</span>

9 lip 2010

Ustawienie kolejności warstw za pomocą z-index

<html>
<head>
  <style>
    .rel {
      height: 20px;
      position: relative;
      background: #CCFFFF;
    }

    .dymek {
      left: 10px;
      position: absolute;
      background: #FFFFCC;
      font: normal 12px Arial, Verdana, Tahoma, Helvetica, sans-serif;
      padding: 5px;
      border: #CCCCCC 1px solid;
      width: 150px;
    }

    #rd1 {
      z-index: 13;
    }

    #rd2 {
      z-index: 12;
    }

    #rd3 {
      z-index: 11;
    }

    #rd4 {
      z-index: 10;
    }
  </style>
</head>

<body>
  <div id="rd1" class="rel">
    <div id="d1" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd2" class="rel">
    <div id="d2" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd3" class="rel">
    <div id="d3" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd4" class="rel">
    <div id="d4" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
</body>

</html>

30 mar 2010

Otwieranie linka w nowym oknie w zdarzeniu onclick

$url_city = 'http://mapy.emiejsca.pl/molodutyn_kamien_chelmski_lubelskie,mapa.html';

$html = '
 <div class="promo1" onclick="window.open(\''.$url.'\', \'\');" onmouseover="this.className=\'promo1 hover\'" onmouseout="this.className=\'promo1\'">
<p class="mce_ws_kod">echo $html;

19 maj 2009

Warstwa nad warstwą

<span class="mce_ws_kod">
   <div style="position: relative;">
     polska gola
     <div style="position: absolute; background-color: red; top:0; left: 0;">test</div>
   </div>
</span>

8 kwi 2009

Link na całego diva

<HTML>
 <HEAD>
  <TITLE> link na całego diva </TITLE>
 <style>
  
  .test {
   background-color:#ffe592;
   height: 30px;
   margin: 10px 0;
  }
  .test a {
   background-color:#ffe592;
   display:block; width:100%;
   height: 30px;
  }
  .test a:hover {
   background-color:#a6b6cc;
  }

</style>
 </HEAD>

<BODY>
 <div class="test"><a href="">link na całego diva 1</a></div>
 <div class="test"><a href="">link na całego diva 2</a></div>
 </BODY>
</HTML>