Непонятные мне линии

photograf · August 6, 2011

У меня при просмотре в любом браузере образуются непонятные линии

Код такой:

<!DOCTYPE HTML>

<html>
<head>
<title>_</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="main">
	<tr class="head">
		<td colspan="7"></td>
	</tr>
	<tr class="menu">
		<td class="m1"></td>
		<td class="m2"><a href="#"></a></td>
		<td class="m3"><a href="#"></a></td>
		<td class="m4"><a href="#"></a></td>
		<td class="m5"><a href="#"></a></td>
		<td class="m6"><a href="#"></a></td>
		<td class="m7"><a href="#"></a></td>
	</tr>
	<tr class="texthead">
		<td colspan="7"><p> </p></td>
	</tr>
	<tr class="textmid">
		<td colspan="7"><p> </p></td>
	</tr>
	<tr class="textdown">
        <td colspan="7"><p> </p></td>
	</tr>
	<tr class="foot">
		<td colspan="7"><p> </p></td>
	</tr>
</table>
</body>
</html>

css-такой

body {
  background-color:#000000;
  margin-left: 0;
  margin-top:0;
}
#main {
 width:1100px;
 height:898px;
 border:0px;
 padding:0px;
 border-collapse:collapse;
 margin:0 auto;
 border-spacing: 0px;
}

.m1{
  background-image: url(images/index_02.jpg);
  width: 63px;
  height: 60px;
}
.m2{
  background-image: url(images/index_03.jpg);
  width: 158px;
  height: 60px;
}
.m3{
  background-image: url(images/index_04.jpg);
  width: 215px;
  height: 60px;
}
.m4{
  background-image: url(images/index_05.jpg);
  width: 189px;
  height: 60px;
}
.m5{
  background-image: url(images/index_06.jpg);
  width: 215px;
  height: 60px;
}
.m6{
  background-image: url(images/index_07.jpg);
  width: 203px;
  height: 60px;
}
.m7{
  background-image: url(images/index_08.jpg);
  width: 57px;
  height: 60px;
}
td>a {
    display: block;
    width: 100%;
    height: 100%;
}
.texthead>td{
  background-image: url(images/index_09.jpg);
  width: 1100px;
  height: 187px;
}
.textmid>td{
  background-image: url(images/index_10.jpg);
  width: 1100px;
  height: 127px;
}
.head>td{
  background-image: url(images/index_01.jpg);
  width: 1100px;
  height: 230px;
}
.textdown>td {
  background-image: url(images/index_11.jpg);
  width: 1100px;
  height: 167px;
}
.foot>td {
  background-image: url(images/index_12.jpg);
  width: 1100px;
  height: 127px;
}

Подскажите, пожалуйста. Что это за полосы могут быть? Это из-за border-collaps?

Nekromancer · August 6, 2011

table td {padding: 0;}

Это раз.

background-repeat: no-repeat;

Это два.

Второе применять ко всем ячейкам где картинки.

photograf · August 6, 2011

table td {padding: 0;}
Это раз.
background-repeat: no-repeat;
Это два.
Второе применять ко всем ячейкам где картинки.

Да, спасибо. Это помогло.

Можно еще вопрос?

Планировал в этой части:

<tr class="textmid">
                <td colspan="7"><p> </p></td>
        </tr>

сделать возможность растягивать фон, когда текст будет выше, чем 127 пикселей. В случае no-repeat тогда растяигаться ничего не будет?

kidrock · August 6, 2011

Планировал в этой части:
<tr class="textmid">
                <td colspan="7"><p> </p></td>
        </tr>
сделать возможность растягивать фон, когда текст будет выше, чем 127 пикселей. В случае no-repeat тогда растяигаться ничего не будет?

Изображения установленные в качестве фона, по умолчанию имеют свойство как бы замащивать собой всё пространство, дублируя себя по осям X и Y, свойство no-repeat это запрещает, можно задать параметр repeat-x или repeat-y по необходимости.

Sign In

Непонятные мне линии

Question

photograf

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Nekromancer

Link to comment

Share on other sites

photograf

Link to comment

Share on other sites

kidrock

Link to comment

Share on other sites

Join the conversation

Forums

Important Information