severum

Нашел только 3 параметра: addthis:url, addthis:title, addthis:description есть что-то типа addthis:image? Он сам как-то находит изображения, но для последней новости в списке почему-то берет его из футера. Я хочу задать изображение явно.

в общем вроде пока что решил. внутрь контейнеров колонок сделал еще один контейнер с припиской '_container' . измеряю высоту этих контейнеров, а присваиваю верхним основным. Это позволило сделать событие на ресайз окна т.к. измеряются размеры одних а выравниваются другие И почему то решило проблему о которой я писал.

Вот вариант как неправильно: Вот вариант как правильно: Разница между ними может быть буквально в несколько пикселей ширины окна. ссылка на тест тест Я что то теряюсь в догадках. Может кто-нибудь у себя попробовать? Заранее большое спасибо

чтобы выравнивать колонки на div-ах использую примерно такой скрипт: var maxHeight = function() { var array = [ "content_center", "content_left", "content_right" ]; var max = 0; array.each(function(item) { var size = $(item).getSize(); max = Math.max(max, size.y); }); alert("max="+max); array.each(function(item) { $(item).setStyle('height', max); }); return max; } window.addEvent('load', function() { maxHeight.delay(100, maxHeight); maxHeight.delay(1000, maxHeight); }); Все работает при обновлении окна соответственно. Но заметил, что если окно развернуть или по горизонтали вытянуть во всю ширину то размер максимальной колонки почему то резко уменьшается (getSize возвращает меньше) на 3-4 строчки текста и колонка соответственно перестает помещаться. стоит чуть сузить и обновить и все снова отлично. проблема вроде вылезает в мозиле и эксплорере, в опере все хорошо. В чем может быть проблема?

Сделал часть шаблона наподобие http://www.artlebedev.ru/tools/technogrette/html/thumbnails/ элемент которому указано relative не заполняет собой верхний блок, как я понял. поэтому div class="text" и буковка s поставленная для теста считается самым нижним элементом страницы. А хочется чтобы выделенный блок влезал в колонку ps. Высота колонок в макете регулируется скриптом по максимальной высоте колонки. возможно это повлияло, но опять же это значит, что блоки relative не влияют на высоту колонки. Спасибо внезапно понял что в class=text надо дописать. display:inline-block; Но он не работает в IE7. думаю дальше хотя IETester выводит все нормально. Вопрос пока что снят. Спасибо

Понял, спасибо большое. Никак мозг под дивы не раскорячить.

Ну это я понял только туплю и не могу понять как сделать чтобы бакграунд был прижат к правому боку и еще немного правее сдвинут. ширина колонки может тянуться и мне надо чтобы картинка была справа всегда. Так он будет относительно левого края картинки считать: background-position: 100px top; Надо что то типа: background-position: right+100px top;

Второй вверху это первый вариант как сейчас. внизу это хочется еще один стиль для узких колонок чтобы картинка фона сдвинулась правее на 100px выводится соотвественно так <div class="header_bg" ><div class="header_news" ></div></div> Первый вопрос (Спасибо,все понял, решено) на тему уменьшения дублирования кода Как сделать что то типа: .header_absolute{ float:none; width:100%; height:38px; background-position: right top; background-repeat: no-repeat; } //так понятно нельзя это типа наследование ) .header_news (header_absolute){ background-image: url(../img/header_news.jpg); } .header_tyres (header_absolute){ background-image: url(../img/header_tyres.jpg); } ———-- Спасибо, пока набирал ответ не заметил ответ на первый вопрос.

1. css не наследуется, но стили можно складывать? Есть такие заголовки: <div class="header_bg" ><div class="header_news" ></div></div> <div class="header_bg" ><div class="header_tyres" ></div></div> <div class="header_bg" ><div class="header_disk" ></div></div> такие css: .header_bg{ float:none; width:100%; height:38px; margin: 0px; padding: 0px; background-color:#4a84c3; } .header_news{ float:none; width:100%; height:38px; background-position: right top; background-image: url(../img/header_news.jpg); background-repeat: no-repeat; } .header_tyres{ float:none; width:100%; height:38px; background-position: right top; background-image: url(../img/header_tyres.jpg); background-repeat: no-repeat; } .header_disk{ float:none; width:100%; height:38px; background-position: right top; background-image: url(../img/header_disk.jpg); background-repeat: no-repeat; } как их можно правильно красиво объединить чтобы не дублировались параметры? 2. в продолжении хочетя сделать еще стили для коротких заголовков. картинки (header_news.jpg) выглядит типа: (градиент из фона в надпись)-(надпись)-(картинка предмета) т.е. хочется както свинуть правее картинку чтобы (картинка предмета) размером например в 100px отрезалась. т.е. стиль должен быть что то типа background-position: right+100px top; и хочется указать значение не в процентах (background-position: 60% 0px;) чтобы картинка не ползала. а зафиксировать ее справа. Спасибо заранее.

Всем спасибо. Последний пример показывет действительно то что надо.

мм... тоже не совсем понял ) я хочу вариант2. но понимаю только как сделать первый. я не понимаю как дивами сделать чтобы слева был один фон, а справа другой. и чтобы поведение этой конструкции было таким же как и в варианте1. т.к. если делать колонки слева и справа процентами то они всегда будут отжирать часть экрана, а мне надо чтобы они скрывалисьза краями экрана. ps спасибо за участие.

вариант1 вариант2 черная рамочка с надписью это картинка положеная как фон на блок шапки (сверху всякий текст, меню и т.д.) синяя рамочка минимальный размер экрана. картинка при этом не помещается/режется. Прокрутка не появляется (min-width:900px;). стрелочки символизируют растягивание окна браузера в ширину. шапка остается в центре окна не меняя своих размеров. сначала появляются края картинки, а потом крайние колонки. в варианте1 на body положена зеленая картинка background-image: url(../img/bg.jpg); вертикальный столбик с background-repeat: repeat-x; в варианте 2 так не прокатит. я пока сделал вариант 1 и в качестве фоновой картинку у которой слева "красный" и справа "зеленый". тока чтобы это точно работало на любом мониторе она по горизонтали 2048 пикселей )

был вариант: фон: body { background-image: url(../img/bg.jpg); background-repeat: repeat-x; background-position: center top; } сам сайт: .container { min-width:900px; max-width:1600px; width:100%; } т.е. снизу был повторяющийся фон который сочитался с шапкой сайта и если окно становилось шире картинки в шапке то он ее продолжал в обе стороны. Теперь хочется сделать вариант когда слева и справа шапки должен быть разный повторяющийся фон. направо уходит бесконечный хвост от логотипа например. 3 колонки делаются по примерам так: .container_main { position: relative; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } .container_center { width:90%; margin: 0px 5% 0px 5%; } .container_left { position: absolute; top: 0px; left: 0px; width: 5%; margin: 0px; background-image: url(../img/bg_left.jpg); background-repeat: repeat-x; background-position: center top; } .container_right { position: absolute; top: 0px; right: 0px; width: 5%; margin: 0px; background-image: url(../img/bg_right.jpg); background-repeat: repeat-x; background-position: center top; } Но если окно уже ширины шапки то (container_left и container_right) колонки должны быть 0 в ширину, а container_center во всю ширину окна. Если ширина окна больше шапки то container_center должен быть равен ширине шапки а увеличиваться должны только (container_left и container_right) Это возможно? Спасибо