brainiac

Дописал в стилях: #menu li { background-image: url(../img/r-b.png); background-position: bottom right; background-repeat: no-repeat; } Думал, может что-то перекрывает изображение… Поставил яркую 500х500 картинку — не видно её.

Добрый вечер, Гугу веб-дизайна! Вот, не знаю, как быть… В процессе создания меню для сайта столкнулся с траблом. Меню представляет собой список — <ul>. Для тега <a> прописано фоновое изображение (уголок, прибитый к левому нижнему углу). Нужен точно такой же уголок в правом нижнем. Пробовал использовать вложенный <div> — всё рушится. Подскажите, как сделать? #menu { background-color:#34618e; text-align:center; height:25px; margin-top:10px; margin-left: 50px; margin-right: 50px; padding-top: 20px; } #menu ul, #menu li { display:inline; margin:0; padding:0; } #menu a { padding:20px 25px 20px 25px; background-color:#507caa; background-image:url(../img/menu-l-b.png); background-position: bottom left; background-repeat: no-repeat; color: #f5f5f5; font-family: Helvetica, Arial, sans-serif; font-size: 20px; text-decoration:none; text-shadow: #000 1px 1px 2px; }

Для того, чтобы футер всегда был прилеплен к нижнему краю экрана, весь контент был дополнительно закинут в DIV c ID «wrap». В CSS-файле для этого DIV'a прописано следующее: #wrap { height: auto !important; min-height:100%; height: 100%; } После этих действий шрифт исказился (стал… жирнее что ли…). Вот: Если убрать в коммент #wrap, то шрифт восстанавливается, но соответственно футер наезжает на основной контент. Пожалуйста, подскажите, где копать? Я не очень хорошо знаю DIV'ную вёрстку. По инструкции всё сделал, но т.к. сайт «настоящий», 4 блоками тут не обойтись. Естественно, всё не так радужно, как на схемке: хедер, меню, контент, футер. Help me, please…

Уже во второй раз замечаю такую особенность: вставляют на сайт интерактивные Яндекс.Карты (http://api.yandex.ru/maps/) и шрифты на странице тут же становятся жирными. <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) --> <script src="http://api-maps.yandex.ru/1.1/?key=ACWYCkwBAAAAAjm-cQIA9BVr4c42irfQMwy-aTyVFtQ5VCQAAAAAAAAAAACri5-mzRv9GXNY9mlD4EIXL-79kw==&wizard=constructor" type="text/javascript"></script> <script type="text/javascript"> YMaps.jQuery(function () { var map = new YMaps.Map(YMaps.jQuery("#YMapsID-3541")[0]); map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.TypeControl()); function createObject (type, point, style, description) { var allowObjects = ["Placemark", "Polyline", "Polygon"], index = YMaps.jQuery.inArray( type, allowObjects), constructor = allowObjects[(index == -1) ? 0 : index]; description = description || ""; var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}); object.description = description; return object; } }); </script> <div id="YMapsID-3541" style="width:450px;height:350px"></div> <div style="width:450px;text-align:right;font-family:Arial"><a href="http://api.yandex.ru/maps/tools/constructor/" style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div> <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) --> Помогите разобраться, в чём проблема…

Есть такой блок: <div id="banner"> [место для баннера] <div style="clear:both;"></div> </div> С такими вот стилями: #banner { float:left; max-width:700px; min-width:400px; width:50% } Если вставить туда изображение и прописать для него только width=100%, то ширина блока растягивается. А как то же самое сделать для FLASH-баннера? Вот код: <object type="application/x-shockwave-flash" data="swf/banner.swf" width="100%" height="50%"> <param name="movie" value="images/header.swf" /> <param name="quality" value="high" /> <param name="menu" value="false" /> <param name="wmode" value="opaque"> <img src="images/top.jpg" alt="Без флеша" height="100%" width="50%" /> </object> При таком раскладе появляется пустое пространство сверху и снизу. Как его убрать? Пропорции FLASH — 7х4. Что прописать в WIDTH и HEIGHT, чтобы это работало правильно!? Выручите плз… дело горит просто.

Тема на удаление. Создана по ошибке. Sorry.

Поиск не работает, т.к. слово DIV видите ли слишком короткое…

Собственно, сабж. Подскажите пожалуйста, как выровнять содержимое блока DIV по центру (по вертикали)? Блок содержит только текст и ссылки. Это строка на самом деле.

Собственно, сейчас так и есть: 3 блока, а внутри каждого элементы. Вопрос в том, как для них (3х основных) прописать стили, чтобы 3 не прилипал к 1, а шёл сразу после второго. При условии, что у 1 высота фиксированная, у 2 и 3 — нет. Ширина у всех 100%.

Получить нужно вот, что: Ширина цветных блоков (про них речь) — 100% от окна браузера. Серые добавил для того, чтобы было понятно, что внутри них тоже много всего. При этом те внутренние блоки позиционируем относительно родительских.

И как же тогда быть? Убрал float из второго — эффекта нет. Если убираю position: absolute, то блоки, которые находятся внутри него растягиваются по вертикали на 100% страницы (а должны растягиваться на 100% блока). И при этом третий блок всё равно прилипает к первому.

Ну это б я догадался! А так, чтобы «красиво»…

Собственно, вся проблема описана в названии. Есть, допустим, 3 DIV'а. Для первого пишем так: width: 100%; height: 215px; position: relative; Для второго так: float: left; width: 100%; position: absolute; А в третьем, что бы я ни прописал, он прилипает к первому. Сейчас у него вообще никакого позиционирования не прописано. Скажите, как это исправить. Чтобы третий блок прилипал ко второму. При этом второй блок — резиновый.

Скажите, а как разместить 3 DIV'a по всей ширине страницы, при этом у всех них должна быть равная ширина? Можно, конечно, написать для каждого width: 33%. Но тогда останется 1%. Есть ли какой-то красивый способ?

Всем привет! Помогите пожалуйста поправить код так, чтобы он был не таким тупым (далее поймёте, почему). Нужно внутри блока #ban-about-news расположить 3 блока: #banner (занимает 50% страницы), #about (25% страницы) и #news (25% страницы). HTML-код страницы: <div id="ban-about-news"> <div id="banner"> <img src="swf/banner.png" width="100%" alt="БАННЕР"> </div> <div id="about"> <h1>ЗАГОЛОВОК БЛОКА ABOUT</h1> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> <p>Текст текст текст текст текст текст текст.</p> </div> <div id="news"> <h2>НОВОСТИ</h2> <p><div class="news-date">20.02.10</div></p> <p>Текст новости, текст новости, текст новости, текст новости, текст новости, текст новости, текст новости.</p> <p><div class="news-date">10.02.10</div></p> <p>Тест новости, текст новости, текст новости, текст новости, текст новости, текст новости.</p> </div> </div> CSS-код: #ban-about-news { border: #00F dashed; width: 100%; position: absolute; } #banner { width: 50%; max-width: 700px; min-width: 350px; float: left; } #about { position: absolute; top: 0; left: 50%; background-color: #f1f1f1; width: 25%; font-size: 90%; font-family: Arial, Helvetica, sans-serif; padding: 10px; } #about h1 { background-color: #ffffff; padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: #f7941e; } #news { position: absolute; top: 0; left: 77%; } #news h2 { background-color: #1255a6; color: #FFF; font-family: Arial, Helvetica, sans-serif; padding-left: 25px; } .news-date { color: #999; margin-bottom: -10px; } Кое-что из стилей выкинуто. Важно: чтобы блоки #about и #news занимали 100% высоты блока #ban-about-news. А высота последнего зависела от #about и #news. Я уже всю голову сломал. То одно наезжает, то другое выпирает… Вся надежда на этот форум.

sigma77, спасибо! Правда, в моём конкретном случае это работает совершенно не так, как должно… Код вверху очень упрощённый. Сейчас буду разбираться, что не так…

Имеется такой код: <ul class="main"> <li>Item 1</li> <ul class="sub"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <li>Item 2</li> <ul class="sub"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <li>Item 3</li> <ul class="sub"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </ul> В CSS прописано следующее: .main ul, #main li { display: inline; margin: 0; padding: 0; } Как сделать так, чтобы элементы списка с классом .main располагались по горизонтали, а .sub (внутри них) — как обычные списки — по строкам? Иллюстрация желаемого эффекта:

Эх… ну ладно. Наверное прийдётся резать всё-таки. Но фиксированные блоки тут не подойдут. Как, впрочем, и карта-изображение. Гибкость превыше всего.

Извините, не знал, как бы это нормально объяснить. Но мне не подходит, ни первое, ни второе. Есть большое изображение (700x50px). И есть штук 5 элементов списка (LI), расположенных по горизонтали. Нужно, чтобы фоном первого LI стало начало этой большой картинки, второго LI — продолжение, третьего LI — следующий кусок этого изображения и т.д. При этом резать его нельзя (нужно сделать максимально гибко, чтобы потом менять этот фон).

Сдалал меню на списках, разложил элементы по горизонтали. Теперь вот хочу сделать один общий фон для всех элементов li. То есть использовать одну большую по длине картинку. Подскажите, как это можно сделать. Что-то я туплю… #main-menu { position: absolute; bottom: 45px; right: 0px; } #main-menu ul { display: inline; margin: 0; padding: 0; } #main-menu li { display: inline; margin: 0; padding: 0; } #main-menu a { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #f1f1f1; background-image: url(../img/bg-menu-item.png); /* от этого можно отказаться в пользу общего фона*/ background-repeat: repeat-x; color: #555555; padding-left: 10px; padding-right: 50px; padding-top: 10px; padding-bottom: 20px; } #main-menu a:hover { background-color: #4594d8; background-image:url(../img/bg-menu-item-select.png); /* и от этого тоже */ background-repeat: repeat-x; color: #ffffff; }

Вот спасибо! По описанию — то, что надо. Сейчас буду пробовать.

В своём первом сообщении я написал «Есть ли что-то подобное». Я не имел ввиду реально использовать justify для картинок, я понимаю, что это свойство текста. Когда вы предлагаете код для 3х, 4х и т.д. картинок или для блоков с фиксированной шириной и заранее известным отступом между изображениями, это начинает противоречить принципу эластичной вёрстки. P.S. Там как бы будут сертификаты и лицензии компании. И я не хочу переписывать весть блок, если появится ещё какая-нибудь грамота. Размер (ширина) изображений тоже «ползёт» в зависимости от размеров окна.

Есть DIV. Внутри него несколько изображений. Нужно сделать так, чтобы эти изображения были равноудалены друг от друга. А при изменении размеров окна браузера это расстояние пропорционально менялось.

По-моему, мы отошли от темы. Как центрировать, я знаю. Мне то нужно Justify (по ширине DIV'a). Но всё равно спасибо!

По центру и справа можно, а justify работать отказывается… Плюс я подключаю файл CSS, там нельзя прописать align: center | right… .