[iseeuse]

Привет,

решил сделать красивое оформление на сайте, но столкнуля с проблемой с блоками, подскажите пожалуйста - а то знаний не хватает.

Вот как это выглядит реализованным - РИС 1.

А вот как это было реализовано в коде -


Тело HTML
-----------

<!-- поиск-начало -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="100%" height="100" class="search-block">

<p>Поиск</p>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="25">
<form method="post" action=''>
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120"><input name="story" type="text" style="width: 120px; height: 24px; font-family: tahoma, verdana, arial, helvetica, sans-serif; size: 12px; vertical-align: middle; text-align:left; padding-left:5px; padding-right:5px;" /></td>
<td width="10"><img src="ws.gif" width="10" height="1"></td>
<td width="50"><input type="submit" name="button" id="button" value="поиск" style="width: 50px; height: 24px; font-family: tahoma, verdana, arial, helvetica, sans-serif; size: 12px; "></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

</td>
</tr>

<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td width="100%" height="1"><img src="ws.gif" width="200" height="1"></td>
</tr>
</table>
<!-- поиск-конец -->

<!-- магазин-начало -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="100%" height="130" class="magazine-block">

<p>Магазин</p>
<a href="#">Сезонные товары</a>
<br>
<a href="#">Каталог детских</a>
<br>
<a href="#">Средства для детских</a>

</td>
</tr>

<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td width="100%" height="1"><img src="ws.gif" width="200" height="1"></td>
</tr>
</table>
<!-- магазин-конец -->

-----------

CSS стиль
----------

.search-block
{
border: 1px solid rgb(243, 243, 204);
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
background-color: #ffffe8;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}

.search-block p
{
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 18px;
color: #000000;
text-align: left;
}

.search-text
{
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 12px;
}

.search-text a
{
color: #2083a7;
text-decoration: underline;
}

.search-text a:hover
{
color: #7d2b27;
text-decoration: underline;
}

.magazine-block
{
border: 1px solid rgb(220, 238, 244);
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
background-color: #e6f9ff;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}

.magazine-block p
{
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 18px;
color: #1b5891;
text-align: left;
}

.magazine-block a
{
font-size: 12px;
margin-bottom: 20px;
color: #1b5891;
text-decoration: underline;
}

.magazine-block a:hover
{
font-size: 12px;
margin-bottom: 20px;
color: #000000;
text-decoration: underline;
}

----------

Но как видно из приложенной КАРТИНКИ 1 - ссылки не разграничиваются между собо padding или marging да и блоки сьезжают иногда.

Подскажите как правильно делать такие вещи или дайте ссылку на статью - заранее благодарен

[synyster]

тупо! столько кода, а в реале смотрится никак

[llipek]

хм.. а [spoiler] кто-то отменил чтоль?

[kost]

Сообщение от llipek

хм.. а [spoiler] кто-то отменил чтоль?

Не работает.

iseeuse, вы бы лучше дали ссылку на страницу сверстанную страницу.