Зарядка для хвоста верстальщика
488 повідомлень
#15 років тому
Но в данном примере что лучше использовать:1. Нагромождение блоков
2. Таблицу
3. JS
Что скажете?
Блоками у меня пока так и не получилось сделать
488 повідомлень
#15 років тому
Заказчику пока не ставился вопрос по поводу возникшей проблемы. Просто хочу сделать так как задумал дизайнерпока нашла вот такой вот способ:
собственно хтмл
<h2 class="header"><span>Пьедестал</span></h2>
и цсс
.header{
background:url(../images/line.gif) left center repeat-x;
padding:13px 0 15px 30px;
}
.header span{
font-size:16px;
background:url(../images/black.gif) left 55% repeat-x;
padding:0 15px;
}
идея в том, что в спане над желтой однопиксельной полосой идет полоса черная
конечно не совсем выход, но все же.
всем спасибо
115 повідомлень
#15 років тому
Ну раз блоками не получилось остаётся таблица или скрипт. 
Скрипт не все увидят, зато код опрятней будет. А вообще, эта полосочка не стоит таких усилий, но надо значит надо. Так что выбирайте тот который вам больше нравится.
Кстати, таблицей же вы уже сделали?
488 повідомлень
5330 повідомлень
#15 років тому
<h2 class="header"><span>Пьедестал</span><em></em></h2>как нить эдак намутить можно. у спана стиль первой буквы задать с фоном и отступом на ширину символа слево
5330 повідомлень
#15 років тому
H2:first-letter {background: url(/images/line.gif) left center repeat-x;
}
написано по памяти, без проверки.
488 повідомлень
#15 років тому
ArtPro, спасибо, никогда не использовала этот псевдокласс, попробуюХм. Такой прием в некоторых случаях может избавить от лишних контейнеров
5330 повідомлень
#15 років тому
Ага.. а так же всяческие плюшки в виде галочек, скобочек и т.п.
488 повідомлень
#15 років тому
Цитата ("ArtPro"):Ага.. а так же всяческие плюшки в виде галочек, скобочек и т.п.
что вы имеете в виду?
5330 повідомлень
#15 років тому
Ну смотрите.. у вас есть блок, который сверху-слева и снизу-справа должен обрамляться кавычками красиво.. типа цитатка.
вот и делаем легко в блок фоном вниз-вправо кавычку закрывающуюся, а леттером открывающуюся
488 повідомлень
#15 років тому
Понятно.у меня немного другая задача: сделать так, чтобы фон (длинная полосочка) сдвигался вправо, в зависимости от длины текста в заголовке
5330 повідомлень
#15 років тому
Полоска ДО текста фиксированная no-repeat фоном в first-letterspan резиновый выйдет
<h2 class="header">Пьедестал<span class="lines"></span></h2>
хотя вложенность в H чего либо другого - это неправильно
488 повідомлень
#15 років тому
А как заставить спан растянуться на всю оставшуюся ширину? у меня пока не получилось (ни со спаном ни с блоками)
488 повідомлень
#15 років тому
А полоску можно сделать не однопиксельной, а с некоторой шириной и назначит ее неповторяющимся фоном у <h2>
5330 повідомлень
#15 років тому
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body {width:100%;
background:url(fon.jpg)}
H2.header:after { content:"л";
display:inline-block;
background: url(lines2.gif) left center no-repeat;
width:500px;
}
H2.header:first-letter {
background: url(lines.gif) left center no-repeat;
padding-left:20px;
}
H2 { display:block;
width:800px;
}
</style>
<body>
<h2 class="header">Пьедеста</h2>
</body>
</html>
