2 заметки с тегом

html

Всех достаёт, меня тоже или «Как чистить кэш Оперы при отладке».

Как-то раз Опера была замужем за тем-самым-разрабом и они наделали кучу идей. Лет на десять точно. Румяные радовали планету с девяностых до инцеста с Хромом. Эти уродцы пошли в папу, а мамку стало дуть такими запорами, что вывалить из неё кэш одним нажатием, не могут сотней форумов со всеми кодинг-павликами. Годами причём.

Выход есть и не сильно кривой. Хотя бы править ничего не нужно, и то спасибо.

  1. Ctrl + Alt + I. Вылезет «Chrome DevTools» это теперь называется, а был какой-то «Dragon Fly», помнится.
  2. F1 → «Settings» → «Network».
  3. «Disable cache (while DevTools is open)».
  4. Рефрешить по Ctrl + R при открытом Девтуле.

Всякий новыйгод я это вспоминаю и забываю уже через день.

flushshsh

Это мне по работе нужно, по деланию сайтиков. Оставлю это здесь, чтобы не пропало. Может кто ткнёт в неисправности, либо чего нового подкинет. Изредка буду дополнять и сам. Теги соответствующие.

В связи со всё более плотным возвращением в работку, систематизирую всякое украденное и собственноручно придуманное — всё, что касается html-css вёрстки с уклоном в минимал и браузерную всеядность. Записи с примерами валялись у меня жуткой разносортицей папок и форматов, а теперь руки дошли унифицировать их в тру олдскул текстовый вид. В чём хочешь смотреть можно.

Нынче подборка примеров безболезненно-кроссбраузерной вёрстки блочных элементов, либо выдающих себя за них. Спустя время, выложу ещё адаптивные таблички для прайсов и, быть может, шаблон сайта мечты — адаптивный, но без брикпойнтов @media. За весь этот мат простите, рейтинг «7+».

1. Автосдвигающиеся блоки списком.
2. Автосдвигающиеся блоки.
3. Вертикальное и горизонтальное выравнивание блоков относительно друг друга.
4. Четыре варианта вертикального центрирования для локальных потребностей.
5. Метод вертикального выравнивания с дополнительным блоком.
6. Вертикальное выравнивание блока неизвестной высоты по центру или низу родительского, с дополнительным блоком.
7. Блоки одинаковой высоты, включающие в себя блок с контентом и блок с футером.

1. Автосдвигающиеся блоки списком

.......................  .......................  .......................
.  Header             .  .  Header             .  .  Header             .
.......................  .......................  .......................
.                     .  .                     .  .                     .
.  img                .  .  img                .  .  img                .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Some text          .  .  Some text          .  .  Some text          .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .......................  .......................

....................... 
.  Header             .
....................... 
.                     . 
.  img                . 
.                     . 
.                     . 
.                     . 
.  Some text          . 
.                     . 
.                     . 
....................... 
<style type="text/css">
	li {
		width: 200px;
		min-height: 250px;
		border: 1px solid #000;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		margin: 5px;
		zoom: 1;
		*display: inline;
		_height: 250px;
	}
</style>

<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>
<li>
	<div>
		<h4>
			Header
		</h4>
		<img src="http://somepictohost.com/img.jpg" alt="lobster" width="75" height="75"/>
		<p>
			Some text
		</p>
	</div>
</li>

2. Автосдвигающиеся блоки

.......................  .......................  .......................
.  img                .  .  img                .  .  img                .
.......................  .......................  .......................
.                     .  .                     .  .                     .
.  Some text          .  .  Some text          .  .  Some text          .
.                     .  .                     .  .                     .
.......................  .......................  .......................

.......................
.  img                .
.......................
.                     .
.  Some text          .
.                     .
.......................
<style type="text/css">
	#catalog a { color: #666; }
	#catalog a:hover { color: #1fa0e2; }
	#catalog div {
		width: 110px;
		margin: 0 5px 15px 0;
		text-align: center;
		display: inline-block;
		vertical-align: top;
		}
	#catalog P { margin: 0 5px; }
	#catalog SPAN { color: #ccc; font-size: 0.8em; } 
</style>
<!--[if lte IE 7]>
	<style type="text/css">
		#catalog div { 
			display: inline;
			zoom: 1;
   }
	</style>
<![endif]-->

<div id="catalog">
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
	<div>
		<p><img src="http://somepictohost.com/img.jpg" width="75" height="75"/></p>
		<p>Some text</p>
	</div>
</div>

3. Вертикальное и горизонтальное выравнивание блоков относительно друг друга.

.......................
.                     .
. ................... .
. .Some Text        . .
. ................... .
.                     .
.......................
<style type="text/css">
	.before {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		}
.inner {
		display: inline-block;
		vertical-align: middle;
		border: 1px solid red;
		}
.outer {
		height: 100px;
		border: 1px solid blue;
		}
</style>

<div class="outer">
	<span class="before"></span>
	<span class="inner">
    Some<br>text
  </span>
</div>

4. Четыре варианта вертикального центрирования для локальных надобностей.

.......................
.                     .
.  Text p             .
.                     .
.......................

.......................
.                     .
.  img                .
.                     .
.......................

.......................
.                     .
.  Block of Text      .
.                     .
.......................

.......................
.                     .
.  CSS3 mixin Text    .
.                     .
.......................
<style type="text/css">
	.text p {
		position: relative;
		top: 50%;
	}

	.image img {
		position: relative;
		top: 50%;
	}
	.block-of-text p {
		position: relative;
		top: 50%;
	}
	@mixin vertical-align {
		position: relative;
		top: 50%;
	}
	.mixin p {
  @include vertical-align;
	}
</style>

<section class="text">
	<p>
  	Text p
	</p>
</section>

<section class="image">
	<img src="http://somepictohost.com/img.jpg" />
</section>

<section class="block-of-text">
	<p>
		Block of text!
	</p>
</section>

<section class="mixin">
	<p>
		CSS3 mixin Text
	</p>
</section>

5. Один метод вертикального выравнивания с дополнительным блоком.

,,,,,,,,,,,,,,,,,,,,,,,
,                     ,
,   floater block     ,
,                     ,
,*********************,
,                     ,
,,,,,,,,,,,,,,,,,,,,,,,
*                     *
*   child block       *
*   Some text         *
*                     *
***********************
.                     .
.   parent block      .
.                     .
.......................
<style type="text/css">
	#parent {height:200px;}
	#floater {
  	float: left;
		height: 50%;
		width: 100%;
		margin-bottom: -50px;
		outline: 1px solid red
		}
	#child {
		clear: both;
		height:100px;
		outline: 1px solid yellow;
		}
</style>

<div id="parent">
	<div id="floater"></div>
	<div id="child">Some text</div>
</div>

6. Вертикальное выравнивание блока неизвестной высоты по центру или низу родительского.

.......................
.                     .
. ................... .
. .    Some Text    . .
. ................... .
.                     .
.......................
<style type="text/css">
	.parent {
		width:500px;
		height:400px;
		text-align:center;
		border:1px solid #dd0;
		background: #ffa;
		}
	.child {
		display:-moz-inline-box;
		display:inline-block;
		vertical-align:middle;
		width:300px;
		border:1px solid #080;
		background: #DDF; zoom:1;
		//display:inline
		}
	.helper {
		display:-moz-inline-box;
		display:inline-block;
		height:100%;
		width:0px;
		vertical-align:middle;
		zoom:1;
		//display:inline
		}
</style>

<div class="parent">
	<div class="child">Some text</div>
	<div class="helper"></div>
</div>

7. Блоки одинаковой высоты, включающие в себя блоки с контентом и футером, неизвестной величины.

.......................  .......................  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Content            .  .  Content            .  .  Content            .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .......................  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .......................
.......................  .......................  .......................
.  Footer             .  .  Footer             .  .  Footer             .
.                     .  .                     .  .                     .
.......................  .......................  .......................

.......................  .......................  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.  Content            .  .  Content            .  .  Content            .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .                     .  .......................
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.                     .  .                     .  .                     .
.......................  .......................  .......................
.  Footer             .  .  Footer             .  .  Footer             .
.                     .  .                     .  .                     .
.......................  .......................  .......................
<style type="text/css">
		.wrap, .h, .f {
			display: inline-block;
			}
		.item {/*wraper*/
			display: inline;
			}
		.h, .f {
			width: 200px;
			}
		.h {/*content*/
			background: red;
			height: 100px;
			vertical-align: top;
			}
		.f {/*footer*/
			background: blue;
			height: 20px;
			color: #fff;
			vertical-align: bottom;
			margin-left: -200px;
			}
</style>
Логоперс