CSS и HTML

Иногда случается, что возникает проблема с расположением блока по центру из-за float: left; Я решаю такую проблему так:
Открываю файл стилей и дописываю нужному элементу такие свойства:

position: relative;
left: 50%;
margin-left: -25%;
width: 100%;
Этот пример уже неоднократно бродил по просторам интернета. Приведу его в своём блоге:

JavaScript:

button.onclick = function (){
var className = informer.className;
if( className.indexOf(' expanded') == -1 ){
className += ' expanded';
}
else {
className = className.replace(' expanded', '');
}
informer.className = className;
return false;
};

CSS:

.b-toggle {
opacity: 0;
max-height: 0;
overflow: hidden;
-moz-transition: opacity .3s, max-height .3s;
-ms-transition: opacity .3s, max-height .3s;
transition: opacity .3s, max-height .3s;
_display: none;
}
.expanded {
max-height: 100px;
opacity: 1;
_display: block;
}

HTML:

<div id="reg">
<a id="button" href="#"> Регистрация</a>
<div id="informer" class="b-toggle">
<form>
<div><input/></div>
<button/>
</form>
</div>
text
</div>

Пример
Этот вариант грабит только сами цыфры отображающие температуру определённого города

<link rel="stylesheet" type="text/css" href="/themes/css/
gs_informerClient.min.css">
<div id="gsInformerID-MHM78UqaYrfcn2" class="gsInformer" style="width:60px;
height:60px">
<div class="gsIContent">
<div id="cityLink">
<a href="http://www.gismeteo.ua/city/daily/4982/" target="_blank"></a>
</div>
<div class="gsLinks">
<table>
<tr>
<td>
<div class="leftCol leftColCenter">
<a href="http://www.gismeteo.ua/city/weekly/4982/" target="_blank"></a>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="http://www.gismeteo.ua/ajax/getInformer/?hash=MHM78UqaYrfcn2"
type="text/javascript"></script>

gs_informerClient.min.css
#gsInformerID-MHM78UqaYrfcn2{
background:none;
}
.gsInformer .secondaryWrap{
background:none !important;
margin-left: 460px;
margin-top: -62px;
margin-bottom: 45px;
}
.gsInformer .gsLinks table{
display:none !important;
}
.gsInformer .gsLinks{
background:none !important;
}
.gsAddInfo2{
background:none !important;
}
.gsInformer .gsLinks{
background:#ffffff;
}
.gsInformer div{
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #ffffff;
}

Demo примера можно посмотреть ТУТ в шапке сайта
Узнать больше

Простой аккордион


Узнать больше

Простой аккордион


Узнать больше

Простой аккордион


Узнать больше

Простой аккордион



Скачать скрипт
Через javascript:void(0)

Вставляем
<a class="nolink" href="javascript:void(0)">http://riva.od.ua</a>

Результат: http://riva.od.ua

Через return false

Вставляем
<a class="nolink" href="http://riva.od.ua" onclick="return false;">http://riva.od.ua
</a>

Результат: http://riva.od.ua

Определем class:

.nolink { cursor: default !important; color: #666666; }
a.nolink { cursor: default !important; color: #666666; }


Скачать скрипт
<div style="position: absolute; overflow: hidden; height: 1px; width: 1px;">
Замена display: none; для безпроблемного индексирования</div>
<script type="text/javascript"
           src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js">
 </script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

 

<a href="skype:yaroslavty?call" onclick="return skypeCheck()">Skype: yaroslavty</a>
<a href="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;>E-Mail: Riva</a>
<a href="tel:0979241932"><span class="glyphicon glyphicon-earphone"> </span> (097)9241932</a>
<span class="glyphicon glyphicon-user"> </span> Riva
<a style="border-bottom: 1px dotted #a6a6a6;" href="/http://maps.google.com?q=Odessa+Ukraine"><span class="glyphicon glyphicon-map-marker"> </span>Odessa, Ukraine</a>

Результат:


Skype: yaroslavty
Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
(097)9241932
Riva
Odessa, Ukraine

P.S. Особенно актуально для планшетов и смартфонов

Пример добавления шрифта Ubuntu в шаблон:

  1. Заходим на Google Fonts или на Font Squirrel и скачаваем понравившийся шрифт. Желательно с поддержкой кириллицы :)
  2. Теперь нужно сгенерировать webfont. Это можно сделать тут или тут
  3. Вставляем в начало template.css строку
    @import url(../fonts/ubuntu/stylesheet.css);
  4. Создаём папку fonts и в ней папку ubuntu
  5. Заливаем в папку ubuntu свой шрифт и все его стили которые были сгенерированы
  6. Создаём в этой папке файл stylesheet.css или переименовываем сгенерированный css с содержанием:

@font-face {
        font-family: 'UbuntuRegular';
        src: url('ubuntu-regular.eot');
        src: url('ubuntu-regular.eot') format('embedded-opentype'),
        url('ubuntu-regular.woff') format('woff'),
        url('ubuntu-regular.ttf') format('truetype'),
        url('ubuntu-regular.svg#UbuntuRegular') format('svg');
}