Одесса: 5°С (вода 9°С)
Киев: 0°С
Львов: -1°С

Тема: 2 колонки в Div либо таблицах

Ответить в теме
Показано с 1 по 18 из 18
  1. Вверх #1
    Живёт на форуме Аватар для aleyer
    Пол
    Мужской
    Адрес
    Там же
    Возраст
    27
    Сообщений
    4,341
    Репутация
    943

    По умолчанию 2 колонки в Div либо таблицах

    Доброго времени суток. хочу сделать вот что:
    2 колонки, одна фиксированной ширины (это работает), другая - на всё оставшееся пространство. как это делается в css и div понять (пока) не могу, а если сделать в таблицах (а содержимое таблиц расписано в div'ах), то вторая колонка нормально отображается в Опере, занимая выделенный ей кусок экрана полностью, и не вылазя за его границы (центральная часть страницы, слева и справа - меню). В фаерфоксе вторая колонка (правая) вылазит за пределы справа, залазя под правое меню, в эксплорере левое и правое меню падают ниже содержания страницы (эти самые 2 колонки), колонка растягивается от центра, залазя на места менюшек. страница на локальном сервере, но, если надо, заброшу на сайт, дам ссылку. код могу тоже выложить, но прежде всего интересует теория, почему происходит так и как с этим бороться и как сделать саморастягивание колонки на div и css.


  2. Вверх #2
    Постоялец форума Аватар для sleep-walker
    Пол
    Мужской
    Сообщений
    1,334
    Репутация
    139
    А ширина хоть в процентах задавалась?

  3. Вверх #3
    Частый гость Аватар для Lexis
    Пол
    Мужской
    Адрес
    Одесса
    Возраст
    32
    Сообщений
    715
    Репутация
    166
    определяй браузер, и в соответствии с ним свои параметры колонок
    Только смерть помогает понять смысл жизни

  4. Вверх #4
    Новичок
    Пол
    Мужской
    Сообщений
    57
    Репутация
    12
    Записей в дневнике
    1
    HTML
    <div id="content">
    <div id="sidebar"></div>
    <div id="mainContent"></div>
    </div>

    CSS
    #content {
    overflow: hidden;
    height: 1%; (или zoom: 1; если для родительского элемента блока #content задана высота)
    }

    #sidebar {
    float: left (или right);
    width: 200px (%, em);
    }

    #mainContent {
    margin: 0 0 0 200px (%, em); (для левого float)
    }

  5. Вверх #5
    Не покидает форум Аватар для -=TigeR=-
    Пол
    Мужской
    Адрес
    Одесса
    Сообщений
    6,623
    Репутация
    1300
    вобще то див - блочный элемент...
    и разместить рядом два дива можно только абсолютным позиционированием...
    хочешь все нормально разместить - используй таблицу....

  6. Вверх #6
    Живёт на форуме Аватар для aleyer
    Пол
    Мужской
    Адрес
    Там же
    Возраст
    27
    Сообщений
    4,341
    Репутация
    943
    сейчас попрробую то, что предложил Quantum...
    хочешь все нормально разместить - используй таблицу....
    так я и сделал. в результате нормально отображается, не вылазя куда не надо, только в опере

  7. Вверх #7
    Новичок
    Пол
    Мужской
    Сообщений
    57
    Репутация
    12
    Записей в дневнике
    1
    Народ, вы чего? Какие таблицы? CSS достаточно мощный и гибкий инструмент, чтобы, в большинстве случаев, отказаться от табличной верстки.

  8. Вверх #8
    Не покидает форум Аватар для -=TigeR=-
    Пол
    Мужской
    Адрес
    Одесса
    Сообщений
    6,623
    Репутация
    1300
    Цитата Сообщение от aleyer Посмотреть сообщение
    сейчас попрробую то, что предложил Quantum...

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

  9. Вверх #9
    Живёт на форуме Аватар для Alochka
    Пол
    Женский
    Адрес
    Одесса пос. Котовского
    Возраст
    42
    Сообщений
    3,085
    Репутация
    1310
    Quantum дал совершенно правильный пример. Получится только если вписать эти колонки в родительский div.

  10. Вверх #10
    Постоялец форума Аватар для sleep-walker
    Пол
    Мужской
    Сообщений
    1,334
    Репутация
    139
    Цитата Сообщение от -=TigeR=- Посмотреть сообщение
    вобще то див - блочный элемент...
    и разместить рядом два дива можно только абсолютным позиционированием...
    хочешь все нормально разместить - используй таблицу....
    юзается float и спокойно всё размещается) Просто в некоторых случаях придётся заюзать br со стилем clear. Тонкостей много, для каждой ситуации можно что-то найти)

    aleyer, очень тяжело так что-то сказать. Надо видеть весь код, чтоб подсказать что-то.
    Последний раз редактировалось sleep-walker; 22.08.2008 в 12:26.

  11. Вверх #11
    Живёт на форуме Аватар для aleyer
    Пол
    Мужской
    Адрес
    Там же
    Возраст
    27
    Сообщений
    4,341
    Репутация
    943
    Я вот сам не могу раскопать весь код, чтобы понять происходящее.
    На моем сайте используется такая же тама, как и http://demo.joomlart.com/contest_opt...e_elements=red
    Видите там справа "модули" (так они зовутся в джумле) в округлом стиле? Я решил главную страницу сделать в двух таких колонках, выдернув код этого "округлого" элемента из отрендереной страницы. Работает в принципе. Если сделать в дивах, как предложил Quantum, то, похоже, что из-за того, что этот элемент предназначается для показа модулей, которые всегда располагаются один под другим, 2 колонки отображаются одна под другой. Без этих "округлостей" внутри всё работает.
    Но я заметил другую проблему. Все броузеры, кроме оперы отказываются преобразовывать текст, содержащий символы перехода на новую строку (не /н, <бр/>, а невидимый символ, как в текстовых редакторах) для подгонки под ширину. Соответственно строки обрезаются. Как на php убрать заменить эти символы на пробел, то есть перевести текст в одну длинную строку?
    Последний раз редактировалось aleyer; 24.08.2008 в 14:10.

  12. Вверх #12
    Постоялец форума Аватар для Илья Царюк
    Пол
    Мужской
    Адрес
    Одесса
    Возраст
    35
    Сообщений
    1,523
    Репутация
    694
    Записей в дневнике
    3
    Нет таких невидимых символов, может ты имеешь в виду управляющие ASCII-коды (http://ru.wikipedia.org/wiki/ASCII). Вот как узнаешь что это за коды, так и сможешь их заменить массово где надо и на что надо.
    Считаешь себя украинцем? Изучай украинскую историю и культуру.

  13. Вверх #13
    Живёт на форуме Аватар для aleyer
    Пол
    Мужской
    Адрес
    Там же
    Возраст
    27
    Сообщений
    4,341
    Репутация
    943
    да, это были 0a и 0d, но убираться (ereg_replace'ом в частности) они почему-то решительно откаазывались. В результате просто поменял форматирование проблемной новости, так как проблема была только в одной из них.
    С задачей уже справился, но используя таблицу с двумя ячейками (вследствие особенностей используемых красот).
    Завтра буду забрасывать изменения на сервер. Если кому-то интересно, можете заглянуть на мой сайт

    Всем спасибо!

  14. Вверх #14
    Дивы у меня на сайте отлично отображали содержимое в ИЕ и плохо в мозилле, очевидно мой малый опыт еще не позволяет стабилизировать все правильно. Float, position и top давали всё те же корявые результаты в FireFox.
    Поэтому перешел на таблицы, все задал как мне надо и во всех браузерах отображается так, как было задумано изначально.
    Запросы у меня простенькие, поэтому обхожусь пока успешно таблицами.
    Сделай, чтобы было. Затем — чтобы было красиво. Затем — чтобы было быстро

  15. Вверх #15
    Живёт на форуме Аватар для Vintyara
    Пол
    Мужской
    Адрес
    Odessa
    Сообщений
    3,180
    Репутация
    634
    Записей в дневнике
    4
    если я правильно понял проблему, вот ОДИН ИЗ вариантов -

    <div id="left">sd</div>
    <div id="right">sd</div>

    <style>
    #left, #right {
    position: absolute;
    bottom: 0;
    top:0;
    }

    #left {
    left: 0;
    width: 200px;
    background-color: green;
    }

    #right {
    left: 200px;
    right: 0;
    background-color: orange;
    }
    </style>
    Давай не будем обманывать друг друга! Ты (да, ты) все равно останешься им!

  16. Вверх #16
    Живёт на форуме Аватар для Vintyara
    Пол
    Мужской
    Адрес
    Odessa
    Сообщений
    3,180
    Репутация
    634
    Записей в дневнике
    4
    Цитата Сообщение от -=TigeR=- Посмотреть сообщение
    и разместить рядом два дива можно только абсолютным позиционированием...
    .
    нет, есть такая фигня как float
    Давай не будем обманывать друг друга! Ты (да, ты) все равно останешься им!

  17. Вверх #17
    Живёт на форуме Аватар для aleyer
    Пол
    Мужской
    Адрес
    Там же
    Возраст
    27
    Сообщений
    4,341
    Репутация
    943
    пока что оно у меня держится на таблицах, но в Konqueror и Safari таблица уползает в сторону... в остальных вроде нормально

  18. Вверх #18
    Живёт на форуме Аватар для Vintyara
    Пол
    Мужской
    Адрес
    Odessa
    Сообщений
    3,180
    Репутация
    634
    Записей в дневнике
    4
    дык если проблемы есть - чего не попробовать таки по нормальному переделать ?
    Давай не будем обманывать друг друга! Ты (да, ты) все равно останешься им!


Ответить в теме

Похожие темы

  1. <div> всегда стоит на месте
    от [email protected]@NTiN в разделе Программирование
    Ответов: 2
    Последнее сообщение: 19.02.2010, 23:45
  2. Помогите растянуть DIV на 100% по длине
    от oleg_ в разделе Программирование
    Ответов: 10
    Последнее сообщение: 13.01.2010, 14:04
  3. блоки div и table
    от Twins в разделе Программирование
    Ответов: 4
    Последнее сообщение: 09.01.2010, 22:15
  4. DIV или TAB?
    от Мечтающий Тушканчик в разделе Программирование
    Ответов: 2
    Последнее сообщение: 20.11.2005, 23:15

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения