Привет.
Делаю "резиновую" шапку для
форума. Изображение разбил на части, части распихал по ячейкам таблицы.
Код таблицы с изображениями (
overall_header.html):
Код: Выделить всё
<div id="page-header">
<!--Vstavil custom header iz neskolkih chastei-->
<table cellspacing="0" border="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<td style="width:10%">
<div class="headerbar-line">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
<td style="width:20%" class="pointerlink" onmouseover="title='Список форумов'" onclick="document.location='http://hondaforum.lv/forum/index.php'">
<div class="headerbar-HF">
<div class="inner">
<div style="height: 135px;">
<div id="site-description">
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
</div>
</div>
</div>
</div>
</td>
<td style="width:10%">
<div class="headerbar-line">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
<td style="width:20%" class="pointerlink" onmouseover="title='Перейти на HondaForum.lv'" onclick="document.location='http://hondaforum.lv'">
<div class="headerbar-slogan">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
<td style="width:10%">
<div class="headerbar-line">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
<td style="width:20%">
<div class="headerbar-car">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
<td style="width:10%">
<div class="headerbar-line">
<div class="inner">
<div style="height: 135px;">
</div>
</div>
</div>
</td>
</tbody>
</table>
Параметры изображения разместил в
common.css:
Код: Выделить всё
.headerbar-line { /*poloska pered logotipom HF*/
background: repeat-x 0 0;
/*color: #FFFFFF;*/
margin-bottom: 4px;
height: 145px;
background-position: left;
/*min-width: 5px;*/
}
.headerbar-HF { /*logotip HF*/
/* background: #ebebeb repeat-x none;*/
background-repeat: no-repeat;
background-position: center;
/*color: #FFFFFF;*/
margin-bottom: 4px;
/*padding: 0 5px;*/
height: 145px;
min-width: 261px;
/* z-index: 89;*/
}
.headerbar-line2 { /*poloska mezhdu logotipom HF i sloganom*/
background: repeat-x 0 0;
/*color: #FFFFFF;*/
margin-bottom: 4px;
height: 145px;
background-position: right;
/*min-width: 5px;*/
}
.headerbar-slogan { /*slogan*/
/* background: #ebebeb repeat-x none;*/
background-repeat: no-repeat;
background-position: center;
/*color: #FFFFFF;*/
margin-bottom: 4px;
/*padding: 0 5px;*/
height: 145px;
min-width: 419px;
/* z-index: 89;*/
}
.headerbar-line3 { /*poloska mezhdu sloganim i avto*/
background: repeat-x 0 0;
/*color: #FFFFFF;*/
margin-bottom: 4px;
height: 145px;
background-position: right;
/*min-width: 5px;*/
}
.headerbar-car { /*izobrazhenie avto*/
/* background: #ebebeb repeat-x none;*/
background-repeat: no-repeat;
background-position: center;
/*color: #FFFFFF;*/
margin-bottom: 4px;
/*padding: 0 5px;*/
height: 145px;
min-width: 287px;
/* z-index: 89;*/
}
.headerbar-line4 { /*poloska po-okonchanii shapki*/
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 145px;
}
Сами изображения - в
colours.css:
Код: Выделить всё
.headerbar-line {
background-image: url("{T_THEME_PATH}/images/headerbar-line.png");
}
.headerbar-HF {
background-image: url("{T_THEME_PATH}/images/headerbar-hf.png");
}
.headerbar-line2 {
background-image: url("{T_THEME_PATH}/images/headerbar-line.png");
}
.headerbar-slogan {
/*background-color: #12A3EB;*/
background-image: url("{T_THEME_PATH}/images/headerbar-slogan2.png");
}
.headerbar-line3 {
background-image: url("{T_THEME_PATH}/images/headerbar-line.png");
}
.headerbar-car {
background-image: url("{T_THEME_PATH}/images/headerbar-car.png");
}
.headerbar-line4 {
background-image: url("{T_THEME_PATH}/images/headerbar-line.png");
}
Однако при просмотре
форума на широкоэкранных мониторах, между частями шапки появляются белые полосы.
Заменив в
overall_heade.html процентные величины таблиц на числовые (т.е. указал ширину каждой части изображения), добился того, что шапка начала отображаться на широкоэкранном мониторе без белых "разрывов", но сместилась к левому краю.
В чём может быть загвоздка?
Быть может пробовать объединить все
в один, используя
?
Ссылка на форум:
HondaForum.lv
).
сам виноват,тогда так -
простите, в php разбираюсь, очень плохо, очень не разбираюсь.
