|
Kivals
|
 |
« : 20-01-2008 12:20 » |
|
Есть следующий код: <html>
<head>
<style type="text/css">
td.menu-div {
padding-top:10px;
padding-bottom:10px;
}
td.menu-div div {
width:1px;
background:black;
height:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src='logo.jpg' /></td>
<td class='menu-div'><div></div></td>
<td><h1>Welcome to site!</h1></td>
<td class='menu-div'><div></div></td>
<td><img src='banner.jpg' /></td>
</tr>
</table>
</body>
</html> который делает все так, как и нужно: разделяет ячейки вертикальными линиями, которые не доходят до верха/низа таблицы на указанное значение (10px). Но стоит только добавить в начало спецификацию <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> как сразу длина этой вертикальной линии сжимается (предположительно - до размера шрифта). Как сделать, чтобы для XHTML 1 получить тот же результат? |
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #1 : 20-01-2008 13:29 » |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test2</title>
<style type="text/css">
td.menu-div {
padding-top:10px;
padding-bottom:10px;
}
td.menu-div div {
width:1px;
background:black;
height:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src='l.jpg' alt='' /></td>
<td class='menu-div'><div> </div></td>
<td><h1>Welcome to site!</h1></td>
<td class='menu-div'><div> </div></td>
<td><img src='l.jpg' alt='' /></td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Kivals
|
|
« Ответ #2 : 20-01-2008 21:07 » |
|
Никаких изменение в лучшую сторону - кроме того в ИЕ6 ширина линии стала равна ширине пробела (а не 1px). Высота так неправильно и осталась  Ремарка: высота рисунка logo.jpg около 200 px - намного больше высоты <H1> |
|
|
|
|
Записан
|
|
|
|
|
Chuda
Гость
|
|
« Ответ #3 : 21-01-2008 04:34 » |
|
Видимо проблема не в DTD, а в подходе. Скажи честно, что нужно сделать? Придумать изврат с несемантическим размещением всего в таблице, использованием тэгов и свойств css не по назначению или же выделить заголовок вертикальными линиями, равными по высоте логотипу? В первом случае объём кода будет немыслимым, да и трогать его будет нельзя — всё развалится от малейшего дуновения. Я уж не говорю о плясках с бубном, которые потребуются для кроссбраузерной совместимости. Во втором случае всё просто: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#logo, h1 {
height: 200px;
float: left;
}
h1 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
</style>
</head>
<body>
<img id="logo" src="logo.jpeg" />
<h1>Welcome to site!</h1>
</body>
</html>
А вообще, лучше покажи макет, а то приходится догадываться, а у меня это редко хорошо получается. |
|
|
|
|
Записан
|
|
|
|
|
Kivals
|
|
« Ответ #4 : 21-01-2008 20:09 » |
|
Дело в том, что вертикальные линии должны "недотягивать" на несколько пикселей (в примере - 10) вверх и вниз от максимальной ширины шапки
При этом высота блока "Welcome to site" (Там текст приветствия) может быть как меньше лого, так и больше - в зависимости от ширины экрана.
Кроме того используется вертикальный градиент для фона...
Завтра попробую изобразить схематически что именно нужно и прикреплю эскиз...
|
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #5 : 21-01-2008 20:31 » |
|
Шильгия, а ты попробуй, то что привел Kivals, в первом топике, а потом добавь DOCTYPE , почувствуешь разницу как вариант использовать распорку типа <img src=.... width="1px" height ="нужный размер">
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Chuda
Гость
|
|
« Ответ #6 : 21-01-2008 21:04 » |
|
я всегда пробую, прежде чем выдать какое-либо мнение  При таком подходе даже разбираться сложно. Совершенно не ясно, зачем там таблица. Очень бы хотелось услышать обоснование. Не вполне ясно, какого результата необходимо достичь. Поэтому и прошу показать макет. |
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #7 : 21-01-2008 21:14 » |
|
Шильгия, так макет в первом посте не тормози
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Chuda
Гость
|
|
« Ответ #8 : 21-01-2008 21:35 » |
|
а вот теперь начинаю тормозить. ГДЕ?  :-O |
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #9 : 21-01-2008 21:54 » |
|
Разницу чувствуешь? вариант без dotype вариант с doctype, предложенный мною |
 1111.jpg (6.07 Кб - загружено 2950 раз.)
2222.jpg (5.65 Кб - загружено 2998 раз.)
|
|
« Последнее редактирование: 21-01-2008 21:59 от Sla »
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Chuda
Гость
|
|
« Ответ #10 : 21-01-2008 22:38 » |
|
с доктайпа надо бы начинать по хорошему. Так что мне сразу была непонятна часть вопроса.
Теперь вопрос. На какой картинке то, что нужно сделать, и как эти линии долны себя вести в случае различного количества в содержимом?
Ну и факультативный вопрос на засыпку, не обязательный (ибо ответа на него скорее всего нет): какой смысл в этих линиях? зачем они?
|
|
|
|
|
Записан
|
|
|
|
|
Sla
|
|
« Ответ #11 : 21-01-2008 22:51 » |
|
Шильгия, я так понимаю что на первом рисунке желательный вариант. А смысл? Так видит дизайнер
|
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Chuda
Гость
|
|
« Ответ #12 : 22-01-2008 04:52 » |
|
Sla, а ты дизайнер? Я всё же в самом деле хочу увидеть, что должно получиться, а не догадываться.
|
|
|
|
|
Записан
|
|
|
|
|
Kivals
|
|
« Ответ #13 : 22-01-2008 06:43 » |
|
Sla абсолютно прав - это видимость дизайнера (первая картинка).
Причем дизайнер - не я. Потому вопрос "почему именно так" - не ставится. Просто нужно такое получить.
Пример без doctype - потому как я так сумел реализовать и (на мой взгляд) - код css вполне логичен. Почему с doctype себя ведет по-другому и как сделать правильно - это и есть суть вопроса.
|
|
|
|
|
Записан
|
|
|
|
|
|
|
Kivals
|
|
« Ответ #15 : 22-01-2008 11:34 » |
|
Ну хорошо - согласен - надо начинать с доктайп. Тогда вопрос звучит проще - как в доктайп сделать так, как изображено на первом рисунке Sla За ссылки спасибо - ушел читать... |
|
|
|
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #16 : 22-01-2008 11:48 » |
|
А это уже опытным путем. Нет, конечно, сперва стоит узнать поведение по стандарту, а потом - как это реально работает в том или ином браузере.
Я не долго думая сделал бы таблицу 3х3. Первый и последний столбец - rowspan="3". В верхняя и нижняя ячейки среднего столбца - распорки. Левую и правую границы центральной ячейки сделать "1px solid black".
|
|
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Kivals
|
|
« Ответ #17 : 22-01-2008 13:35 » |
|
Я пробовал и так - то же самое поведение (средняя строка сжимается в центр) Даже еще хуже - не могу управиться с шириной, чтобы добиться 1px <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/*td.menu-div, td.menu-offset {
padding:0px;
margin:0px;
}*/
td.menu-div {
width:1px;
background:black;
height:100%;
}
td.menu-offset {
width:1px;
height:10px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=3><img src='logo.jpg' /></td>
<td class='menu-offset'><div /></td>
<td rowspan=3><h1>Welcome to site!</h1></td>
<td class='menu-offset'><div /></td>
<td rowspan=3><img src='banner.jpg' /></td>
</tr>
<tr>
<td class='menu-div'><div /></td>
<td class='menu-div'><div /></td>
</tr>
<tr>
<td class='menu-offset'><div /></td>
<td class='menu-offset'><div /></td>
</tr>
</table>
</body>
</html> |
|
|
« Последнее редактирование: 22-01-2008 13:38 от Kivals »
|
Записан
|
|
|
|
|
Kivals
|
|
« Ответ #18 : 22-01-2008 14:02 » |
|
Сори - вчитался внимательней... вот такой код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
td.menu-offset {
background:yellow;
height:10px;
}
td.menu-div2 {
border-left:1px solid black;
border-right:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=3 valign=top><img src='logo.jpg' /></td>
<td class='menu-offset'></td>
<td rowspan=3 valign=top><img src='banner.jpg' /></td>
</tr>
<tr>
<td class='menu-div2'><h1>Welcome to site!</h1><br /><h1>Welcome to site!</h1><br /><h1>Welcome to site!</h1><br /><h1>Welcome to site!</h1><br /></td>
</tr>
<tr>
<td class='menu-offset'></td>
</tr>
</table>
</body>
</html> дает нужный результат, но не совсем универсальный: 1. с бакграундом проблема (нужно его прописывать будет и в классе ячейки с текстом, причем с отрицательным сдвигом) 2. нельзя сделать линии короче текста в средней ячейке, т.е. такой вариант невозможен: |
|
|
|
Записан
|
|
|
|
|
RXL
|
|
« Ответ #19 : 22-01-2008 14:09 » |
|
Kivals, 1. "распорка" - это картинка 1х1 (обычно - прозрачный gif), которой принудительно задаются размеры. Она не сжимается и потому - "распорка". 2. Если задаешь DOCTYPE xhtml, то нельзя пользоваться синтаксисом html: rowspan=3 - значение должно быть в кавычках! 3. С таблицей и rowspan ты порядком напутал...
|
test.rar (12.67 Кб - загружено 1053 раз.)
test.png (10.29 Кб - загружено 3012 раз.)
|
|
« Последнее редактирование: 22-01-2008 14:11 от RXL »
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
|
Sla
|
|
« Ответ #20 : 22-01-2008 14:17 » |
|
надо играться распорками 1px.gif <tr>
<td><img src=logo /> <img style=margin-left:NNpx src=1pxxheight.gif> </td>
<td> Hello World </td>
<td><img style=margin-right:NNpx src=1pxxheight.gif /> <img src=baner /> </td>
</tr>
[/tr]
Идея понятна? |
|
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
|
Kivals
|
|
« Ответ #21 : 22-01-2008 15:35 » |
|
Спасибо про распорки - не в курсе был. Сейчас попробую....
|
|
|
|
|
Записан
|
|
|
|
|
Chuda
Гость
|
|
« Ответ #22 : 23-01-2008 23:04 » |
|
Теперь стало проясняться чуток… Возможно, имелось в виду такое? <!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>
<title>test</title>
<style type="text/css">
#header {
padding: 10px;
_height: 0px;
}
body > #header {
overflow: hidden;
}
#header a, #header h1 {
float: left;
}
#header a {
display: block;
padding: 0 10px;
}
#header a img {
position: relative;
border: 0;
margin: -10px 0;
}
#header a#logo {
border-right: 1px solid #000;
}
#header a#banner {
border-left: 1px solid #000;
}
</style>
</head>
<body>
<div id="header">
<a id="logo" href="/"><img src="logo.gif" alt="супермегафирма" /></a>
<h1>Welcome to site!</h1>
<a id="banner" href="/superpuper/"><img src="banner.gif" alt="суперпуперпредложение" /></a>
</div>
site content
</body>
</html>
Нужны пояснения, что к чему? Или из кода понятно? P.S. К сожалению, проверялось не во всех браузерах, а только в восьми оказавшихся под рукой. В порядке эксперимента были допущены формальные ошибки, то есть код сделан невалидным — ошибок отображения при этом не появилось. Строго говоря, сейчас код и есть невалидный, но писать отдельный файл для IE старых версий ради одной строчки в данном случае мне было лениво, так что прошу простить. Опять же в порядке эксперимента менялся доктайп — никаких неожиданностей, в отдельных браузерах начинает отображаться несколько не так, как задумано. Для примера можно было и не добавлять div#header, все элементы и без него располагаются как задумано, но семантически он верен, в реальном коде его уместность будет очевидна. Тэги «a» добавлены исходя из соображений здравого смысла. Надеюсь, в данном проекте не предполагается подрывать общепринятые устои? Пример делался и испытывался с картинками разной высоты. Насколько я понимаю, задумка дизайнера в том, чтобы размеры этих линий отталкивались от размеров картинок? Вот как-то так… |
|
|
|
« Последнее редактирование: 24-01-2008 20:23 от Шильгия »
|
Записан
|
|
|
|
|
