конвертируем килограмм табличной верстки в DIV @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
На страницу 1 2  >  Страница 1 из 2 [ Сообщений: 37 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Заголовок сообщения: конвертируем килограмм табличной верстки в DIV
Сообщение Добавлено: 14 Сентябрь 2005, 09:56:11 
Вопрос к любителям стилей/DIV'ов:

как сверстать код

Код:
<table width=100%>
<tr>
      <td>item one</td>
      <td>item two</td>
      <td>item three</td>
      <td width=30%>-</td>
      <td>item four</td>
</tr>
<tr>
      <td colspan=3>item level 2 one</td>
      <td colspan=2>item level 2 two</td>
</tr>
</table>


без таблицы?
karamba Муж.
старожил
209
Сообщения: 6498
Зарегистрирован: 17.08.05
Откуда: Киев. А шо?
Сообщение Добавлено: 14 Сентябрь 2005, 10:21:52 
чем рассчитаетесь?
или так, "на поговорить" тема?

_________________
клетчатый!
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 10:26:59 
RTFM
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 10:47:11 
karamba, Мне не для бизнеса...просто интересно, получится ли код на дивах для данного примера короче (в байтах), чем с таблицами.
Акела, вышлете "M"? :)
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 14 Сентябрь 2005, 11:05:26 
gregzem, вам как проще или как правильно?

Как проще:
Код:
<div style="width:100%; position:relative;">
<div style="display:block; float:left; width:17.5%;">item 1</div>
<div style="display:block; float:left; width:17.5%;">item 2</div>
<div style="display:block; float:left; width:17.5%;">item 3</div>
<div style="display:block; float:left; width:30%;">item 4</div>
<div style="display:block; float:left; width:17.5%;">item 5</div>
</div>

<div style="width:100%; position:relative;">
<div style="display:block; float:left; width:52.5%;">item 6</div>
<div style="display:block; float:left; width:47.5%;">item 7</div>
</div>


"Как правильно" пишется уже не бесплатно ;)

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 11:12:48 

Бaзиль писал(а):
gregzem, вам как проще или как правильно?

Как проще:
Код:
<div style="width:100%; position:relative;">




Два балла. Вы проверяли то, что написали? Попробуйте скопировать то, что написали Вы и что предложил сделать я в одну HTML друг под другом и посмотреть, что произойдет елси немножко "побаянить".
Найдите 10 отличий :)


Бaзиль писал(а):
"Как правильно" пишется уже не бесплатно ;)


Вы так часто повторяете про "не бесплатно", что мне уже начинает казаться, что Вы - не альтруист :)

Есть еще у кого-нибудь желание попробовать свои силы в качестве DIVного кодера?
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 14 Сентябрь 2005, 11:17:06 
RTFM. Че трудно посмотреть хоятбы в старых темах? 100 раз обсуждалось.

_________________
Frontend developer: IonDen.com
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 14 Сентябрь 2005, 11:43:30 
gregzem, вы мне оценки ставите?? :lol:


Цитата:
мне уже начинает казаться, что Вы - не альтруист



Да, хоть в этом вы правы. Я не альтруист, никогда им не был и очень надеюсь, что никогда и не стану. Я жадный, вредный, эгоистичный, скупой, у меня большое сердце и на меня давит столб воздуха силою в двести четырнадцать кило :cool:

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 11:56:27 
IonDen666, я не обсуждают теорию, я привел конкретный пример. ВАЖНО, чтобы результат был меньше либо равен по размеру табличной верстке.
Бaзиль, а по теме вопроса? :)
Бaзиль Муж.
участник
49
Сообщения: 1288
Зарегистрирован: 13.02.05
Откуда: Околомосковье
Сообщение Добавлено: 14 Сентябрь 2005, 14:27:01 
gregzem, если так уж волнуют те несколько байт, то делайте таблицами. Это будет вам наказанием.

_________________
Не кочегары мы, не плотники,
Но сожалений горьких нет -
Как нет?
А мы дизайнеры-художники,
И с высоты вам шлем привет -
Привет!


Последний раз редактировалось Бaзиль 14 Сентябрь 2005, 14:29:04, всего редактировалось 1 раз.
uggallery
новый человек
0
Сообщения: 31
Зарегистрирован: 11.08.04
Откуда: СПб
Сообщение Добавлено: 14 Сентябрь 2005, 14:43:26 
Никакой экономии в таком умозрительном примере, естественно, не получится. Потому, что к разметке добавляются CSS-инструкции, и файл даже больше станет. Вот если переверстать реальную страницу, с десятком таблиц, а CSS вынести в отдельный файл (один для многих страниц, да еще и кэшируется), вот тогда будет экономия и немаленькая.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 15:08:22 
uggallery, ага.

gregzem, "М" содержится во многих топиках этого форума, форума на xpoint, на листапарте, вебстандартсе и особенно в гугле.
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 15:32:21 
Вижу, таблицы здесь не любят :)

Тогда последний интересующий вопрос: как установить минимальную ширину DIV'а? В таблицах это делается через "распорку" (1x1 gif) в ячейке таблицы. А в div этот фокус пройдет [на стилях|с "распоркой"]?
karamba Муж.
старожил
209
Сообщения: 6498
Зарегистрирован: 17.08.05
Откуда: Киев. А шо?
Сообщение Добавлено: 14 Сентябрь 2005, 15:47:45 
а чем "1x1 gif" в <td> отличается от "1x1 gif" в <div> если говорить о гифе?
а зачем ограничивать мин.ширину дива?

а насчет "таблицы здесь не любят":
— Гоги, ти лубишь памидоры?
— Ест лублу, а так нэ очэнь.

_________________
клетчатый!
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 17:05:12 
gregzem, я тихо хренею... А самому попробовать ломает?
abraitcev
новый человек
6
Сообщения: 165
Зарегистрирован: 28.09.02
Откуда: Murmansk
Сообщение Добавлено: 14 Сентябрь 2005, 17:55:52 
gregzem, Вы слышали анекдот о том, как архангельские мужики испытывали импортную бензопилу? :)
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 18:55:42 
abraitcev, только они делали это САМИ! :laugh:
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 19:55:29 

Акела писал(а):
gregzem, я тихо хренею... А самому попробовать ломает?


Это первый дельный совет за сегодня :)
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 20:19:00 
gregzem, ну если Вы, как человек, вроде бы претендующий на звание кодера не догадались об этом без меня, то сорри.
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 20:30:31 
Я вообще-то претендую на звание лучший свиновод колхоза "Вилы Ильича", но слово "кодер" мне тоже нравится.

Спасибо всем участникам за дельные и бездельные советы.
Все апплодируют друг другу стоя!
horn Муж.
соучастник
4
Сообщения: 582
Зарегистрирован: 19.05.04
Откуда: Москов
Сообщение Добавлено: 14 Сентябрь 2005, 20:34:08 
Мне не ясен сарказм вопрошающего. :confused: И мне слышится в нём какая-то издевка.

_________________
корабли лавировали, лавировали и вылавировали
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 14 Сентябрь 2005, 20:34:42 
gregzem, не иначе как за то, что не стали потеть на халяву? ;)
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 21:58:08 
horn, не сарказм. ирония. Наблюдения показывают, что в форуме собрались слишком крутые программеры, чтобы просто и доступно ответить на вопросы новичку (сил обычно хватает на нажатие четырех клавиш..ээээ... дайте вспомнить... "R", "T", "F" и еще одна...кажется "M"), а самим нет надобности задавать вопросы, потому что их просто нет. Вот и происходит примерно то же, что и в этом топике. задали конкретный вопрос про верстку конкретной задачи, а дебаты ушли в район любви Гоги к помидорам.
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 14 Сентябрь 2005, 22:03:49 

Акела писал(а):
gregzem, не иначе как за то, что не стали потеть на халяву? ;)



На халяву даже потеть приятно.
abraitcev
новый человек
6
Сообщения: 165
Зарегистрирован: 28.09.02
Откуда: Murmansk
Сообщение Добавлено: 14 Сентябрь 2005, 22:55:49 
gregzem, если приятно, то попробуйте это сверстать в таблице
Код:
<style>   div {border: 1px solid black;}</style>
<div style="width:100%;height:100%;">
   <div style="width:5em;height:100%;float:left;">&</div>
   <div style="width:5em;height:100%;float:right;">&</div>
   <div style="width:auto;,width:100%;height:100%;overflow:scroll;">
      <div style="width:1024px;height:768px;">&</div>
   </div>
</div>
Inviz Муж.
соучастник
0
Сообщения: 687
Зарегистрирован: 05.04.05
Сообщение Добавлено: 14 Сентябрь 2005, 23:16:14 
попробуйте сверстать в таблице это:
http://inviz.personart.ru/playground/th … _mine.html
Сделал СПЕЦИАЛЬНО для вас.

_________________
критиковать человека не имеет смыла, потому что критика заставляет его защищаться и, как правлио искать оправданий. критиковать человека опасно, так как критика наносит удар его гордости, задевает чувство собственной значитмости и обижает его. (Дейл Карнеги)
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 15 Сентябрь 2005, 00:47:33 
horn, ааааафигец. "Бонд. Джеймс Бонд." "Horn. Long horn" :lol: :weep: :lol:

gregzem, счастливого времяпрепровождения в парилке.

abraitcev, Inviz, коллеги! Вы решили уронить биржевой курс бисера? :weep:
horn Муж.
соучастник
4
Сообщения: 582
Зарегистрирован: 19.05.04
Откуда: Москов
Сообщение Добавлено: 15 Сентябрь 2005, 10:16:13 

gregzem писал(а):
horn, не сарказм. ирония. Наблюдения показывают, что в форуме собрались слишком крутые программеры, чтобы просто и доступно ответить на вопросы новичку



Мне показалось, что постановка задачи была не столько от новичка, сколько от человека, который пытается что-то доказать.
Ну и судя по некоторым ответам в топике — не мне одному :dandy:

Вот такой вариант Вас устроит?

_________________
корабли лавировали, лавировали и вылавировали
horn Муж.
соучастник
4
Сообщения: 582
Зарегистрирован: 19.05.04
Откуда: Москов
Сообщение Добавлено: 15 Сентябрь 2005, 10:17:16 
Акела, забавно =)

_________________
корабли лавировали, лавировали и вылавировали
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 15 Сентябрь 2005, 10:34:09 

horn писал(а):

gregzem писал(а):
horn, не сарказм. ирония. Наблюдения показывают, что в форуме собрались слишком крутые программеры, чтобы просто и доступно ответить на вопросы новичку



Мне показалось, что постановка задачи была не столько от новичка, сколько от человека, который пытается что-то доказать.
Ну и судя по некоторым ответам в топике — не мне одному :dandy:

Вот такой вариант Вас устроит?



Что мне понравилось: в первом приближении поведение элементов мачится с поведением того кода, который привел я.

Что мне не понравилось:

1. сделано абсолютное позиционирование контейнера main (при Relative он уползает далеко вправо...по всей видимости margin-left: -49% это исправляет :-)
2. сейчас стало модно в качестве контейнеров использовать <LI>?
3. при уменьшении окна браузера по разному ведут себя элементы "level 2 item two level 2" (уползает вниз).

Если есть интерес попробовать еще раз - велкам. Если нет - забейте.
horn Муж.
соучастник
4
Сообщения: 582
Зарегистрирован: 19.05.04
Откуда: Москов
Сообщение Добавлено: 15 Сентябрь 2005, 11:00:38 
1. А зачем делать его релятивным? Основной контейнер вы можете располагать как Вам угодно, лишь бы кроссбраузерность была.
2. Вы в коде примера что написали? Item one, item two. Вот и получите list-items =) Если Ваш пример суть навигация, то его элементы будут элементами списка, если Ваш пример суть конверт таблицы из Excel — делайте таблицей.
3. Только в IE и только в определённых размерах экрана, «скачками». Нормальные браузеры отображают адекватно.

Интереса нет, так как вы задачу ставите исключительно умозрительную — «получится ли то, не знаю что, больше в байтах чем вот это непойми что».
Я Вам привел пример кода 99,9% (минус баги ИЕ, минус позиционирование символа «-» относительно list item two level 2) соответствующего Вашему ТЗ. Делайте нужные Вам выводы, это уже дело Ваше.

«сейчас стало модно в качестве контейнеров использовать <LI>?» — какой Вы знающий «новичок» :laugh:

_________________
корабли лавировали, лавировали и вылавировали
gregzem Муж.
новый человек
2
Сообщения: 252
Зарегистрирован: 29.04.03
Сообщение Добавлено: 15 Сентябрь 2005, 11:42:00 

horn писал(а):
1. А зачем делать его релятивным? Основной контейнер вы можете располагать как Вам угодно, лишь бы кроссбраузерность была.


Хочу релятивно в тексте страницы расположить :)


horn писал(а):
3. Только в IE и только в определённых размерах экрана, «скачками». Нормальные браузеры отображают адекватно.


Ну не любят у нас крестьяне нормальные браузеры...пользуются тем, что всегда под рукой...


horn писал(а):
«сейчас стало модно в качестве контейнеров использовать <LI>?» — какой Вы знающий «новичок» :laugh:


А где я писал, что я новичок?

Мое мнение - тема себя исчерпала.
Акела Муж.
Констататор
17
Сообщения: 7419
Зарегистрирован: 15.11.04
Сообщение Добавлено: 15 Сентябрь 2005, 14:25:00 
оффтопик:
gregzem, она с первого поста себя исчерпала, что и было сказано сразу. Самое интересное в том, что зачастую на совершенно ламерские вопросы, неоднократно освещённые не только в сети вообще, а даже здесь и даже на той же неделе, дают совершенно исчерпывающие ответы. Когда вопрошающий не пальцует. Не мне Вас воспитывать, это я так, о форуме в целом.
horn Муж.
соучастник
4
Сообщения: 582
Зарегистрирован: 19.05.04
Откуда: Москов
Сообщение Добавлено: 15 Сентябрь 2005, 14:52:25 

gregzem писал(а):
Хочу релятивно в тексте страницы расположить :)



Располагайте. Что Вам мешает? Вы же не новичок.


gregzem писал(а):
Ну не любят у нас крестьяне нормальные браузеры...пользуются тем, что всегда под рукой...



Значит нужно придумать соответствующие поправки для стилей в IE.
Придумывайте.


gregzem писал(а):
А где я писал, что я новичок?



Примерно здесь:

gregzem писал(а):
Наблюдения показывают, что в форуме собрались слишком крутые программеры, чтобы просто и доступно ответить на вопросы новичку.



gregzem писал(а):
Мое мнение - тема себя исчерпала.



Совершенно с Вами согласен. Но в этом нет вины ни одного из ответивших Вам.

_________________
корабли лавировали, лавировали и вылавировали
Kurilshik
Goldmember
142
Сообщения: 12797
Зарегистрирован: 18.10.04
Откуда: Кожаное кресло
Сообщение Добавлено: 15 Сентябрь 2005, 16:18:48 
оффтопик:
может в общий перейдем?

_________________

Портфолио - ЖЖ - Кулинарные рецепты - Блог о дизайне, уроки фотошоп

icq: 295346452 | Почта: info()alexey-popov.com

.
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
На страницу 1 2  >  Страница 1 из 2 [ Сообщений: 37 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100