CSS - Strona 4 - Kody, triki, sztuczki

23 lut 2014

Div na środku strony w css bez javascriptu

I bez javascriptu można coś wycentrować 😉
Czy to na całej stronie czy w jakimś div, działa elegancko również w IE8

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
}

.content {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

.center {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid #5f5f5f;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 1px 1px 8px #888;
  padding: 20px;
}

<div class="content">
   <div class="center">i mamy okno na środku strony bez javascript</div>
</div>

23 lut 2014

Ukrycie maila przed botami w css

Mały tirck, ukrycie maila przed botami w czystym css, działa również w IE8+

div.address:before {
content: attr(data-ea) "@" attr(data-eb);
}

<div class="address" data-ea="test" data-eb="domena.pl"></div>

Otrzymujemy mail test@domena.pl proste i czyste rozwiązanie.

5 lis 2013

Style ustwiające rozmiar labela do wielkości komórki td

Style

.lista_op td label {
  background: #F8F8FF;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

Html

<table>
  <tr>
    <td>
      <label for="del_op_id_1"><input type="checkbox" name="del_op_id[]" id="del_op_id_1" value="1"></label>
    </td>
  </tr>
</table>

5 lis 2013

Wyświetlenie okienka ładowania na środku ekranu

Wyświetlenie okienka ładowania na środku ekranu:

var winH = $(window).height();
var winW = $(window).width();
var loading = $('#loading');
var maxheight = loading.css("max-height");
var maxwidth = loading.css("max-width");
var loading_height = loading.height();
var loading_width = loading.width();
if (maxheight != "none") {
  loading_height = Number(maxheight.replace("px", ""));
}
if (maxwidth != "none") {
  loading_width = Number(maxwidth.replace("px", ""));
}
loading.css('top', winH / 2 + $(window).scrollTop() - loading_height / 2);
loading.css('left', winW / 2 - loading_width / 2);
$('#loading').show();

28 paź 2013

Szukanie właściwości elementu findem

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

$('.contener').find('.niecos').css({'border':'1px solid red'});