[Вопрос]

Идея в следующем у меня есть 3 изображения
Top:

Center:

Bottom:


Идея в следующем. надо, что бы верх и низ оставался постоянно определенного размера,
а центр повторялся в зависимости от количества контента.

Почитав инет, сделал в css несколько классов и там указал параметры.
Пример css

<style type="text/css">
.top 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfcc3f2c.png');
 background-repeat: no-repeat;
 min-height: 96px;
}

.centre 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfcd6c8e.png');
 background-repeat: repeat-y;
}

.bottom 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfce97c7.png');
 background-repeat: no-repeat;
 min-height: 117px;
}

body 
{
 background-color: black;
}
</style>

Страница

<div class="top">
</div>

<div class="centre">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div class="bottom">
</div>

Выводится все нормально и центральная область увеличивается и повторяется.
Но возникла проблема с отступами между div. Вот пример - Страница

Подскажите как убрать эти отступы. Или я что то не так делаю вобще?
Не бейте сильно ногами, я не очень силен в этой теме.

Заранее благодарю за внимание.

<style type="text/css">
.top 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfcc3f2c.png');
 background-repeat: no-repeat;
 min-height: 96px;
 background-position: bottom;
 margin-bottom: 0px;
 padding: 0 1px 10px 0;
 bottom: 0px;
}

.centre 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfcd6c8e.png');
 background-repeat: repeat-y;
 background-position: top;
 padding: 1px 1px 1px 1px;
 margin-top: 0px;
 margin-bottom: 0px;
 top: 0px;
 bottom: 0px;
}

.bottom 
{
 background-image: url('http://www.sohonet.com.ua/imagehosting/2009/10/03/14ac75cfce97c7.png');
 background-repeat: no-repeat;
 min-height: 117px;
 background-position: top;
 top: 0px;
}

body 
{
 background-color: black;
 margin: 0px;
 padding: 0px;
}
</style>

попробуй так =)
правда там пиксел в пиксел не попадает на краях =\

Originally Posted by kerk

попробуй так =)

Отлично...
Понял я причину. Падинг без значения берет значения по умолчанию из браузера только почему "0" не ведет себя как ноль 8). В результате...
Все получилось... теперь можно и картинки править.

Так ведь разные браузеры по разному это понимают, надож для каждого типа браузера свой код прописывать. где то у меня по этому поводу видео уроки валялись, если кому надо могу скинуть. (с этими вопросами в личку.)