Реализация красивого блока

[yyyurik]

Столкунулся с проблемой которую не представляю как решить, день потратил а толку никакого, последняя надежда на форум.. Ситуация такая требуется вставить блок с помощью css

.nizblock1 
 {background:url(../images/top.td1.gif) no-repeat left;
  font-weight:bold;text-align:right;   padding-bottom:150px;
 }

В итоге получается вот такой вот блок и вот здесь начинается загвоздка, при различных разрешениях блок смещается... каким образом можно сделать, чтобы width при увеличении или при изменении разрешения экрана всегда был 100%?? у меня вообще не получилось...

Дальше я попробывал данную картинку разделить на 3 части (левая, центральная, правая) чтобы выводилась левая затем центральная полностью заделывала весь центр и правая, только у меня с этим вообще ничего не получилось, отображалась только одна часть, которая прописывалась последняя - данный вопрос меня вообще давно терзает как в css можно реализовать данную функцию... БУДУ ОЧЕНЬ БЛАГОДАРЕН ЗА ПОМОЩЬ!!!

[nvgudz]

Если честно, ничего не понятно из вышеизложенного. А какой при этом html-код? И что за 3 блока внутри этого блока?

Опиши подробнее.

[yyyurik]

Вот html код

<table border="0" width="100%" height="78">
	<!-- MSTableType="nolayout" -->
	<tr>
		<td rowspan="2">
		<a class="blockmenu" href="index.php?dn=news">Новости</a>
		<a class="blockmenu" href="auto/index.php">Купить авто</a>
		<a class="blockmenu" href="auto/autor/enter.php">Продать авто</a>
		<a class="blockmenu" href="index.php?dn=article">Статьи</a>
		<a class="blockmenu" href="index.php?dn=link">Каталог ссылок</a>
		<a class="blockmenu" href="forum/index.php">Форум</a></td>
		<td height="29" width="33%"> <div class="verhblock1">
		<font color="#FFFFFF">Новости</font></td>
		<td height="29" width="33%"> <div class="verhblock2"><font color="#FFFFFF">Статьи</font></td>
		<td height="29" width="33%"> <div class="verhblock3">
			<font color="#FFFFFF">Продажа/покупка автомобиля</font></td>
		<tr>
		<td width="33%" class="nizblock1">
		</td>
		<td width="33%">
		<img border="0" src="images/top.tp2.gif" width="100%" height="151"></td>
		<td width="33%">
		<img border="0" src="temp/default/images/top.tp3.jpg" width="100%" height="151"></td>
		</tr>
		</table>

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

[nvgudz]

, ясно. Эх, тут столько недочетов, лишнего и непродуманного - вывод учиться и еще раз учиться.

1) Если таблица не "обнулена" в стилях, ее лучше писать так:

а) Если все элементы таблицы в td выровнены по верхнему краю, то в цсс

table.main td{

vertical-align: top;

},

а в хтмл

2) ... уже давно не пишут в хтмл, все через стили

3)

- при разном заполненинии контентом таблицы может верстку "повести", лучше его избегать

4)

Все это набросок, а так, учиться и, еще раз, учиться.

[yyyurik]

Спасибо, за детальный ответ сейчас буду разбираться, что к чему, я только начинаю разбираться что к чему, поэтому вот так вот получается, учение и еще раз учение... Спасибо еще раз, буду разбираться

[yyyurik]

Ну В общем прикрутил БОЛЬШОЕ СПАСИБО, но внес некоторые изменения, незнаю точно или нет, но так как описано выше, не очень хотело работать.

В хтмл коде

<table cellpadding="0" cellspacing="0" width="100%" border="0" class="main">

В css

table.main td{
vertical-align: top; padding:1px;
}

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

[Vlad]

Ой, сказал себе, когда увидел код. Откуда ж такое старье выкопал. FONT убрать, устарел. Стиль class="blockmenu" перенести в TD, в стилях написать TD.blockmenu A {...}