- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Маркетинг для шоколадной фабрики. На 34% выше средний чек
Через устранение узких мест
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
На таблицах легко решается, а надо блочно...
Есть блок контента из двух колонок. Ширина их фиксирована, но расстояние между ними плавает при увеличении окна. Оно высчитывается исходя из того, что каждая из колонок находится по середине одной половинки блока контента (см. код).
HTML
CSS
.content {
float:left;
border:1px solid #960;
overflow:hidden;
}
.content .left1 {
float:left;
width:50%;
background:#CCC;
}
.content .left1 div {
margin:2px auto;
width:300px;
border:#F00 1px solid;
}
.content .right1 {
float:left;
width:50%;
background:#CCC;
}
.content .right1 div{
margin:2px auto;
width:300px;
border:#F00 1px solid;
}
В этом примере была попытка сделать все float'ами, но не получилось - не встают колонки по серединкам.
Я также пытался сделать у блоков .content .right1 и .content .left1 позиционирование абсолютным с шириной в 50% от родителя, а у их внутренних блоков margin:0 auto. В этом случае возникала проблема, что при наполнении содержимым внутренние блоки вылезали поверх блока .content. Свойство overflow:hidden; не помогает.
Итак, есть ли решение (без применения таблицы) у этой загвоздки?
"мыши плакали, кололись, но продолжали жрать кактус"
Вам палец отрежут, если вы таблицу используете? Что значит нельзя, когда можно? Я лично не понимаю такого. Разобью голову о монитор, но сделаю не на таблицах, потому что я чересчур модный, а "модный" и "таблица" признаны антонимами после того как какой-то умник решил, что DIV'ы - "top shit".
Задачу подобную решал ради интереса в одном из своих проектов, когда мне было еще не в лом верстать самостоятельно (сейчас предпочитаю заплатить - не люблю я верстать :) ).
То есть, я могу констатировать, что решение есть. Завтра если найду где-нить верстку, - скину, но заранее предупрежду - лучше не надеяться - было это дано, проект забросили заказчики, svn тогда еще мной не использовался, так что голактико против нас :)
.left div, .right div { width:300px; margin:0 auto;}
.left, .right { width:50%; float:left;}
<div class="content">
<div class="left">
<div>1</div>
</div>
<div class="right">
<div>2</div>
</div>
</div>
.left div, .right div { width:300px; margin:0 auto;}
.left, .right { width:50%; float:left;}
<div class="content">
<div class="left">
<div>1</div>
</div>
<div class="right">
<div>2</div>
</div>
</div>
Помогло! Мастер, а что если мне нужно этот самый контент поместить слева от меню? Нужно будет сделать еще один внешний блок с float:left ? В блоке .content он как будто бы мне мешался...
Svetle4ok добавил 23.09.2010 в 11:41
"мыши плакали, кололись, но продолжали жрать кактус"
Вам палец отрежут, если вы таблицу используете? Что значит нельзя, когда можно? Я лично не понимаю такого. Разобью голову о монитор, но сделаю не на таблицах, потому что я чересчур модный, а "модный" и "таблица" признаны антонимами после того как какой-то умник решил, что DIV'ы - "top shit".
Задачу подобную решал ради интереса в одном из своих проектов, когда мне было еще не в лом верстать самостоятельно (сейчас предпочитаю заплатить - не люблю я верстать :) ).
То есть, я могу констатировать, что решение есть. Завтра если найду где-нить верстку, - скину, но заранее предупрежду - лучше не надеяться - было это дано, проект забросили заказчики, svn тогда еще мной не использовался, так что голактико против нас :)
Разобью голову о монитор, чтобы однажды легко сделать верстку за Вас. Если найдется то решение, буду рад его увидеть. Потому что я прогнозирую другие трудности, например, оба блока имеют фон, который тянется до низа внешнего блока независимо от содержимого.
Что значит нельзя, когда можно?
Нельзя верстать таблицами нетабличные данные.
Да и вообще, верстает ли кто-нибудь сейчас таблицами?
Нельзя верстать таблицами нетабличные данные.
Да и вообще, верстает ли кто-нибудь сейчас таблицами?
дайте определение "табличные данные" и может быть я соглашусь. Для меня табличные данные это те данные, которые представлены в таблице.
Что значит верстают ли таблицами? Таблица - средство. Блок - тоже средство. Вот и верстайте при помощи всех доступных средств.
Таблицы используют - да (правда у меня примеры таких... полу-известных сайтиков: google.com, craigslist.com, facebook.com). Если мне что-то удобнее сделать при помощи таблицы, я это сделаю при помощи таблицы. Если мне удобно воспользоваться блоком (DIV), я сделаю это блоком. В частности все формы я верстаю только таблицами, а вот основной layout обычно блоками.
Просто интересно слышать что-то вроде "таблицей сделаю за 5 секунд, а блоками не могу уже неделю"... Вот и интересно как человек такой мыслит :)
Я мыслю так. Существует блочная верстка, которая очень модна в заказах (а также валидность, кросс-браузерность и все в куче...). Надо б мне знать, как это все делается, чтобы иметь вес на рынке айти разработок. И немного погодя сталкиваешься с такой задачкой и неделю помучавшись, становится интересно, а вообще как мастера ее решают. Ведь они обещают блочную верстку.
http://cssing.org.ua/2007/02/25/equal-height-columns/
http://cssing.org.ua/2005/11/24/css-simple-two-columns/
Как в постах так и в комментариях можно найти не мало полезного...
wano-moroz добавил 23.09.2010 в 15:35
Таблица - средство. Блок - тоже средство
Скажите? а вы в РНР собак используете ?
Ну типа $page = ctype_digit(@$_GET['page']) ? $_GET['page'] : "0";
Просто гвозди микроскопом тоже забиваются на ура, в зависимости от привычки может даже кому-то и удобнее чем молотком, но разве стоит приучать к этому всех ?
Вам лично так удобно, ваше дело, ваше право, только не навязывайте другим...
При чем тут собаки в PHP? Ну ладно - отвечу, - мне не сложно:
Нет. Я не использую собак в PHP.
Часть про гвозди и микроскоп не понял к чему это было вообще.
И ничего не навязываю.
Ну вот нормальный ответ на мой вопрос. Вам нужно углубляться в стандарты w3c. Открываете http://www.w3.org/TR/html401/ и читаете + практика. По-другому, немного научившись решать стандартные задачки, профессионалом не стать. Потом, правда, прийдется научиться писать и хуки под некоторые браузеры :) Обычно всё хорошо начинает работать сразу в FireFox, Chrome, Safari, а потом во всех остальных допиливается обычно... В IE, например, есть такой интересный баг когда он "считает", что height: 25px; на самом деле 50... я много времени убил на то, чтобы понять как избавляться от этого, потому что 25 на 2 не делится, к сожалению :)
дайте определение "табличные данные" и может быть я соглашусь. Для меня табличные данные это те данные, которые представлены в таблице.
вы и сами дали определение. Таблица есть таблица, а сетка сайта - в основном набор взаимосвязанных и не очень блоков.
Я раньше тоже верстал таблицами, теперь понять не могу, чем они меня так привлекали)
Зная 5-10 стандартных методов-костылей для решения нетривиальных задач, верстка дивами занимает не больше времени, чем верстка таблицами.
нужно весь диз смотреть