Консультации и оценка качества html-вёрстки (бесплатно)

Del · 12.09.2010

да, с поддержкой атрибутов у col тяжелая ситуация.
Как верно

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, "Производители современных браузеров так увлеклись гонкой за черновиками HTML5 и CSS3, что совсем забыли об исправлении ошибок в реализации уже принятых стандартов — HTML 4.01, CSS1, CSS2.1, Cookie и других."

Реализовывать придётся через css, впрочем css это гуд)

если поддержка IE6 не требуется то:

HTML:

table.tablename td:first-child {vertical-align: top} /* первый столбец */
table.tablename td:first-child+td {vertical-align: middle} /* второй столбец */
table.tablename td:first-child+td+td {vertical-align: bottom} /* третий столбец */
и т.д. по аналогии,
table.tablename td:last-child - последний столбец

если IE6 нужен - то прийдётся каждой ячейке задавать свой класс или обходить их через js.

dr_mousefly · 12.09.2010

Del сказав(ла):
да, с поддержкой атрибутов у col тяжелая ситуация.
Как верно
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, "Производители современных браузеров так увлеклись гонкой за черновиками HTML5 и CSS3, что совсем забыли об исправлении ошибок в реализации уже принятых стандартов — HTML 4.01, CSS1, CSS2.1, Cookie и других."

Реализовывать придётся через css, впрочем css это гуд)

если поддержка IE6 не требуется то:

HTML:

table.tablename td:first-child {vertical-align: top} /* первый столбец */ table.tablename td:first-child+td {vertical-align: middle} /* второй столбец */ table.tablename td:first-child+td+td {vertical-align: bottom} /* третий столбец */ и т.д. по аналогии, table.tablename td:last-child - последний столбец

спасибо! там к сожалению порядок столбцов может менятся, так что через CSS лучше не стоит.
вобщем-то не проблема вывести в каждой ячейке класс.

Del · 13.09.2010

rootallilua сказав(ла):
Скажите, кто знает. Картинка в фоне странице, всегда будет отбражаться в зависимости
от разрешения монитора или можно сделать какой то стандарт?

в css3 появилась возможность задавать масштабирование фона - background-size, но это работает только в современных браузерах, в FF младше 3.6 и IE<9 работать не будет.

rootallilua сказав(ла):
Что изменить тут
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, чтобы картинка была
одинаково расположена при просмотре с любого компьютера?

можно так:

HTML:

body {
   -moz-background-size: 100% 100%;  /* Gecko 1.9.2 (Firefox 3.6) */
     -o-background-size: 100% 100%;  /* Opera 9.5 */
-webkit-background-size: 100% 100%;  /* Safari 3.0 */
        background-size: 100% 100%;  /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
}

но тогда в IE (до выхода девятки весной 2011), работать не будет.

поэтому лучше разделить картинку пополам по вертикали и повесить:
1-вую : как фон body с background-position: left top
2-рую : как фон html с background-position: right top
Чтоб работало нужно фоновый цвет для body задать прозрачным.

Троляка · 21.09.2010

Есть вопрос.
Кажется в 8 ИЕ добавили патч по безопасности который защищает все активные компоненты (flash баннеры и тд) от случайного клика. То-есть сперва мы делаем клик на баннере он так сказать стает активным, второй клик уже нормально обрабатывается баннером. То-есть для того чтобы нормально работали флешовые баннеры по ним необходимо сделать предварительный клик.

Как это убрать?

Del · 22.09.2010

Троляка сказав(ла):
Есть вопрос.
Кажется в 8 ИЕ добавили патч по безопасности который защищает все активные компоненты (flash баннеры и тд) от случайного клика. То-есть сперва мы делаем клик на баннере он так сказать стает активным, второй клик уже нормально обрабатывается баннером.
...
Как это убрать?

такое было в IE6/7

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

. Из-за проблем с патентами MS пришлось выпустить update, чтоб IE требовал клик для активации ActiveX.

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, был выпушен update, возвращающий всё как было.

Cейчас "click to activate" остался только в Opera (она ввела его вслед за IE; Firefox и Safari не требовали это никогда).

Проблема решается подгрузкой flash через SWFObject. Отличный перевод мануала был у

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, я выложил его в аттаче (SWFObjectEssentials.rar).

SWFObject с тех пор

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, но лично мне не нравится то, что получилось, версия 1.5 тоже в аттаче.

Del · 06.01.2011

Добавил, как сейчас модно, профиль на

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, для тех, у кого нет ХФ-аккаунта или не хочется спрашивать на форуме.

fusoyya · 07.01.2011

Занялся вот написанием своей javascript библиотеки. Часто интересно мнение верстальщиков.

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

Грид и ширина столбцов, автоматическое "распахивание".
Начну сначала, возможно вы уже поняли о чем я. Итак, у нас есть табличка

Код:

<table>
  <tr>
    <th>Title</th>
    <th>Content</th>
  </tr>

<tbody>
  <tr>
    <td>title 1</td>
    <td>content 1</td>
  </tr>
  <tr>
    <td>title 2</td>
    <td>content 2</td>
  </tr>
</tbody>

</table>

Для группы данных необходимо добавить вертикальный скролл и высоту. Сделать такое с tbody не удалось.

Посмотрел на грид в екстжс и некоторые другие - все отображают грид с магией, а мне бы этого не хотелось.

Пока я не дошел до изменения ширины столбца путем перетягивания и других манипуляций, мне нужно было только автоматическое распахивание" ячейки. Я создаю две таблицы. Одна - заголовок, вторая - содержимое. Ширина каждого столбца, кроме того который надо распахнуть, указана в css, общем для первой и второй таблицы.

Получается что-то вроде:

Код:

<table>
  <tr>
    <th style="width:100px;">Title</th>
    <th>Content</th>
  </tr>
</table>

<div style="height:200px;overflow:auto;">
<table>
  <tr>
    <td style="width:100px;">title 1</td>
    <td>content 1</td>
  </tr>
  <tr>
    <td style="width:100px;">title 2</td>
    <td>content 2</td>
  </tr>
</table>
</div>

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

Del · 07.01.2011

fusoyya, сорри, я не понял что должно распахиваться, что скроллится и, главное - при каких условиях/событиях.
напишите плиз подробней и если не трудно - добавьте простенькую картинку со стрелочками, "что куда".

fusoyya · 07.01.2011

Выглядит так

Del · 07.01.2011

fusoyya, так?

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

/* css-reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
img {border: 0; padding: 0; font-size: 100%; background: transparent;}
dfn,var {font-style: normal;}
header, nav, article, footer,section {display:block;}

/* решение задачи */
table.news {width: 100%; table-layout: fixed;}
table.news th.id {width: 100px;}
table.news th.content {}
table.news th.id2 {width: 50px;}

/* стили просто для оформления */
table.news {border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #000;}
table.news th {border: 1px solid #000;}
table.news td {border: 1px solid #000;}
  /*]]>*/
  </style>
</head>

<body>
  <table class="news">
    <thead>
      <tr>
        <th class="id">Id</th>
        <th class="content">Содержимое</th>
        <th class="id2">Id</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="2">Страница 1 из 2, по 20 на странице Обновить Добавить новость</td>
        <td>Назад | Вперёд</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>hfgj</td>
        <td>sdcn wiwdw sdsdnkcikvj sdwjdwd  dj</td>
        <td>7</td>
      </tr>
      <tr>
        <td>nwif</td>
        <td>jask sajcsackq cakckavmkk cbnn</td>
        <td>8</td>
      </tr>
      <tr>
        <td>tqre</td>
        <td>sjkfka fqkmsvkm sfjcvnc wsdqwc</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

fusoyya · 07.01.2011

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

Del · 07.01.2011

отчего ж нет, всё получится.
заодно оформил как вам нужно:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

/* css-reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
img {border: 0; padding: 0; font-size: 100%; background: transparent;}
dfn,var {font-style: normal;}
header, nav, article, footer,section {display:block;}

input,select,textarea,button {margin: 0; font-size: 92%;}

/* решение задачи */
div.news-grid table {width: 100%; table-layout: fixed;}
div.news-grid table .id {width: 100px;}
div.news-grid table .content {}
div.news-grid table .id2 {width: 50px;}
div.news-grid table .scroll {padding: 0; width: 16px;}
div.news-grid td.news-grid-content div {overflow: auto; height: 60px;}

/* стили оформления */
body {width: 90%; margin: 0 auto; padding: 50px 0; background: #fff; font: 12px Verdana, sans-serif;}

div.news-grid {border: 1px solid #DBDBDB; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 3px 3px 5px #A0A0A0; -webkit-box-shadow: 3px 3px 5px #A0A0A0; box-shadow: 3px 3px 5px #A0A0A0;}
div.news-grid table {border-collapse: collapse; border-spacing: 0; empty-cells: show;}
div.news-grid table th {padding: 0.2em; text-align: left;}
div.news-grid table td {padding: 0.2em;}
div.news-grid table thead,div.news-grid table tfoot {background: #DBDBDB;}

div.news-grid table tfoot a {color: #555; text-decoration: none;}
div.news-grid table tfoot a:hover {text-decoration: underline;}
div.news-grid table tfoot var {font-weight: bold;}
div.news-grid table tfoot input {width: 30px;}
div.news-grid table tfoot ul {display: inline-block; margin: 0 1em; list-style-type: none;}
div.news-grid table tfoot ul li {display: inline; padding: 0 0.2em;}
div.news-grid table tfoot ul.pager {float: right; margin: 0.3em 0 0;}
div.news-grid table tfoot ul.pager li {float: left; padding: 0 0.7em; border-left: 1px dashed #0A0911;}
div.news-grid table tfoot ul.pager li:first-child {border-left: none;}
div.news-grid table tfoot ul.pager li a {color: #000;}

div.news-grid table th.id2 {background: #D1D1D1;}
div.news-grid table td.news-grid-content td.id2 {background: #F6FBA9;}
div.news-grid td.news-grid-content {padding: 0;}
div.news-grid td.news-grid-content td {background: #F9F9F9; border-bottom: 1px solid #E1E1E1;}
div.news-grid td.news-grid-content tr:hover td {background: #E7E7E7;}
  /*]]>*/
  </style>
</head>

<body>
  <div class="news-grid">
    <table>
      <thead>
        <tr>
          <th class="id">Id</th>
          <th class="content">Содержимое</th>
          <th class="id2">Id</th>
          <th class="scroll"></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">
            Страница <input type="text" value="1" /> из <var>2</var>, по
            <select>
              <option>20</option>
              <option>40</option>
              <option>100</option>
            </select>
            на странице
            <ul class="news-actions">
              <li><a href="#">Обновить</a></li>
              <li><a href="#">Добавить новость</a></li>
            </ul>
            <ul class="pager">
              <li><a href="#">Назад</a></li>
              <li><a href="#">Вперёд</a></li>
            </ul>
          </td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td colspan="4" class="news-grid-content">
            <div>
              <table>
                <tr>
                  <td class="id">hfgj</td>
                  <td class="content">sdcn wiwdw sdsdnkcikvj sdwjdwd  dj</td>
                  <td class="id2">7</td>
                </tr>
                <tr>
                  <td>nwif</td>
                  <td>jask sajcsackq cakckavmkk cbnn</td>
                  <td class="id2">8</td>
                </tr>
                <tr>
                  <td>tqre</td>
                  <td>sjkfka fqkmsvkm sfjcvnc wsdqwc</td>
                  <td class="id2">9</td>
                </tr>
                <tr>
                  <td>iobn</td>
                  <td>n oldxol jdiikik wewdcc jjjjeee</td>
                  <td class="id2">10</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Во всех мажорных брауерах - ok, под хлам типа IE7- нужно немножко править внешний вид. В IE8 не закруглены углы и нет тени, но весной 9-ка выйдет, а если критично - есть -ms-filter, всякие PIE.htc и т.п.)

Если структура колонок неизменна, то вместо классов у ячеек можно смело перебирать их по-порядку в css.

Kompot · 08.01.2011

Интересует как Вы боретесь с выравниванием input и label

Код:

<div class="sample">
  <input type="checkbox" id="blablabla" />
  <label for="blablabla">Бла бла бла</label>
</div>

?

Код:

.sample input,
.sample label {vertical-align: middle;}

или есть более хитрое кроссбраузерное решение

Del · 08.01.2011

В стилях по-умолчанию у нас:

HTML:

input,select,textarea,button {margin: 0; font-size: 92%;}
...
input,label,select {vertical-align: middle;}

и тогда label и input/select на одной линии.

Но в реале, мы все формы верстаем списком определений:

Код:

<form onsubmit="return validateForm('registration');" method="POST" action="" name="" class="registration" id="registration" >
<fieldset class="register">
	<span>* - обязательные поля</span>
	<dl>
		<dt><label for="nickname">Nik:</label></dt>
		<dd><input required="required" placeholder="Nik" type="text" class="required" id="nickname" name="nickname" /> * <span class="verification"></span> </dd>

		<dt><label for="first_name">First name:</label></dt>
		<dd><input type="text" placeholder="First name"  id="first_name" name="first_name" /></dd>

		<dt><label for="last_name">Last name:</label></dt>
		<dd><input type="text" placeholder="Last name" id="last_name" name="last_name" /></dd>

		<dt><label for="phone">Phone:</label></dt>
		<dd><input required="required" placeholder="Phone"  type="text" class="required phone" id="phone" name="phone" /> * <span class="verification"></span></dd>

		<dt><label for="email">Email:</label></dt>
		<dd><input required="required" placeholder="Email" type="email" class="email required" id="email" name="email" /> * <span class="verification"></span></dd>

		<dt><label for="select">Select:</label></dt>
		<dd>
			<select required="required" placeholder="Select" class="required" id="select" name="select">
				<option>Please select</option>
				<option>Select 1</option>
				<option>Select 2</option>
			</select>
			* <span class="verification"></span>
		</dd>

		<dt><label>Checkbox:</label></dt>
		<dd>
			<input type="checkbox" id="check1" /><label for="check1">Chekbox1</label><br />
			<input type="checkbox" id="check2" /><label for="check2">Chekbox1</label><br />
			<input type="checkbox" id="check3" /><label for="check3">Chekbox1</label><br />
		</dd>

		<dt><label>Radio:</label></dt>
		<dd>
			<input type="radio" id="radio1" /><label for="radio1">Chekbox1</label><br />
			<input type="radio" id="radio2" /><label for="radio2">Chekbox1</label><br />
			<input type="radio" id="radio3" /><label for="radio3">Chekbox1</label><br />
		</dd>

		<dt><label for="email">Message:</label></dt>
		<dd><textarea required="required" placeholder="Message" id="message" class="required" name="Message"></textarea> * <span class="verification"></span></dd>
	</dl>
	<a class="cvv_what" href="#" onmouseover="javascript:showHints(document.getElementById('cvv_code_popup').innerHTML, this);">What`s this?</a>
	<input type="submit" value="Registaration" id="submit" name="submit">
</fieldset>
</form>

И нет проблемы задать нужные стили (float: left; clear: left для dt и т.д.) и оформить как нужно, т.к. все элементы формы структурированны.

Смотрите пример:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

(прокрутите вниз, там форма)

fusoyya · 11.01.2011

Del сказав(ла):
Во всех мажорных брауерах - ok, под хлам типа IE7- нужно немножко править внешний вид. В IE8 не закруглены углы и нет тени, но весной 9-ка выйдет, а если критично - есть -ms-filter, всякие PIE.htc и т.п.)

Похожим образом сделал. Думаю иначе без подсчета в жс сделать не получится, хотя может calc поможет или что-то еще из css3.

Еще вот есть вопрос. Последнее время много форм получается в окошках которые можно ресайзить. Иногда хочется чтобы некоторые элементы формы в зависимости от размера окна принимали больший размер, а другие оставались прежними.

Например, есть такая вот форма

Код:

<div style="width:640px;height;480px;"> <!-- окошко -->
  <div style="height:40px;"> <!-- эта часть которую необходимо оставить фиксированной фысоты -->
    Заголовок:
    <input type="text" />
  </div>

  Контент:
  <div style="height:calc(100% - 40px);">
    <textarea style="height:100%;width:100%;"><textarea>
  </div>
</div>

calc пока непонятно в каких браузерах когда будет. Пробовал таблицой сверстать, сработало во всех нормальных браузерах кроме оперы. Потом нашел утверждение что высоту таблице указывать по спецификации не тру и потому в опере не работает. Как быть? можно ественно сделать высоту первого контейнера в % но при большой разнице в ресайзе будет выглядеть хреново.

Del · 11.01.2011

fusoyya, а что нужно сделать? Если не тяжело - приложи картинку, что куда должно тянуться.

fusoyya · 11.01.2011

Как работает окно думаю понтно.

Del · 11.01.2011

fusoyya, ты пробовал таблицей или через display: table-cell?
в любом случае, правильный вариант - абсолютное позиционирование.

фишка в том, что если абсолютно позиционированному блоку задать только top и bottom, не указывая height, он растянется вверх и вниз до указанных координат.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
* {margin: 0; padding: 0;}

div.addnews {position: relative; width: 640px; height: 480px; background: #F3E7E7;}
div.newstitle {position: absolute; top: 0; left: 0; width: 100%; height: 40px;}
div.newscontent {position: absolute; top: 40px; left: 0; width: 100%; bottom: 30px; padding-top: 20px; background: #F8D8FE;}
div.newscontent label {position: absolute; top: 0; left: 0;}
div.newscontent textarea {width: 99%; height: 100%;}
div.buttons {position: absolute; width: 100%; bottom: 0px; left: 0; height: 30px;}
  /*]]>*/
  </style>
</head>
<body>
<div class="addnews"> <!-- окошко -->
  <div class="newstitle"> <!-- эта часть которую необходимо оставить фиксированной фысоты -->
    <label>Заголовок:</label>
    <input type="text" />
  </div>
  <div class="newscontent">
    <label>Содержимое:</label>
    <textarea></textarea>
  </div>
  <div class="buttons">
    <input type="button" value="Отменить" />
    <input type="submit" value="Сохранить" />
  </div>
</div>
</body>
</html>

fusoyya · 11.01.2011

Del сказав(ла):
fusoyya, ты пробовал таблицей или через display: table-cell?
в любом случае, правильный вариант - абсолютное позиционирование.

фишка в том, что если абсолютно позиционированному блоку задать только top и bottom, не указывая height, он растянется вверх и вниз до указанных координат.

Да перепробовал все что можно. Про позиционирование не знал. Спасибо :клас:

Kompot · 31.01.2011

вот такая задачка попалась на мою голову

<div>
<img />
</div>

есть блок внутри которого картинка. блок имеет фиксированный размер. картинка может быть нескольких размеров. На выходе надо получить следующее, когда высота картинки меньше высоты блока надо центрировать эту картинку по вертикали внутри блока.

Консультации и оценка качества html-вёрстки (бесплатно)

Del

dr_mousefly

Del

Троляка

Del

Del

fusoyya

Del

fusoyya

Вкладення

Del

fusoyya

Del

Kompot

Del

fusoyya

Del

fusoyya

Вкладення

Del

fusoyya

Kompot