18 Kwi 2019

Kolumny w css oraz szukanie w html

Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.

Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20

<ul id="ul">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>text 4</li>
  <li>text 5</li>
  <li>text 6</li>
  <li>text 7</li>
  <li>text 8</li>
  <li>text 9</li>
  <li>text 10</li>
  ...
</ul>

Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.

ul {
  border: 1px solid #cacaca;
  list-style: none;
  max-width: 50%;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 50%;
  padding: 10px;
  margin: auto;
}

ul li {
  padding: 10px;
  margin-bottom: 2px;
}

ul li:nth-child(even) {
  background-color: #f0f0f0;
}
25 Mar 2019

Emmet przyspieszamy pisanie HTML

W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj

Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML

< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body></body>
</html>

Inne podstawowe i często używane to:

<!-- link -->
<link rel="stylesheet" href="" />
<!-- link:css -->
<link rel="stylesheet" href="style.css" />
<!-- link:favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- link:rss -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
<!-- style -->
<style></style>
<!-- script -->
<script></script>
<!-- script:src -->
<script src=""></script>
23 Sty 2008

Dymek nad pozycja kursora myszy

Dymek nad pozycja kursora myszy

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

 <BODY>
 <script>
 
 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’;
 }

 </script>
 
<a href onMouseOver=”vDymek(‚tresc1’, event)” onMouseOut=”hDymek()”>sprawdz wartosc</a>
<br><br><br><br><br><br><br>

<a href onMouseOver=”vDymek(‚tresc2’, event)” onMouseOut=”hDymek()”>sprawdz wartosc</a>

<div id=”dymek” style=”position: absolute;”>

</div>

 </BODY>
</HTML>