28 Cze 2010

Działanie właściwości float dla diva

Div otrzymuje rozmiar width równy rozmiarowi zawartości diva

<body>
<style>
#blo {
 border: 1px solid;
 height: 200px;
 float: left;
}
</style>
<div id="blo">test</div>
</body>
</html>

Div otrzymuje rozmiar width równy rozmiarowi body

<html>
<body>
<style>
#blo {
 border: 1px solid;
 height: 200px;
}
</style>
<div id="blo">test</div>
</body>
</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>
23 Mar 2009

Style, przesuwanie do prawej, relative, ablosute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Cena do prawej </TITLE>
 </HEAD>

<BODY>
  <style>
.cn4 {
    width: 300px;
    position: relative;
    margin: 0;
    padding: 0;
}

.cn4 span {
    right: 0;
    position: absolute;
}

</style>
<p class="cn4">cena: <span>100000 zł</span></p>
<p class="cn4"><span>100000 zł</span></p>
 </BODY>
</HTML>