У меня не вопрос,  а просьба добавить на "Официальный форум Алексея Моисеева" областные центры Украины:  (Даю список областей, часовой пояс у нас, один для всей страны)
* Винницкая область
    * Волынская область
    * Днепропетровская область
    * Донецкая область
    * Житомирская область
    * Закарпатская область
    * Запорожская область
    * Ивано-Франковская область

    * Киевская область
    * Кировоградская область
    * Луганская область
    * Львовская область
    * Николаевская область
    * Одесская область
    * Полтавская область
    * Ровненская область

    * Сумская область
    * Тернопольская область
    * Харьковская область
    * Херсонская область
    * Хмельницкая область
    * Черкасская область
    * Черниговская область
    * Черновицкая область

rps, чел последовал совету, но я не совсем понял зачем там таблица в шапке, если это простыми div'ами с позиционированием можно сделать. И главное - как эта таблица должна выглядеть? Или туплю или чего. 

- А что тут такого, люди из разных городов Украины регистрируются, а в списке городов, только 4 областных центра.

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

rps, понятно.
Тогда что, просто нужна таблица, как я понимаю в три столбца и одну строку, шириной 100% и высотой в шапку, или как?
Просто в том примере форума, что привел заказчик, такая билиберда творится в верху, что я так и не понял куда у него шапка вставлена и куда правый блок.

Кофеман
А можно увидеть адрес форума и сам заказ?

Кофеман
Раз хочешь учиться - пожалуйста.
1. Будем начинать с того, что уберём то, что нам мешает с форума. В частности, нам нужно начисто удалить логотип и те коды, что перемешают рекламный баннер.
Это из ХТМЛ-верх убрать:

	<style>
#pun-title .title-logo {background-repeat : no-repeat; height : 450px;}
</style>

и это:

<style> 
.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative;
  left: 900px;
  right: 700px;
  top: 20px;
}
</style>

И, естественно, всё то, что относилось к старому варианту.
Из стиля убираем: в первом окне удаляем размеры логотипа здесь

/* D1.4 */
#pun-title table {
background-image : none;
background-repeat : no-repeat;
background-position: top center;
border: none;
width: 900px;
height: 400px;}

и из второго окна в самом конце это

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: -1100px; top: 5px
}

2. Теперь, как я писал выше, сделаем таблицу из одной строки и двух ячеек. Этого будет достаточно для "каркаса". Учтём также, что в ХТМЛ-верх стоит скрипт для рандомной смены логотипа. Поэтому, для таблицы нужно задать идентификатор (id="logo_table"), его же пропишем и в скрипт. Таким образом, рандомный фон у нас окажется на таблице.
В левую ячейку я поместил тот блок, который будет всегда виден, в правую - тот, что останется на логотипе. В блоки я перекопировал содержимое из 7 поста этой темы, чтобы заполнить их.

3. Далее, я создал CSS: задал размеры таблицы, немного опустил её, чтобы она полностью закрыла старый логотип. После этого я указал желаемый размер для левой ячейки - 120 пикселов, всё остальное - для правой. В правой же я сделал выравнивание по правому краю: это позволит не тащить через весь форум правый блок, а сразу придвинуть его почти к нужному месту.
Затем я начал создавать CSS для самих блоков: левый я зафиксировал слева сверху, задал для него положение, перекопировал оформление для содержимого. Для правого блока я указал относительное положение и смещение от его начального положения на нужное количество пикселов вверх и вправо (собственно, ради этого я и затевал создание таблицы, конечно же, можно было просто воткнуть два блока и перетащить каждый в нужное место, но я более чем уверен, что в старых браузерах положение блоков окажется различным)

4. Осталось только поставить рекламу в нужное место, опять же через CSS.
Вот, что вышло: http://tps.bbmy.ru

<style type="text/css">
#logo_table {
	width: 100%;
	position: relative;
	z-index: 10;
	height: 450px;
	display: block;
	margin-bottom: -65px;
}

#left {
	position: fixed;
	z-index: 1000;
	width: 150px;
	left: 10px;
	top: 10px;
}

.nav a {
	display: block;
	color: #30200e !important;
	background-color: #fff;
	text-align: center;
	width: 120px;
	padding: 4px;
	margin: 1px;
	text-decoration: none;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.nav a:hover {
	background-color: #252524;
	color: #cbcbcb !important;
}

#right {
  width: 203px; 
  height: 330px; 
  font-size: 11px; 
  font-family: arial;
  position: relative;
  z-index: 1000;
  left: 80px;
  top: -50px;
  background-color: #fff;
  padding: 4px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
}

.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object {
  position: relative;
  z-index: 1000;
  left: 80px;
  top: -380px;
}
</style>
<table id="logo_table">
	<tbody>
	<tr>
<td style="width: 150px;">
<div id="left">
	<div class="nav">
<a href="http://itstwilight.rolka.su/viewtopic.php?id=245#p12325">
Свободные роли</a>
<a href="http://itstwilight.rolka.su/viewtopic.php?id=4#p4">Правила</a>
<a href="http://itstwilight.rolka.su/viewtopic.php?id=3#p3">Список 
ролей</a>
<a href="http://itstwilight.rolka.su/viewforum.php?id=4">Акции</a>
<a href="http://itstwilight.rolka.su/viewtopic.php?id=217#p9937">
Квест</a>
<a href="http://itstwilight.rolka.su/viewtopic.php?id=246#p12324">
Новости для гостей</a>
<a href="http://itstwilight.rolka.su/viewtopic.php?id=127#p1032">
Связь с участниками</a> </div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<a href="http://itstwilight.rolka.su/profile.php?id=80">
	<img src="http://www.imageup.ru/img16/kajj699381.png" title="Best player: Caius Volturi" /></a><br />
	<br />
	<img src="http://www.imageup.ru/img139/citata695411.png" title=" - Вот он, тот момент, когда я более-менее расслабился и начал улыбаться как придурок.(с) Paul Hartley " /><br />
</div>
</td>
<td align="right">
<div id="right">
	<img src="http://www.hostfotos.ru/images/ucu.gif" title="События" /> <br />
	<b>немного новостей, дорогие игроки и гости ролёвки:</b> <br />
	<br />
	<span style="color: red;"><b>17.07.2011. Народ, проверьсе все свои ЛС, там сообщение, 
	которое не высвечивается в меню!</b> </span><br />
	<br />
	<b>17.07.2011.</b> Очередь постов обновлена. Те, рядом с которыми куча "!!!" 
	скоро могут потерять роль, т к такая задержка никуда не годится! Поиск потерявшихся 
	игроков сегодня начнется в срочном порядке. </div>
</td>
	</tr>
</tbody>
</table>
<script type="text/javascript"> 
var phr = new Array();
phr.push("http://www.10pix.ru/img1/1951/4803340.png");
phr.push("http://www.10pix.ru/img1/418495/4803452.jpg");
phr.push("http://www.10pix.ru/img1/1226/4803834.jpg");
phr.push("http://www.10pix.ru/img1/2258/4803835.jpg");
document.write('<style>#logo_table {background: url('+phr[Math.round(Math.random()*(phr.length-1))]+') no-repeat top left;}</style>');
</script>

Отредактировано rps (Пн, 18 Июл 2011 21:32:46)