<style>

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

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

</style>

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

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

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

</style>

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

Ziana z-indexu n większy powoduje wyciągniecie warstwy wyżej nad wszystkie inne.
z-index:1111;  z-index:11111
document.getElementById('nazwa').style.zIndex=11111;

<html>
 <head>
  <title> mapa </title>
  <style>
    .box a {color:#777777;text-decoration:none;cursor:default;}
  </style>
 </head>

 <body>
 <div class=”box”>
  <a href=”mapa.html”>mapa</a>
  </div>
 </body>
</html>

<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>

Div otrzymuje rozmiar width równy rozmiarowi zawartości diva
<html>
<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>

Oczywiście jak zwykle „najwspanialsza” przeglądarka nie działa :(
Chcemy aby nasz div był zawsze w lewym górnym oknie nie zależnie od tego czy przewijamy okno, przykład użycia na stronie http://www.tphoto.pl w sekcji galeria linki na dole strony – przygotowania, wesele, dzieci, komunia, inne.
Po kliknięciu w któryś z powyższych linków pojawi się okno i o właśnie takie menu jak na górze nam chodzi.

<div id=”poprawka” style=”width: 100%;”>
<ul>
<li><a href=”index.php?id=przygotowania” title=”przygotowania – fotografia ślubna”><b>PRZYGOTOWANIA </b></a></li>
<li><span>/</span></li>
<li><a href=”index.php?id=wesele” title=”wesele – fotografia ślubna”><b>WESELE</b></a></li>
<li><span>/</span></li>
<li><a href=”index.php?id=dzieci” title=”fotografia dzieci”><b>DZIECI</b></a></li>
<li><span>/</span></li>
<li><a href=”index.php?id=komunia” title=”fotografia komunijna”><b>KOMUNIA</b></a></li>
<li><span>/</span></li>
<li><a href=”index.php?id=inne” title=”inne”><b>INNE</b></a></li>
</ul>
</div>

 

A poniżej style:

<style type=”text/css”>
#poprawka {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; left: 0px; top: 0px;
}
body > div#poprawka {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!–[if gte IE 5.5]>
<![if lt IE 7]>
<style type=”text/css”>
div#poprawka {
/* IE5.5+/Win – this is more specific than the IE 5.0 version */
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
</style>
<![endif]>
<![endif]–>

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

<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>

<!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>

a:focus {
outline: none;
}

« poprzednie