Скрипты и коды для юкоз

Страница 1 из 1
1

Скрипты и коды для юкоз - Форум аццкого кодера » CSS. Каскадные таблицы стилей » Блок Сайта

Блок Сайта

[1] RicHMonD [01.07.2010, 17:58]

Всем привет!
Я не очень разбираюсь в блочной верстке и css поэтому попросил помощи! Мне из этого кода

Code

<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td class='b-top-left'><img src='style/images/blank.gif' width='7' height='27' alt='' style='display:block'></td>
<td class='b-top-main'><center>Навигация по сайту</center></td>
<td class='b-top-right'><img src='style/images/blank.gif' width='9' height='27' alt='' style='display:block'></td>
</tr>
</table>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td class='b-left'><img src='style/images/blank.gif' width='7' height='1' alt='' style='display:block'></td>
<td class='sbody'>
$SMENU_1$
<hr>
$SMENU_2$
</td>
<td class='b-right'><img src='style/images/blank.gif' width='7' height='1' alt='' style='display:block'></td>
</tr>
<tr>
<td class='b-bottom-left'><img src='style/images/blank.gif' width='7' height='10' alt='' style='display:block'></td>
<td class='b-bottom-main'><img src='style/images/blank.gif' width='1' height='10' alt='' style='display:block'></td>
<td class='b-bottom-right'><img src='style/images/blank.gif' width='9' height='10' alt='' style='display:block'></td>
</tr>
</table>


.b-top-left {
  width:29px;height:34px;
  background-image:url(style/images/b-top-left.gif);
}

.b-top-main {
  font-family:Verdana,Tahoma,Arial,Sans-Serif;
  font-size:11px;font-weight:bold;
  color:#fff;
  height:34px;
  padding: 2px 1px 1px 1px;
  background-image:url(style/images/b-top.gif);background-repeat:repeat-x;
}

.b-top-right {
  width:29px;height:34px;
  background-image:url(style/images/b-top-right.gif);
}

.b-left {
  width:29px;
  background-image:url(style/images/b-left.gif);background-repeat:repeat-y;
}

.b-right {
  width:29px;
  background-image:url(style/images/b-right.gif);background-repeat:repeat-y;
}

.b-bottom-left {
  width:29px;height:23px;
  background-image:url(style/images/b-bottom-left.gif);
}

.b-bottom-main {
  height:7px;
  background-image:url(style/images/b-bottom.gif);background-repeat:repeat-x;
}

.b-bottom-right {
  width:29px;height:23px;
  background-image:url(style/images/b-bottom-right.gif);
}

сделали этот

Code

<div class="block">
<div style="overflow:hidden">
  <div class="b-top-right"></div><div class="b-top-left"></div>
  <div class="block_title b-top-main"></div>
</div>
  <div class="block_content">
   $SMENU_1$
   <hr/>
   $SMENU_2$
  </div>
<div style="overflow:hidden">
<div class="b-bottom-right"></div><div class="b-bottom-left"></div><div class="b-bottom-main"></div>
</div>
</div>

<style>
.b-top-left,.b-top-main,.b-bottom-main,.b-bottom-left{float:left}
.b-top-right,.b-bottom-right{float:right}
</style>

Но тут ещё надо настроить стили (css). Пожалуйста помогите в настройке стилей!

[2] likbezz [02.07.2010, 01:15]

RicHMonD,

Quote (RicHMonD)

Я не очень разбираюсь в блочной верстке и css поэтому попросил помощи! Мне из этого кода......
Но тут ещё надо настроить стили (css). Пожалуйста помогите в настройке стилей!

... И чего....
Ни картинки ка должно быть ... ни как было ... ヅ

По идее ... только «по идее» - так как нет ни сайта, ни картинки ... должно быть, наверное, вот так:

Quote (CSS)

Quote (HTML)

<div class="block">
<divstyle="overflow:hidden">
<div class="b-top-right"></div>
<div class="b-top-left"></div>
<div class="block_title b-top-main"></div>
</div>
<div class="block_content"> $SMENU_1$
<hr/>
$SMENU_2$ </div>
<div style="overflow:hidden">
<div class="b-bottom-right"></div>
<div class="b-bottom-left"></div>
<div class="b-bottom-main"></div>
</div>
</div>

Только я вот не понял, нахрена здесь «div class="block"»«div style="overflow:hidden"» - скрывают блок .... Может это не нужно ... ヅ

Сложно тыкать пальцем в небо ... ヅ

P.S. Стили пишутся до объявления блока. То есть сверху .... ヅ

Flesh

[3] RicHMonD [02.07.2010, 10:51]

Извените не подумал)))

Code

<?if($SMENU_1$ || $SMENU_2$)?>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td class='b-top-left'><img src='http://fbrothers.clan.su/i/blank.gif' width='7' height='27' alt='' style='display:block'></td>
<td class='b-top-main'><center>Навигация по сайту</center></td>
<td class='b-top-right'><img src='http://fbrothers.clan.su/i/blank.gif' width='9' height='27' alt='' style='display:block'></td>
</tr>
</table>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td class='b-left'><img src='http://fbrothers.clan.su/i/blank.gif' width='7' height='1' alt='' style='display:block'></td>
<td class='sbody'>
$SMENU_1$
<hr>
$SMENU_2$
</td>
<td class='b-right'><img src='http://fbrothers.clan.su/i/blank.gif' width='7' height='1' alt='' style='display:block'></td>
</tr>
<tr>
<td class='b-bottom-left'><img src='http://fbrothers.clan.su/i/blank.gif' width='7' height='10' alt='' style='display:block'></td>
<td class='b-bottom-main'><img src='http://fbrothers.clan.su/i/blank.gif' width='1' height='10' alt='' style='display:block'></td>
<td class='b-bottom-right'><img src='http://fbrothers.clan.su/i/blank.gif' width='9' height='10' alt='' style='display:block'></td>
</tr>
</table>
<?endif?>


<style type="text/css">
.sbody {
  font-size:10px;
  color:#000;background-color:#F9EAC3;
  padding:3px 4px 3px 4px;
}

.body {
  font-size:11px;
  color:#000;background-color:#F9EAC3;
  padding:3px 4px 3px 4px;
}

.b-top-main {
  font-family:Verdana,Tahoma,Arial,Sans-Serif;
  font-size:11px;font-weight:bold;
  color:#fff;
  height:34px;
  padding: 2px 1px 1px 1px;
  background-image:url(http://fbrothers.clan.su/i/b-top.gif);background-repeat:repeat-x;
}

.b-top-left {
  width:29px;height:34px;
  background-image:url(http://fbrothers.clan.su/i/b-top-left.gif);
}

.b-top-right {
  width:29px;height:34px;
  background-image:url(http://fbrothers.clan.su/i/b-top-right.gif);
}

.b-left {
  width:29px;
  background-image:url(http://fbrothers.clan.su/i/b-left.gif);background-repeat:repeat-y;
}

.b-right {
  width:29px;
  background-image:url(http://fbrothers.clan.su/i/b-right.gif);background-repeat:repeat-y;
}

.b-bottom-main {
  height:7px;
  background-image:url(http://fbrothers.clan.su/i/b-bottom.gif);background-repeat:repeat-x;
}

.b-bottom-left {
  width:29px;height:23px;
  background-image:url(http://fbrothers.clan.su/i/b-bottom-left.gif);
}

.b-bottom-right {
  width:29px;height:23px;
  background-image:url(http://fbrothers.clan.su/i/b-bottom-right.gif);
}
</style>

[4] likbezz [02.07.2010, 12:22]

RicHMonD,
Оставь таблицу - как и было - либо сделай так, как и остальные блоки у тебя на сайте - то есть сверху, в ячейке картинка фоном и снизу картинка, а контент - заливка.
И нефиг мудрить.
Тем более с плавающими блоками в фиксированном меню - это маразм.
Быстрее, проще, и грамотнее сделать либо табличкой - если не знаешь как, либо тремя дивами, как я и написал:

Code

<div class="blok">
<div class="bottom_bg">
<div class="top_bg"><strong>Title</strong></div>
<div class="blok_content">Здесь располагается содержимое class "blok_content"</div>
</div>
</div>

Но для этого нужно объединить картинки (в фотошопе, например) и сделать спрайт. ... Можно, конечно, если уж очень лень, и тремя картинками .... ヅ
Фоном для блока, верхом и низом ..... ヅ

А тот код, что тебе «из-этого-кода-сделали-этот» - ヅ ... слишком ... неоправданно сложный для такого простого блока.
Типа «мы не ищем лёгких путей ...» ... ヅ

Flesh

Страница 1 из 1
1