brainiac

November 14, 2010

Один угол вешаешь на LI, другой на А

Дописал в стилях:

#menu li {
	background-image: url(../img/r-b.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

Думал, может что-то перекрывает изображение… Поставил яркую 500х500 картинку — не видно её.

November 14, 2010

Добрый вечер, Гугу веб-дизайна!

Вот, не знаю, как быть… В процессе создания меню для сайта столкнулся с траблом.

Меню представляет собой список — <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;
}

June 24, 2010

Для того, чтобы футер всегда был прилеплен к нижнему краю экрана, весь контент был дополнительно закинут в DIV c ID «wrap». В CSS-файле для этого DIV'a прописано следующее:

#wrap { 
	height: auto !important;
	min-height:100%;
	height: 100%;
}

После этих действий шрифт исказился (стал… жирнее что ли…). Вот:

Если убрать в коммент #wrap, то шрифт восстанавливается, но соответственно футер наезжает на основной контент.

Пожалуйста, подскажите, где копать? Я не очень хорошо знаю DIV'ную вёрстку. По инструкции всё сделал, но т.к. сайт «настоящий», 4 блоками тут не обойтись. Естественно, всё не так радужно, как на схемке: хедер, меню, контент, футер.

Help me, please…

June 6, 2010

Уже во второй раз замечаю такую особенность: вставляют на сайт интерактивные Яндекс.Карты (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>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

Помогите разобраться, в чём проблема…

June 3, 2010

Есть такой блок:

<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, чтобы это работало правильно!?

Выручите плз… дело горит просто.

June 3, 2010

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

June 3, 2010

Смотри поиск, такие темы уже поднимались 1000 раз

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

June 3, 2010

Собственно, сабж.

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

Блок содержит только текст и ссылки. Это строка на самом деле.

May 4, 2010

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

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

May 4, 2010

Получить нужно вот, что:

Ширина цветных блоков (про них речь) — 100% от окна браузера.

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

May 4, 2010

Потому что надо думать что пишешь и для чего нужно то или иное свойство.
Нельзя совмещать абсолютное позиционирование и обтекание. Эти свойства противоречат друг другу.
Да и в необходимости наличия position: relative; у первого я сильно сомневаюсь.

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

May 3, 2010

Написать для одного div'a ширину 34%

Ну это б я догадался!

А так, чтобы «красиво»…

May 3, 2010

Собственно, вся проблема описана в названии.

Есть, допустим, 3 DIV'а. Для первого пишем так:

	width: 100%;
	height: 215px;
	position: relative;

Для второго так:

	float: left;
	width: 100%;
	position: absolute;

А в третьем, что бы я ни прописал, он прилипает к первому. Сейчас у него вообще никакого позиционирования не прописано. Скажите, как это исправить. Чтобы третий блок прилипал ко второму. При этом второй блок — резиновый.

May 3, 2010

Скажите, а как разместить 3 DIV'a по всей ширине страницы, при этом у всех них должна быть равная ширина?

Можно, конечно, написать для каждого width: 33%. Но тогда останется 1%. Есть ли какой-то красивый способ?

May 3, 2010

Всем привет! Помогите пожалуйста поправить код так, чтобы он был не таким тупым (далее поймёте, почему).

Нужно внутри блока #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.

Я уже всю голову сломал. То одно наезжает, то другое выпирает… Вся надежда на этот форум.

April 28, 2010

sigma77, спасибо!

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

Сейчас буду разбираться, что не так…

April 28, 2010

Имеется такой код:

<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 (внутри них) — как обычные списки — по строкам? Иллюстрация желаемого эффекта:

April 28, 2010

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

April 28, 2010

Эх научиться бы вам нормально изъясняться...
Исходя из того что вы написали вариантов 2:
1) задать background-image: в #main-menu ul тогда картинка будет 1 под кнопками.
2) задать background-image: в #main-menu ul li тогда картинка будет дублироваться у каждой кнопки.

Извините, не знал, как бы это нормально объяснить.

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

April 28, 2010

Сдалал меню на списках, разложил элементы по горизонтали. Теперь вот хочу сделать один общий фон для всех элементов 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;
}

April 26, 2010

Выше уже привели ссылку на решение задачи http://forum.htmlbook.ru/index.php?showtopic=10823

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

April 26, 2010

В своём первом сообщении я написал «Есть ли что-то подобное». Я не имел ввиду реально использовать justify для картинок, я понимаю, что это свойство текста.

Когда вы предлагаете код для 3х, 4х и т.д. картинок или для блоков с фиксированной шириной и заранее известным отступом между изображениями, это начинает противоречить принципу эластичной вёрстки.

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

April 26, 2010

Не очень понимаю тогда, что же вы хотите в итоге получить?
Есть изображение и его надо выровнять по середине? Или растянуть на весь див? Одно изображение? или там в купе еще что идет?
Скидывайте код с подробным описанием

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

April 25, 2010

А если в css, то попробуйте так
.class {
	text-align: center;
}

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

Но всё равно спасибо!

April 25, 2010

Тогда так:

<div align="center | left | right | justify">...</div>

По центру и справа можно, а justify работать отказывается…

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

Sign In

brainiac

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by brainiac

Две фоновых картинки

Две фоновых картинки

Перекос шрифтов из-за дополнительного DIV'a

Яндекс.Карты портят шрифты на сайте

Вставка FLASH внутри DIV

Вставка FLASH внутри DIV

Выровнять содержимое блока DIV по центру

Выровнять содержимое блока DIV по центру

Вериткальное расположение DIV'ов: один под другим

Вериткальное расположение DIV'ов: один под другим

Вериткальное расположение DIV'ов: один под другим

3 равных по ширине блока

Вериткальное расположение DIV'ов: один под другим

3 равных по ширине блока

3 резиновых колонки на DIV

Проблема со вложенными списками

Проблема со вложенными списками

Общий фон для нескольких элементов

Общий фон для нескольких элементов

Общий фон для нескольких элементов

Justify для любых элементов…

Justify для любых элементов…

Justify для любых элементов…

Justify для любых элементов…

Justify для любых элементов…

Forums

Important Information