Zverushka
-
Posts
1,542 -
Joined
-
Last visited
-
Days Won
24
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Zverushka
-
-
Все равно все не то, нужна просто таблица для каждого шрифта. Пока достоверно известно, что Arial 18пикселей - 5 верхний вынос, 3 нижний вынос. Если бы знать эти выносы для каждого шрифта - стало бы очень легко верстать. Пока не могу найти таблицы, на крайняк буду составлять свою...
-
Та же проблема. Вычисляю высоту от одного блока до самой верхней границы заглавной буквы. Допустим 108 пикселей.
Размер шрифта 18 пикселей. Замеряю параметры шрифта, вижу, что на самом деле высота 17 и 1пиксель сверху теряется, он невидим. Поэтому уменьшаю разница до 107 пикселей. Вроде все правильно, но, путем наложения прозрачной страницы на макет фотошопа - вижу, что отступ должен быть еще на 1 пиксель меньше. Откуда он берется? Сами буквы один в один - как в фотошопе - одинаковые по высоте. Маргины и паддинги обнулены, границы нет, высота линии равна размеру шрифта. Пока у меня есть формула - от отступа в фотошопе отнять 1 пиксель. Хотелось бы иметь более четкое понимание, куда делся 2й пиксель.
Блин, сижу и улыбаюсь. Я поняла). В хтмл тоже высота видимого шрифта 17 пикселей (хоть и указано 18) и при высоте линии 18 пикселей - у нас появляется еще один лишний пиксель сверху и отодвигает шрифт дальше. Поэтому формула - взять отступ и отнять 2 пикселя
. Сейчас верстка пойдет быстрее, а то полчаса сижу и проставляю циферки, чтобы аккуратно все стало), терь точно знаю, что ставить. -
Во, на хабре получается списки с заголовком. Если мы хотим сделать список меню с заголовком, типа (разделы и перечисление). то нужно применять dl. А c ul li получается неудобно сделать?
-
Перерыла много инфы по этим спискам, но она минимальна. На одном сайте наткнулась о проблемах отображения в опере, что ссылка в DD некликабельна и прочее. В общем гемморой. Хотела глянуть на яндексе как реализовано, но внезапно обнаружила новую 12ю версию яндекса, где их уже не было
.У меня на сайте есть 4 блока, все они Featured Services. Представляет из себя картинаку слева, заголовок (термин) и внизу краткое описание - по сути определение. Только вот, чтобы сделать такой блок, мне надо запихнуть внутрь DL лишние дивы, сделать ссылки... А можно ли? Ответа на w3.org я не нашла... Получается, если использовать списки я получу следующий код:
<dl class="featured_services">
<div class="block left">
<img src="" class="left"> <dt><a href="">Featured Service</a></dt>
<dd>Vestibulum sit amet neque eu neque suscipit consequat</dd>
</div>
<!-- повторение блоков -->
</dl>Но думаю - а стоит ли овчинка выделки? Облазила крупные сайты типа гугла, яхуу и прочее - у них сплошные дивы, они даже не пытаются морочиться - дивы и дивы.
-
ХТМЛ5 позволяет совершать много ошибок и неточностей и отображает страницу корректно, можно не указазывать тип скипта (джава скрипт), не ставить кавычки итд, но поймут ли старые бразуеры это, которые не знают еще стандартов хтмл5? Стоит ли для них ставить четко кавычки, указывать что - джава скрипт, указывать дополнительные параметры в кодировке итп?
-
По-моему можно просто сделать вот так без всяких фикседов:
#fixed {
background-color: #f60;
width: 100%;
min-height: 100%; // при обычном хейте текст просто обрежется в примере выше
overflow: auto;
}
отступ в 50 пикселей по-моему так, если нужен фиксированный всегда поверх экрана - то фикседом привязать, а если только при прокрутке вниз. можно внутрь основного дива вложить еще один ну и сделать одному из слоев или маргин или паддинг.
-
А разве в хтмл5 не позволяется засунуть в ссылку что угодно?
-
Я это понимаю. Но с таким же успехом можно писать <div style="float:left"> Отличие в одном слове - действие тоже. Но тогда получается стиль встраивается непосредственно в разметку... Если ты захочешь, чтобы колонка была справа, то придеться лезть не в стиль, а в хтмл код и рыться в нем. Не будешь же править на.left {float: right}.
-
Смотрю примеры верстки на одном обучающем сайте.
Автор там применяет часто следующий ход. Добавляет классы через пробел.
Например, у него есть классы
.left {
float: left;
}
.overflow {
overflow: hidden
}
И он через пробел добавляет в классы нужных тегов.
Но по-моему это аналогично тому, как в самом хтмл коде написать style="float:left".
Ведь если мы захотим, чтобы этот блок был справа - нам придеться лезть в хтмл, а не таблицы стилей, и править код там, что нарушает основной принцип верстки - разделения логической разметки от стилей.
-
Спасибо, ваш совет очень помог. Поставила везде 10% прозрачность. Но вообще загадка, почему изначально все не так как надо работает.
-
Простите великодушно, что опять спрашиваю. Но я не могу вырезать нормально форму. Вот дублирую я текстовую форму с этого шаблона на новый слой. Там тень и все к слою применены. Копирую вместе с этой тенью (на пиксель больше по бокам), сохраняю в png, вставляю в страницу с таким же задним фоном, как в макете и вместо прозрачной полосы тени - там ярко-белая обводка права и снизу. И я не пойму, как скопировать так, чтобы в итоге получилось как в макете?
-
А что делать со слоем, к которому применен некий фильтр, вроде тени (выступает за границы на пару пикселей? Если выделяешь слой и копируешь - то тень остается за слоем и получается можно выделить нужную картинку только вручную.
-
Выделить нужное, нажать ctrl+shift+c
Это копирует весь видимый прямоугольник, вместе со шрифтами и всем остальным
.В папке два BANNER два слоя: Layer 5 и Shape – их объединить, правый клик – создать дубликат.Дубликат создается на новом .psd с огромной высотой и там нужно получается вручную вырезать нужную картинку, а если просто копировать и вставить из буфера на новый слой - то получается ситуация цветной прямоугольник шириной 1200пкс а вокруг него достаточно много пустого прозрачного слоя. Получается это только вручную обрезать?
-
Здраствуйте. Уже не первый раз бьюсь с подобной проблемой. Как у этого макета http://divhack.com/downloads/study/6/6.psd вырезать верхний широкий хедер (выполненный разноцветными разводами), который состоит из двух слоев.
Если первый прозрачный слой с разводами я еще могу скопировать в новый документ, то от второго (темного) копируется лишь маленькая рамка (50 пикселей) вместо 1200. А выделенные вместе они вообще не копируются.
Их можно скопировать через шифт+с, предварительно убрав все остальные лишние слои сверху (а это долго и муторно). Может есть способ проще? Как скопировать более быстрым способом?
-
Что значит через спрайты?
-
Ауу, что посоветуете?
Там же внизу в футере есть ряд иконок социальных сетей, тоже в список засунуты. Это логично засунуть их в список (по идее список ссылок на сети). Или это лишнее, просто через ряд ссылок перечислить?
-
Это?
Скорее вот это: http://rutracker.org...c.php?t=3608425
Надеюсь на этом сайте можно давать такие ссылки, если нет, то заранее извиняюсь).
В отличии от многих книг, в ней в конце верстается настоящий сайт и рассказывается пошагово, как это делается из шаблона, что нужно сделать в фотошопе для этого - а это очень важно! И нельзя изучить хтмл5, не изучив паралельно хтмл4. В этой книге он изучается, а в конце хтмл5 рассматривается и в том числе и на нем делается сайт.
Лоусона и Шарпа - не рекомендую для новичка. Там уже для продвинутых верстальщиков, которые хтмл5 осваивают и не просто, а углубленно. Хотя первая половина неплоха - очень подробно объясняется отличите артиклов от секшинов. Я сначала прочитала Мержевича, потом лоусона, потом попыталась Дронова (поняла, что муть), потом через пару месяцев перечитала Мержевича (до этой книги почему-то думала, что что-то знаю о хтмл и цсс).
-
Самая лучшая книга Мержевич - верстка веб-страниц 2011 год. До сих пор восхищаюсь. Дронова - в топку.
-
http://divhack.com/downloads/study/5/html/
На этой странице есть раздел справа "More projects". Как правильнее написать Html с этими картинками? Выстроить в ряд 4 картинки или предварительно засунуть их в список? Как правильнее и логичнее с точки зрения семантики и всего прочего?
-
А как заказчик будет сверять, когда текст расползется?
По очереди каждый блок подгонять? Да и без увеличения раз в 5 - тяжело проверить, чтобы именно пиксель в пиксель был . Что он будет целый час возиться и сверять все? А то я на хабрабаре вычитала, что ну не умеете пиксель в пиксель верстать - не гундите, что это не нужно. Типа профессионалы все могут и делают работу).
А как вы замеряете пиксели между блоками? Я просто увеличиваю макет раз в 5, беру инструмент - выделить область квадратиком - выделяю аккуратно квадрат между блоками и смотрю его величину или высоту. Требует некоторой точности рук и не очень быстро это все.
Дальше хуже - написано высота шрифта 24, на деле получается 23. И не понятно куда этот лишний пиксель затесался - вверх или вниз? Из какого паддинга сверху или снизу его вычитать?
-
Я верстаю макет номер 5 с этого сайта http://divhack.com/. Пытаюсь сделать "попиксельную" верстку, так как настоящий профессионал должен уметь верстать попиксельно.
Выбираю основной шрифт, который указан в макете, а именно Arial 12px и мой основной текст, который идет после "Why choose WebOnDemand?" выходит на одну строку больше, чем в шаблоне! В итоге ни о какой попиксельной верстке не может идти и речи. Делаю свой макет прозрачным и накладываю на шаблон psd и получается все вразнобой, ничего не сходится. Вы там же можете открыть сделанный сайт в html и сравнить с шаблоном - у автора сайта тоже не сходится и текст вылазит на следующую строку.
Допустим мой заказчик скажет - сверстай вот этот шаблон попиксельно. Я ему выдан свое чудо, он его наложит на макет и не увидит нужного результата.И скажет - что вы мне тут наделали?
И что, спрашивается делать? Как быть? Как сделать шрифт таким же?
-
Перед тем, как начать верстать за деньги, решила сделать заготовку проекта.
Прошу оценить, поправить, посоветовать.
Папка: прототип проекта.
- папка css
- папка img
- папка js
- index.html
Содержание index.html:
<!doctype html>
<html lang="ru">
<head>
<title>Page</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="js/ie.js">
<![endif]-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<header>
</header>
<footer>
</footer>
</div> <!-- wrap ends -->
</body>
</html>Содержание reset.css:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, img, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Содержание style.css:
body {
}
/* HEADER */
header {}
/* NAVIGATION */
nav {
}
.menu {
}
/* ARTICLE */
article {}
/* SECTION */
section {
}
/* ASIDE */
aside {}
/* FOOTER */
footer {
}Содеражение ie.css:
<script>
var e =
("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split
);
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
Как вычислять отступы от символов
in HTML Coding
Posted · Edited by Zverushka
Для Ариал (очень легко делается - хтмл таблица с разными шрифтами, скриншот, а потом в фотошопе пиксели мерить).
Arial Goggle chrome Windows 7.