Andyk

Ваш пост не видел. При отправке формы не говорит, что есть новые ответы. Жду.

Да, я упустил важную деталь. Но сделал это потому, что даже представить не мог, что часть бордеров можно прицепить к рисунку, а вторую часть просто сместить. Касательно дивов уже сам не могу понять откуда у меня третий взялся. В два у самого все трамбуется. Я не гуру, но попробую поспорить. IE8, который входит в комплект семерки не назовешь старым. А moz-box-shadow он не понимает. Ну и до уровня чтобы читать msdn я еще не дорос так леплю темку для форума for fun. В общем спасибо за советы, значит так и остановлюсь на своих дивах.

Текст, конечно же предполагался. Убрал все, что бы код был проще в понимании. А дивами написал потому, что сам квадратик это один из дивов на странице. Мне почему-то казался возможным только вариант с: <div class="a1"> <div class="a2"> </div> </div> а стиль .а1 { border-top серый border-left серый border-right белый border-bottom белый } .a2 { border-top белый border-left белый border-right серый border-bottom серый } На бред немного смахивает, почему и решил спросить Да и второй ваш вариант swetlana не будет работать во всех браузерах Но сдвинуть рамку на два пикселя я бы ни за что не догадался PS а еще если игнорировать IE можно outline прицепить swetlana, если не сложно, сверстайте этот "квадратик" без рисунка. С условиями, что сам квадрат это обязательно div, не использовать абсолютное позиционирование и без новомодных свойств, чтобы старенькие браузеры тоже разобрались. Наиболее оптимально по вашему мнению.

Конечно сойдет. Вот только я ничего не понял. Ирония это или намек для опытного верстальщика. Для начинающего можете подсказать? зы если не совсем понятно в чем собственно вопрос, то вопрос в верстке бордеров квадратика

В три дива с бордерами? Это нормально или можно более изящно?

Беру свои слова назад. Ваш вариант полностью мне подходит, невнимательно посмотрел сразу. Спасибо.

Аналогично варианту с фоном на а1. В идеале хотел чтобы а2 заполнял всю пустоту и имел свои бордеры и отступы. Снова все переделал и вернулся к фону на а1. Гемор какой-то

Решил обернуть a3 в еще один div. Ширину ему указать в процентах оставшихся от a2 с фоном. Что делать с пустотой при разных разрешениях монитора хз.

Вариант. Только right: 0 для блока a3 не работает, прижимает к окну браузера, а нужно прижать к краю a1. Нет, не вариант. Лезут косяки в других браузерах. И такой же результат можно получить сделав

Я уже думал так сделать. Но, на фоне будет еще форма поиска + лого + описание. И по задумке этот блок должен быть оформлен (бордер, обводка, отступы) как и блок a3, а это уже не получится.

Вот

С помощью css этого не сделать? Или я что-то не так написал?

И снова здравствуйте. Нуждаюсь в вашей помощи. <div class="a1"> <div class="a2"></div> <div class="a3"></div> </div> .a1 { width: 100%; display: inline-block; } .a2 { background: url("{T_THEME_PATH}/images/logogo.jpg"); background-position: center; height: 300px; border: 1px solid #BFBFBF; display: inline-block; float: left; overflow: hidden; display: inline-block; } .a3 { overflow: hidden; float: right; height: 300px; background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg"); border: 1px solid #BFBFBF; display: inline-block; } В блоке a2 фоном изображение, которое может растягиваться на 100% ширины. В блоке a3 желательно указать фиксированную ширину в px. И собственно вопрос, как заставить блок a2 растягиваться, как заполнить им всю пустоту? Можно указать ширину в %, но учитывая разницу между монитором 1024*768 и 1920*1200 блок а3 выходит очень "сжатым" в первом варианте и "пустым" во втором.

А если сайт резиновый?

Я конечно не спец, но разве не будет легковеснее: 1) чертики сверху - картинка; 2) синий фон - background-color; 3) белое свечение png; ?

можно попробовать указать ему высоту

Как сверстать такой фон написали бы.

кхм зациклился на вставке картинки и все тут а решение под носом, спасибо

мде, стоило чуть внимательнее глянуть спасибо

К сожалению нет. Форум на движке phpbb, стандартная тема prosilver. Нужно поместить в шапку иллюстрацию (процентов 70-80 по ширине) и на том же уровне форму входа+личный раздел+новые сообщения на оставшуюся ширину. Поскольку ширина окна заранее не известна, изображение будет для максимального разрешения. А значит, оно должно центрироваться по горизонтали, высота в принципе, может быть указана и жестко. Выше двух блоков div, описание которых в первом сообщении темы есть еще три блока div ну и body. body с фоном body { background: url("./styles/prosilver/theme/images/patern.jpg") repeat scroll 0 0 transparent; font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 10px; padding: 0 0 20px; margin: 0; padding: 0; } Первый див на странице Градиент для фона div { background-image: url("./styles/prosilver/theme/images/wrap_grad.png"); background-repeat: repeat-x; min-height: 721px; padding: 2% 2% 0; margin: 0; padding: 0; } Второй див Выравнивает, "держит" форум div { border: 1px solid #909090; margin: 0 auto; max-width: 1650px; } Третий див Текстура для форума div { background-image: url("./styles/prosilver/theme/images/bg_tex.jpg"); border: 1px solid #FFFFFF; margin: 0 auto; max-width: 1650px; padding: 20px; } Дальше div2 в который пытаюсь поместить изображение и div3 для формы входа и личной панели. Возможно divов многовато, но я только учусь

В таком случае не работает overflow: hidden div1 может быть только display: block иначе ломается вся верстка страницы.

Не работает. Если убрать float: left div2 растягивается по все ширине и вытесняет div3 вниз. Смена display: inline-block на display: table-cell абсолютно ничего не меняет. Если все-таки float: left вернуть то все возвращается на свои места. Без изменений.

Отлично решение. А как сделать что бы по умолчанию скрытые елементы были видны ну и закрывались/открывались по клику.

Здравствуйте. Не могу найти решение, надеюсь, вы мне поможете. Есть div1 с шириной 100% В нем еще два div'а: .div2 { width: 80%; height: 60px; border: 1px solid blue; display: inline-block; float: left; overflow: hidden; } .div3 { float: right; width: 19%; height: 60px; display: inline-block; background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg"); border: 1px solid #BFBFBF; } В левый (div2) вставляем картинку и она прижимается к верхему и левому краям div'а. Можно кроссбраузерно выровнять данное изображение по вертикали и горизонтали без использования php и js?