HTML - Strona 2 - Kody, triki, sztuczki

16 sty 2019

Cztery sposoby centrowania elementu w div

~~Cztery~~ Pięć sposobów centrowania elementu w div.
Najpierw przygotujemy style dla html, mały reset nie jest zły 😉

* {
  padding: 0;
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  overflow: hidden;
}

Czytaj dalej

25 lip 2008

Podstawowe ustawienia styli strony HTML

body, p, td, ul, li, form {
 font: normal 12px/120% Tahoma, Arial, Helvetica, sans-serif;
 color:#505050;
}

p, td, ul, li, form {
 padding:0;
 margin:0;
}

23 sty 2008

Dymek nad pozycja kursora myszy

function vDymek(tresc, ev) {
  var IE = document.all ? true : false;
  // obsługuje dla NS
  // if (!IE) document.captureEvents(Event.MOUSEMOVE);
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  } else {

    //ev = ev || event;
    tempX = ev.pageX;
    tempY = ev.pageY;
  }

  if (tempX < 0) { tempX = 0 };
  if (tempY < 0) { tempY = 0 };
  var div = document.getElementById('dymek');

  div.style.display = 'block';
  div.style.top = tempY + 'px';
  div.style.left = tempX + 'px';
  div.innerHTML = tempX + ', ' + tempY + '; ' + tresc;
}

function hDymek() {
  var div = document.getElementById('dymek');
  div.style.display = 'none';
}

<a href onMouseOver="vDymek('tresc1', event)" onMouseOut="hDymek()">sprawdz wartosc</a>
<a href onMouseOver="vDymek('tresc2', event)" onMouseOut="hDymek()">sprawdz wartosc</a>
<div id="dymek" style="position: absolute;"></div>

23 sty 2008

Dymek nad komórką tabeli HTML

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

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