Что за фигня? (

masterlp · 27 января 2008

Хочу сделать прямоугольный блок с тенями...Вроде всё должно работать но нет, получается ерунда какая то...

Вот код таблицы:

<table width="200" border="0" cellspacing="0" cellpadding="0">

  <tr>

	<td width="5" height="5"><img src="{THEME}/images/bloc/lv.gif" width="5" height="5" /></td>

	<td height="5" background="{THEME}/images/bloc/v.gif"></td>

	<td width="7"  height="5"><img src="{THEME}/images/bloc/pv.gif" width="7" height="5" /></td>

  </tr>

  <tr>

	<td width="5" background="{THEME}/images/bloc/l.gif"></td>

	<td> </td>

	<td width="7" background="{THEME}/images/bloc/p.gif"></td>

  </tr>

  <tr height="7">

	<td height="7"><img src="{THEME}/images/bloc/ln.gif" width="5" height="7"/></td>

	<td height="7" background="{THEME}/images/bloc/n.gif"></td>

	<td height="7"><img src="{THEME}/images/bloc/pn.gif" width="7" height="7" /></td>

  </tr>

</table>

Подскажите , что не так....

Fillosoff · 27 января 2008

<td width="7"  height="5"><img src="{THEME}/images/bloc/pv.gif" width="7" height="5" /></td>

а зачем ты 2 раза пишешь width , height?? в

<img src="{THEME}/images/bloc/pv.gif" width="7" height="5" />

не надо писать размеры, а в <td> достаточно одного width.

masterlp · 27 января 2008

А это что то и зменит??

EzS · 27 января 2008

CSS:

background-repeat: no-repeat; или background-repeat: repeat-x; (если ячейка будет растягиваться по длине)

Будет применимо в вашем случае к

background="{THEME}/images/bloc/n.gif" и к background="{THEME}/images/bloc/v.gif"

По аналогии с вертикальными изображениями, для

background="{THEME}/images/bloc/l.gif" и background="{THEME}/images/bloc/p.gif"

только

background-repeat: no-repeat; или background-repeat: repeat-y; (если ячейка будет растягиваться по длине)

Просто добавьте класс к таблицам

masterlp · 27 января 2008

Блин че то не понял :mellow: А можно пример?? я в css не очень...

Vano · 27 января 2008

Вообще нельзя оставлять ячейки пустые, иначе ты в ФФ ничего не увидишь, это первое, а во-вторых

<td height="5" background="{THEME}/images/bloc/v.gif"></td>

нужно заменить на

<td height="5" background="{THEME}/images/bloc/v.gif"><img src="{THEME}/images/spacer.gif" heigt="1" width="1" /></td>

так же точно проделай с нижним средним фоном.

создай в фотошопе изображение 1х1 с прозрачным фоном, назови его spacer.gif и кинь в папку с изображениями.

А вообще я б переделал таблицы на твоём месте..

Fillosoff · 27 января 2008

это мусор из кода уберет. у тебя картинки просто повторяются.

угловые картинки ставишь:

<td width="5"><img src="{THEME}/images/bloc/lv.gif"></td>

а те, что растягиваютсяпо ширине:

<td style="background:url({THEME}/images/bloc/img.gif) repeat-x;"></td>

или по высоте:

<td style="background:url({THEME}/images/bloc/img.gif) repeat-y;"></td>

можно так если в html.

masterlp · 27 января 2008

Короче попробовал всё...ячейки так и остаются большого размера... Избавился только от повторения картинок...

masterlp · 27 января 2008

Если создавать отдельный файл с этим кодом то всё нормально выглядит! А если добавлять его в main.tpl в движке, то получаются высокие ячейки Может какие стандартные настройки css в движке всё портят??

lifestar · 27 января 2008

Может какие стандартные настройки css в движке всё портят??

вот как раз об этом и подумал. Firebug вам в помощь и его умение отключать стили на лету)

masterlp · 27 января 2008

Ну помогииите

Вот скрин:

Вот код:

<table width="200" height="1" border="1" cellpadding="0" cellspacing="0">

  <tr>

	<td height="5" valign="top" style="background:url({THEME}/images/bloc/l.gif) repeat-y;"><img src="{THEME}/images/bloc/lv.gif" width="5" height="5" align="top"/></td>

	<td height="5" style="background:url({THEME}/images/bloc/v.gif) repeat-x;"></td>

	<td height="5" valign="top" style="background:url({THEME}/images/bloc/p.gif) repeat-y;"><img src="{THEME}/images/bloc/pv.gif" width="7" height="5" align="top"/></td>

  </tr>

  <tr>

	<td width="5" style="background:url({THEME}/images/bloc/l.gif) repeat-y;"></td>

	<td width="190" align="left"><table width="100%" border="0" cellspacing="5" cellpadding="0">

	  <tr>

		<td align="left" valign="top"><div class="h2">Авторизация</div>

		  {login}</td>

	  </tr>

	</table></td>

	<td width="5" style="background:url({THEME}/images/bloc/p.gif) repeat-y;"></td>

  </tr>

  <tr>

	<td height="5" style="background:url({THEME}/images/bloc/ln.gif) no-repeat;"><img src="{THEME}/images/spacer.gif" heigt="1" width="1" /></td>

	<td height="5" style="background:url({THEME}/images/bloc/n.gif) repeat-x;"></td>

	<td height="5" style="background:url({THEME}/images/bloc/pn.gif) no-repeat;"><img src="{THEME}/images/spacer.gif" heigt="1" width="1" /></td>

  </tr>

</table>

Как сделать что бы верхний и нижний ряд были по heigt 5px ??

Fillosoff · 27 января 2008

да код-то не html надо, а CSS. это там какой-то родительский мудрит.

masterlp · 27 января 2008

style.css

* {

	padding:0;

	margin:0;

}


img {

	border:none;

}


html, body {

	background:#fff;

	font-size: 11px;

	font-family: tahoma, sans-serif;

	color: #666666;

	background:#fff;

}

#header {

	background:#fff;

	height:80px;

	width:100%;

	overflow:hidden;

}

#field {

	height:136px;

	background:url('../images/3.gif') repeat-x;

}


#wrapper {

	float:left;

	width:100%;

	margin-top:10px;

	background:#fff;

}


#center {

	margin: 0 250px;

}


#left {

	float:left;

	background:#fff;

	width:250px;

	margin-left:-100%;

	margin-top:10px;

}


#right {

	float:left;

	width:250px;

	margin-left:-250px;

	margin-top:10px;

	background:#fff;

}


#footer {

	clear:left;

	background:url('../images/333.gif') repeat-x;

	padding:10px;

}

#footer a:hover {

	color:#fff;

}

.text {

	padding:0px 10px 10px 10px;

}

h1, h2, h3, h4, h5, h6 {

	margin: 0;

	padding-bottom: 5px;

	color: #000000;

	font-weight:normal;

	letter-spacing:-1px;

}

h1 {

	font-size:14px;

}

h2, h3 {

	margin: 0 0 0px 0;

	padding: 0 0 5px 0;

}


h2 {

	font-size: 20px;  /*Размер текста заголовка*/ 

}


h3 {

	font-size: 14px;

}


p, ol, ul {

	line-height: 160%;

}


a {

	color: #004483;				/*Цвет ссылки*/  

	text-decoration: none;

}


a:hover {						 /*Цвет активной ссылки*/

	text-decoration:underline;

	color: #EA1313;

}


.strong {						 /*Не известно*/

	color: #999999;

}


.indent {

	margin-top: 0;

	margin-left: 130px;

}


.image {

	border:none;

}

.bodyline		{ 

background-color: #FFFFFF; 

border: 1px #CECFD0 solid;

}


.commen1		{				  /*Коментарий четный*/

background-color: #F7F7F7; 

border: 1px #DACDD7 solid;

}


.commen2		{				   /*Коментарий не четный*/

background-color: #EBEBEB; 

border: 1px #DACDD7 solid;

}



#module {  

	padding:0px 10px 10px 10px;

	margin-top:10px;			/*Блоки*/

	padding:10px;

	margin-bottom:20px;

	border-top: solid 1px #BEAEC4;

	border-left: solid 1px #BEAEC4;

	border-right: solid 1px #BEAEC4;

	border-bottom: solid 1px #BEAEC4;

}

.h2 {			  /*Блоки*/

	margin-top:-10px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 17px;

	font-weight: bold;

	padding-top:11px;

	color: #002036;

	letter-spacing:-1px;


}

.war {			  /*Блоки*/

	font-family: Arial, Helvetica, sans-serif;

	font-size: 17px;

	font-weight: bold;

	color: #CC0000;

	}


h2 a {

	text-decoration:underline;

}

h2 a:hover {

	text-decoration:none;

}

.title {

	width:100%;

}

.title-left {

	float:left;

	width:50%;

}

.title-right {

	float:right;

	width:50%;

}

.title-right h2 {

	font-size:14px;

	padding-bottom:15px;

	margin-top:5px;

}

.post {

	margin-bottom:14px;

}

.post ul.controls

{

	clear: both;

}


.post ul.controls li

{

	display: inline;

	font-size: 11px;

}


.post ul.controls li a

{

	padding: 0em 1.0em 0em 0px;

}

/*------------------------------------------------------------*

**  Навигация

**------------------------------------------------------------*/

#nav-menu ul

{

	list-style: none;

	padding: 0;

	margin: 0;

}

#nav-menu li

{

	float:left;

	margin: 0 0.15em;

}

#nav-menu li a

{

	height: 2em;

	line-height: 2em;

	float: left;

	display: block;

	text-decoration: none;

	text-align: center;

	padding-left:20px;

	padding-right:5px;

}	

#nav-menu li a:hover {

	color:#000;

	text-decoration:underline;

}

#nav-menu {

	float:right;

	padding-top:40px;

	padding-right:20px;

}

#bg {

	border-top:1px solid #fff;

}


.divider2

{

	position: relative;

	height: 1px;

	border-bottom: solid 1px #eaeaea;

	margin: 0em 0em 1em 0em;

}

.logo {

	float:left;

	width:300px;

}

em {

	font-style:normal;

	background:#5797c0;

	color:#fff;

	font-size:14px;

	padding:0px 3px 0px 3px;

}

.contr {

	padding-top:5px;

	overflow:hidden;

}

.r {

	float:right;

}

/* ==================== */


.f_textarea {

	color: #757575;		/* ! */

	font-size: 11px;		/* ! */

	font-family: tahoma;	/* ! */

	background-image: url(../images/dlet_field_o.gif);

	background-repeat: repeat-x;


	width: 449px;

	height: 156px;

	border: 1px solid #e0e0e0;

}

.f_input {

	color: #757575;		/* ! */

	font-size: 11px;		/* ! */

	font-family: tahoma;	/* ! */

	background-image: url(../images/dlet_field_o.gif);

	background-repeat: repeat-x;


	width: 300px;

	height: 14px;

	border: 1px solid #e0e0e0;

}

.f_select {

	color: #757575;		/* ! */

	font-size: 11px;		/* ! */

	font-family: tahoma;	/* ! */

	background-image: url(../images/dlet_field_o.gif);

	background-repeat: repeat-x;


	height: 14px;

	border: 1px solid #e0e0e0;

}

/*------------------------------------------------------------*

**  Комментарии

**------------------------------------------------------------*/

#comment {

	margin-bottom:10px;

	padding-bottom:10px;

}

#comment-top {

	padding:0px 10px 10px 10px;

	font-size:11px;

}

.comment-date {

	float:right;

	padding-right:10px;

}

#comment-bottom {

	margin:5px;

	font-size:11px;

	paddding-top:5px;

}

.comment-s {

	padding:10px;

	overflow:hidden;

}

#com-l {

	width:20%;

	float:left;

}

#com-r {

	width:80%;

	float:right;

}

.com {

	background:#F0EEE9;

	margin-bottom:10px;

	font-size:12px;

}

.ctitle {

	font-size:10px;

}

#module ul {

	list-style:none;

}

#module li {

	padding-left:15px;

	background:url('../images/arrow.gif') no-repeat left;

	margin-left:10px;

}

lifestar · 27 января 2008

border="1"

убери из своего кода и покажи что получилось

VFK · 27 января 2008

Дело в том, что высота ячейки не может быть меньше высоты шрифта. Если для ячейки с высотой 5px указать шрифт менее 5px, то это исправит проблему (пример ниже), но это не выход. По стандартам ячейка не может содержать шрифт менее 9px, соответственно, в приличных браузерах, следующих стандартам (например Opera), ячейка будет, в лубом случае не менее 9px.

Наилучшее решение: не делать ячеек высотой меньше 9px

<table width="200" border="1" cellpadding="0" cellspacing="0">

  <tr style="font-size:3px">

	<td height="5" style="background:url({THEME}/images/bloc/l.gif) no-repeat;"> </td>

	<td style="background:url({THEME}/images/bloc/v.gif) repeat-x;"> </td>

	<td style="background:url({THEME}/images/bloc/p.gif) no-repeat;"> </td>

  </tr>

  <tr>

	<td width="5" style="background:url({THEME}/images/bloc/l.gif) repeat-y;"> </td>

	<td width="190" align="left">

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

		<tr>

		  <td align="left" valign="top"><div class="h2">Авторизация</div>

		  {login}

		  </td>

		</tr>

	  </table>

	</td>

	<td width="5" style="background:url({THEME}/images/bloc/p.gif) repeat-y;"> </td>

  </tr>

  <tr style="font-size:3px">

	<td height="5" style="background:url({THEME}/images/bloc/ln.gif) no-repeat;"> </td>

	<td style="background:url({THEME}/images/bloc/n.gif) repeat-x;"> </td>

	<td style="background:url({THEME}/images/bloc/pn.gif) no-repeat;"> </td>

  </tr>

</table>

masterlp · 27 января 2008

Получается то же, что и на картинке только без полос И всё бы было хорошо, вот толко растояние от верха блока до слова авторизация уж слишком большое...

Хвала тебе VFK! Спасибо! ^_^

VFK · 27 января 2008

ps: В пустые ячейки надо прописать код пробела, форум их съел.

Vano · 27 января 2008

У меня давно уже была подобная проблема, я тоже долго мучался, но блин вы напроч не видите простейшего решения. Код пробела берёт размер шрифта указанного для ячейки, а по скольку менее 9 пикселей он быть не может то и он отпадает. Вот, второй раз пишу, всё что нужно это :

<td height="5" background="{THEME}/images/bloc/v.gif"><img src="{THEME}/images/spacer.gif" heigt="1" width="1" /></td>

с помощью spacer.gif пропадают все проблемы с высотой ячеек!

EzS · 28 января 2008

с помощью spacer.gif пропадают все проблемы с высотой ячеек!

Я что-то пропустил этот момент, когда писал пост выше.

VFK · 28 января 2008

Vano

Конечно, это решит проблему. Но неужели вы ради такой мелочи готовы загадить свой код spacer-ами. По-моему нет такой ситуации, где нельзя было бы обойтись без 5px высоты ячеек. А тут еще и spacer-ы…

Если кому-то нравится такой тип решений, могу предложить куда более изящный пример:

b{

	width:1px;

	height:1px;

}


<table>

  <tr>

	<td><b></b></td>

  </tr>

</table>

<b></b> в данном случае забивает пустоту, альтернатива пробелам и spacer-ам.

Но я не использовал бы такого рода способы.

lifestar · 28 января 2008

b{

display:block;

width:1px;

height:1px;

}

VFK · 28 января 2008

lifestar,

это необязательно, сработает и без display:block.

ps: по сути даже width, height ненужно. Если следить за стилями родительских элементов

Что за фигня? (

Рекомендованные сообщения

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

Fillosoff 1

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

EzS 2

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

Vano 0

Ссылка на сообщение

Поделиться на других сайтах

Fillosoff 1

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

Fillosoff 1

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

VFK 0

Ссылка на сообщение

Поделиться на других сайтах

masterlp 0

Ссылка на сообщение

Поделиться на других сайтах

VFK 0

Ссылка на сообщение

Поделиться на других сайтах

Vano 0

Ссылка на сообщение

Поделиться на других сайтах

EzS 2

Ссылка на сообщение

Поделиться на других сайтах

VFK 0

Ссылка на сообщение

Поделиться на других сайтах

lifestar 18

Ссылка на сообщение

Поделиться на других сайтах

VFK 0

Ссылка на сообщение

Поделиться на других сайтах

Архивировано