Ustawienie trzech tagów div w lini


<p class="mce_ws_kod">&lt;style&gt;</p>

<p class="mce_ws_kod">.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

<p class="mce_ws_kod">.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}
<p class="mce_ws_kod">&lt;/style&gt;</p>

<p class="mce_ws_kod">&lt;div&gt;
&lt;div class="a"&gt;test 123456&lt;/div&gt;
&lt;div class="b"&gt;123&lt;/div&gt;
&lt;div class="c"&gt;123&lt;/div&gt;
&lt;/div&gt;

<p class="mce_ws_kod">
.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

<p class="mce_ws_kod">.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}
<p class="mce_ws_kod">&lt;/style&gt;</p>

<p class="mce_ws_kod">&lt;div&gt;
&lt;span class="a"&gt;test 12345&lt;/span&gt;
&lt;span class="b"&gt;123&lt;/span&gt;
&lt;span class="c"&gt;123&lt;/span&gt;
&lt;/div&gt;

Ustawienie kolejności warstw za pomocą z-index

&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="rd1" class="rel"&gt;&lt;div id="d1" class="dymek"&gt;Polska, Warszawa, Lublin, Siedliszcze&lt;/div&gt;&lt;/div&gt;
&lt;div id="rd2" class="rel"&gt;&lt;div id="d2" class="dymek"&gt;Polska, Warszawa, Lublin, Siedliszcze&lt;/div&gt;&lt;/div&gt;
&lt;div id="rd3" class="rel"&gt;&lt;div id="d3" class="dymek"&gt;Polska, Warszawa, Lublin, Siedliszcze&lt;/div&gt;&lt;/div&gt;
&lt;div id="rd4" class="rel"&gt;&lt;div id="d4" class="dymek"&gt;Polska, Warszawa, Lublin, Siedliszcze&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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>

Dodanie markera nad statyczna mapa w stylach

<style type=”text/css”><!–

#map_sm {
    position: relative;
    z-index: 1;
}

.zuz {
    position: absolute;
    background:url(
http://labs.google.com/ridefinder/images/mm_20_red.png) 50% 50% no-repeat;
    z-index: 2;
    width: 273px;
    height: 136px;
}

 // –></style>

<BODY>
<div class=”map”>
    <div id=”map_sm” style=”width:273px;height:136px;cursor:pointer;”><div class=”zuz”> </div><img src=”
http://maps.google.com/staticmap?center=52.50428771972656,13.31639289855957&zoom=14&&size=273×136&key=…”></div>
</div>
</body>

Dymek nad komórką tabeli HTML

Dymek nad komórką tabeli HTML. Dymek generowany jest w Java Script

 <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>

 <SCRIPT LANGUAGE=”JavaScript”>
<!–
 function vDymek(nazwa) {

     var div = document.getElementById(nazwa);
     div.style.display = ‚block’;

     //var par = div.parentNode.parentNode;
     //alert(div.parentNode.parentNode.style.height );
 }

 function hDymek(nazwa) {
     var div = document.getElementById(nazwa);
     div.style.display = ‚none’;
 }

//–>
</SCRIPT>
  <TABLE border=”0″ bgcolor=”#F0F0F0″>
  <TR>
    <TD style=”height: 20px;”><div style=”position: relative;” onMouseOver=”vDymek(‚dymekA’)” onMouseOut=”hDymek(‚dymekA’)”>MS-G Tekst”<div id=”dymekA” style=”position: absolute; display: none; border: 1px solid; width: 700px; top: 0; left: 0; background-color: #efefef;”>MS-G Tekst” Tłumacz Przysięgły Języka Francuskiego, Czeskiego i Rosyjskiego Małgorzata Sibilska-Górska</div></div></TD>
    <TD>druga kolumna</TD>
    <TD>trzecia kolumna</TD>
  </TR>
  </TABLE>
 </BODY>
</HTML>