Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Вертикальная черта между ячейками таблицы с заданными отступами сверху и снизу - проблема в DTD XHTM  (Прочитано 22624 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« : 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
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #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>&nbsp;</div></td>
<td><h1>Welcome to site!</h1></td>
<td class='menu-div'><div>&nbsp;</div></td>
<td><img src='l.jpg' alt='' /></td>
</tr>
</table>
</body>
</html>
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #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
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 21-01-2008 20:09 » 

Дело в том, что вертикальные линии должны "недотягивать" на несколько пикселей (в примере - 10) вверх и вниз от максимальной ширины шапки
При этом высота блока "Welcome to site" (Там текст приветствия) может быть как меньше лого, так и больше - в зависимости от ширины экрана.
Кроме того используется вертикальный градиент для фона...
Завтра попробую изобразить схематически что именно нужно и прикреплю эскиз...
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 21-01-2008 20:31 » 

Шильгия, а ты попробуй, то что привел Kivals, в первом топике, а потом добавь  DOCTYPE  , почувствуешь разницу
 как вариант использовать распорку типа <img src=.... width="1px" height ="нужный размер">
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #6 : 21-01-2008 21:04 » 

я всегда пробую, прежде чем выдать какое-либо мнение Улыбаюсь
При таком подходе даже разбираться сложно.
Совершенно не ясно, зачем там таблица. Очень бы хотелось услышать обоснование. Не вполне ясно, какого результата необходимо достичь. Поэтому и прошу показать макет.
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #7 : 21-01-2008 21:14 » 

Шильгия, так макет в первом посте Улыбаюсь не тормози Улыбаюсь
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #8 : 21-01-2008 21:35 » 

а вот теперь начинаю тормозить. ГДЕ?Не понялНе понял :-O
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 21-01-2008 21:54 » 

Разницу чувствуешь?
вариант без dotype

вариант с doctype, предложенный мною Жаль

* 1111.jpg (6.07 Кб - загружено 2643 раз.)
* 2222.jpg (5.65 Кб - загружено 2615 раз.)
« Последнее редактирование: 21-01-2008 21:59 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #10 : 21-01-2008 22:38 » 

с доктайпа надо бы начинать по хорошему. Так что мне сразу была непонятна часть вопроса.
Теперь вопрос. На какой картинке то, что нужно сделать, и как эти линии долны себя вести в случае различного количества в содержимом?
Ну и факультативный вопрос на засыпку, не обязательный (ибо ответа на него скорее всего нет): какой смысл в этих линиях? зачем они?
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 21-01-2008 22:51 » 

Шильгия, я так понимаю что на первом рисунке желательный вариант.
А смысл? Так видит дизайнер Улыбаюсь
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #12 : 22-01-2008 04:52 » 

Sla, а ты дизайнер? Я всё же в самом деле хочу увидеть, что должно получиться, а не догадываться.
Записан
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #13 : 22-01-2008 06:43 » 

Sla абсолютно прав - это видимость дизайнера (первая картинка).
Причем дизайнер - не я. Потому вопрос "почему именно так" - не ставится. Просто нужно такое получить.
Пример без doctype - потому как я так сумел реализовать и (на мой взгляд) - код css вполне логичен. Почему с doctype себя ведет по-другому и как сделать правильно - это и есть суть вопроса.
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #14 : 22-01-2008 08:19 » 

Kivals, который раз про DOCTYPE: https://forum.shelek.ru/index.php/topic,12526.msg163382.html#msg163382
И пройдись по ссылкам в конце поста.
Страницу надо начинать с DOCTYPE. В противном случае результат непредсказуем.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #15 : 22-01-2008 11:34 » 

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

За ссылки спасибо - ушел читать...
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #16 : 22-01-2008 11:48 » 

А это уже опытным путем. Нет, конечно, сперва стоит узнать поведение по стандарту, а потом - как это реально работает в том или ином браузере.

Я не долго думая сделал бы таблицу 3х3. Первый и последний столбец - rowspan="3". В верхняя и нижняя ячейки среднего столбца - распорки. Левую и правую границы центральной ячейки сделать "1px solid black".
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #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>

* test1.JPG (13.27 Кб - загружено 2620 раз.)
« Последнее редактирование: 22-01-2008 13:38 от Kivals » Записан
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #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. нельзя сделать линии короче текста в средней ячейке, т.е. такой вариант невозможен:

* test2.JPG (13.09 Кб - загружено 2642 раз.)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #19 : 22-01-2008 14:09 » 

Kivals,
1. "распорка" - это картинка 1х1 (обычно - прозрачный gif), которой принудительно задаются размеры. Она не сжимается и потому - "распорка".
2. Если задаешь DOCTYPE xhtml, то нельзя пользоваться синтаксисом html: rowspan=3 - значение должно быть в кавычках!
3. С таблицей и rowspan ты порядком напутал...


* test.rar (12.67 Кб - загружено 894 раз.)
* test.png (10.29 Кб - загружено 2648 раз.)
« Последнее редактирование: 22-01-2008 14:11 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #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
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #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 от Шильгия » Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines