Требуется совет верстальшика...

Главные вкладки

Аватар пользователя lexa74 lexa74 25 февраля 2007 в 18:50

вобщем такая проблема... надо сделать страничку как на рисунке
http://uralpack.ru/new/files/up111.jpg

я уже голову сломал как это лучше сделать, текст внутри - ссылки

Пробовал таблицы в таблице, расползается
Просто таблички друг за другом не хотят вставать

Комментарии

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 12:29

В весьма простейшем случае эти контейнеры могли бы быть описаны так:

div.cont{
        height: 190px;  /* высота */
        width: 140px;  /* ширина */
        border: 2px solid Gray; /* бордюр или ободок, или как Вам там еще удобнее называть */
        padding: 5px; /* внутренний отступ */
        background: #FAFAD2; /* внешний отступ */
        min-height: 140px;  /* минимальная высота, это чтоб его не косячило */
        min-width: 190px;   /* минимальная ширина, это чтоб его не косячило */
        float: left; /* выравнивание элемента по левой стороне*/
}

Далее.
Как известно, за 8 лет существования CSS2 разработчики Internet Explorer так и не сподобились научить своего монстра понимать многие полезные
CSS-свойства и посему, чтоб min-height: и min-width работали не только в Mozilla Firefox и Opera делаем следующее:

Качаем с http://www.doxdesk.com/software/js/minmax.html файл minmax.js

Вставляем в xHTML такой код.

Проверяем, подгоняем, настраиваем.

Далее, едем в СК Олимпийский, покупаем вот это и вот это.

И не морочим не себе, не другим голову.

Кстати, http://www.sadhooklay.narod.ru
Вот так то вот Wink

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 13:14

Та не-е-е.. там другая идея преследуется.
Там не только _мне _ не показывать рЫкламу, ибо у меня файрвол все нафик перерубает еще на роутере Wink
А вобще _никто_ не видит её, рЫкламу тобишь Smile

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 20:45

очепятка....

я писал так

div.cont{
height: 190px; /* высота */
width: 140px; /* ширина */
border: 2px solid Gray; /* бордюр или ободок, или как Вам там еще удобнее называть */
padding: 5px; /* внутренний отступ */
background: #FAFAD2; /* внешний отступ */
min-height: 140px; /* минимальная высота, это чтоб его не косячило */
min-width: 190px; /* минимальная ширина, это чтоб его не косячило */
float: left; /* выравнивание элемента по левой стороне*/
}

а надо так

div.cont{
height: 190px; /* высота */
width: 140px; /* ширина */
border: 2px solid Gray; /* бордюр или ободок, или как Вам там еще удобнее называть */
padding: 5px; /* внутренний отступ */
margin: 5px; /* внешний отступ */
background: #FAFAD2; /* Фон */
min-height: 140px; /* минимальная высота, это чтоб его не косячило */
min-width: 190px; /* минимальная ширина, это чтоб его не косячило */
float: left; /* выравнивание элемента по левой стороне*/
}

Пардон-те

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 12:39

Боюсь ему сначало нужно тут(Cascading Style Sheets) почитать и
тут(HyperText Markup Language (HTML) Home Page),
а то совсем у человека плохо с представлением : )

Аватар пользователя lexa74 lexa74 26 февраля 2007 в 18:15

пошёл пробовать...

"Далее, едем в СК Олимпийский, покупаем вот это и вот это."
э... мне как бы далековато с Челябинска топать дотуда ))))

Аватар пользователя lexa74 lexa74 26 февраля 2007 в 19:19

вроде понял как и что...
теперь срастить не могу

пихаю код
div.cont{
height: 190px; /* высота */
width: 140px; /* ширина */
border: 2px solid Gray; /* бордюр или ободок, или как Вам там еще удобнее называть */
padding: 5px; /* внутренний отступ */
background: #FAFAD2; /* внешний отступ */
min-height: 140px; /* минимальная высота, это чтоб его не косячило */
min-width: 190px; /* минимальная ширина, это чтоб его не косячило */
float: left; /* выравнивание элемента по левой стороне*/
}
в файл style.css темы

и пишу в страничке моей:
div ID="cont">
table width="100%" border="0" cellpadding="0">
tr>
td> /td>
/tr>
tr>
td> /td>
/tr>
tr>
td height="100"> /td>
/tr>
/table>
/div>
только вот она этот стиль не подхватывает

*в коде поубирал везде < чтобы вывести код... как его сюда по-другому засунуть не знаю

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 20:50

Так!
Раз Саша не хочет pastebin сюда прикрутить, на форум где преобладает исходный код, поступим следующим образом:
Вставляй код http://pastebin.mozilla-russia.org/ и давай ссылку.

Вот пример: http://pastebin.mozilla-russia.org/830

Жду

Аватар пользователя lexa74 lexa74 26 февраля 2007 в 20:57

ну код-то вроде верный...
я его кидаю в style.css
или его куда-то в другое место надо?

в ноде куда пишется код его же не прописать никак?

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 26 февраля 2007 в 21:12

Какой код?
Стили, которые вы назначаете элементам?
Не обязательно туда.
Почему, потому, что если у вас будет много правок то удобнее их иметь в одном файле, а в вашу тему вставлять кодом,
типа : http://pastebin.mozilla-russia.org/832

И потом, зачем вам таблицы? Забудте про них! Это техника 7-ми летней давности!
Сегодня мы должны очистить наш ум от практики прошлого. Веб-просветление уже достигнуто благодаря неустанным усилиям людей вроде W3C, WaSP и создателей основных браузеров.

Понимание нужно только для действия!
Больше ни для чего. Сейчас можно попробовать вдохнуть немного жизни в web-технологии десятилетней давности используя наше понимание.

Аватар пользователя lexa74 lexa74 26 февраля 2007 в 21:46

красиво получилось ))

только когда в чистом хтмл - тут понятно, сверху описываем стиль, снизу его юзаем

а как запихнуть сиё в друпал в виде страницы? Я-ж через тини запихиваю в режиме хтмл

вот и проблема как подключить стиль мой

Аватар пользователя Ainur Ainur 27 февраля 2007 в 1:42

Если есть это:
height: 190px; /* высота */
width: 140px; /* ширина */

то причем тут:
min-height: 140px; /* минимальная высота, это чтоб его не косячило */
min-width: 190px; /* минимальная ширина, это чтоб его не косячило */
?

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 27 февраля 2007 в 11:59

Это для того, если например CMS вставит картинку больше чем сам блок, чтоб его не растянуло потом.

DIV это вам не TABLE, если конечно не играться со свойством overflow.

Аватар пользователя Ainur Ainur 27 февраля 2007 в 13:06

SadhooKlay во-первых IE min-height/width не понимает, во-вторых, это значит что ширина или высота блока должна быть МИНИМУМ указанного размера, а не «чтоб его не растянуло потом». У тебя фиксированный размер, по этому min-height/width бесполезны.

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 27 февраля 2007 в 13:38

>SadhooKlay во-первых IE min-height/width не понимает
Цитирую сам себя:

Как известно, за 8 лет существования CSS2 разработчики Internet Explorer так и не сподобились научить своего монстра понимать многие полезные
CSS-свойства и посему, чтоб min-height: и min-width работали не только в Mozilla Firefox и Opera делаем следующее:

Качаем с http://www.doxdesk.com/software/js/minmax.html файл minmax.js

>это значит что ширина или высота блока должна быть МИНИМУМ
Я просто не дописал, по моему и так ясно что надо дописать так:
min-height: bla - bla - bla;
min-width: bla - bla - bla;
max-height: bla - bla - bla;
max-width: bla - bla - bla;

Аватар пользователя Ainur Ainur 27 февраля 2007 в 16:46

height: 190px; /* высота */
В сочетании с
min-height: 140px; /* минимальная высота, это чтоб его не косячило */
Бесполезно.

Аватар пользователя lexa74 lexa74 2 марта 2007 в 19:04

еще вопросик...
как всю эту кучу разместить по центру?
пробовал объеденить всё это под Div align=center, не помогает...

Аватар пользователя SadhooKlay SadhooKlay (не проверено) 2 марта 2007 в 19:53

align=center у дивов не может быть по определению.

Используй отступы и/или поля по краям.
Значения в процентах должно быть, чтоб при ресайзе не появлялось неожиданностей.