Перейти к содержимому


Партнерская программа Kredov

CSS как убрать границы в верстке!

#1 Kdes70

Kdes70
  • Пользователь
  • 55 сообщений
  • Репутация: 0
0

Отправлено 16 Февраль 2012 - 20:34

Люди помогите решить проблему, делал табличную верстку в програме Adobe Dreamweaver CS5. вставил изоброжение шапки, футера и между блоками образовались (просветы) как это исправить?

вот на картинке видно

Прикрепленные изображения

  • 16-02-2012-23-27-36.png

 

 

  • 0

#2 lamerya

lamerya
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 16 Февраль 2012 - 23:10

кинь исходник , на досуге гляну :)
  • 0

#3 Kdes70

Kdes70
    Topic Starter
  • Пользователь
  • 55 сообщений
  • Репутация: 0

Отправлено 17 Февраль 2012 - 00:03

[b]
 [/b]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="900" border="0" align="center" class="main_border">
<tr>
<td height="10" border="0" align="center" valign="bottom"><img src="img/header.png" width="900" height="243" align="middle"></td>
</tr>
<tr>
<td valign="top"><img src="img/nav.png" width="900" height="40"></td>
</tr>
<tr>
<td valign="top"><table width="900" border="0">
<tr>
<td width="182" height="131" valign="top" class="left">&nbsp;</td>
<td valign="top" bgcolor="#CCCCCC">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="img/footer.png" width="900" height="33"></td>
</tr>
</table>
</body>
</html>




@charset "windows-1251";
/* CSS Document */

.main_border {
border:1px solid #FFF;
}
p {
font-family:Verdana;
font-size:12px;
margin:15px;
font-weight:bold;
}

body { background-image:url(img/Bd.jpg);

}

.left {
background-color:#91BDC8; border-right:1px solid #333;
}

.nav_title
{
margin-top:15px;
margin-left:5%;
margin-right:5%;
font-weight:bold;
text-align:center;
border-left:4px solid #900;
border-bottom:1px solid #666;
padding-top:6px;
padding-bottom:6px;
}

.nav_link{
color:#000;
font-size:11px;
margin-top:10px;
margin-bottom:10px;
}

.post {
border:1px solid #cccccc;
width:95%;
}

  • 0

#4 anton-line

anton-line
  • Пользователь
  • 8 сообщений
  • Репутация: 1

Отправлено 17 Февраль 2012 - 00:04

не понятно, в чем именно проблема.. что надо улучшить?
  • 0

#5 Kdes70

Kdes70
    Topic Starter
  • Пользователь
  • 55 сообщений
  • Репутация: 0

Отправлено 17 Февраль 2012 - 00:07

Благодарю заранее за любую помощь

на рисунке видно что между блоками просветы, как их убрать?
  • 0

#6 anton-line

anton-line
  • Пользователь
  • 8 сообщений
  • Репутация: 1

Отправлено 17 Февраль 2012 - 00:14

попробуй в первом <TABLE добавить `cellpadding="0" cellspacing="0"`
  • 1

#7 Kdes70

Kdes70
    Topic Starter
  • Пользователь
  • 55 сообщений
  • Репутация: 0

Отправлено 17 Февраль 2012 - 00:16

спасибо вам ))) помогло!!
  • 0

#8 anton-line

anton-line
  • Пользователь
  • 8 сообщений
  • Репутация: 1

Отправлено 17 Февраль 2012 - 00:17

всё гениальное - просто.. старый добрый html иногда полезнее новых css =))
  • 0

#9 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 17 Февраль 2012 - 19:10

Kdes70, исправить можно так:

.main_border {
border:1px solid #FFF;
border-collapse: collapse;
}
.main_border td{
padding: 0;
}
.main_border td table{
border-collapse: collapse;
}

  • 0

#10 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 17 Февраль 2012 - 19:30

А по нормальному, конечно, следует уходить от табличной верстки.
Так же плохо смешивать в одном файле содержание и оформление.
В вашем случае нормальная верстка будет выглядеть как-то так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>не таблица</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main_border">
	<div id="header"></div>
	<div id="nav"></div>
	<div id="content">
		<div id="left"></div>
		<div id="right"></div>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
body{
	text-align: center;
	background: url(img/Bd.jpg);
}
#main_border{
	width: 900px;
	margin: 0 auto;
	border: 1px solid #fff;
}
#header{
	height: 243px;
	background: url(img/header.png);
}
#nav{
	height: 40px;
	background: url(img/nav.png);
}
#content{
}
#left{
	float: left;
	width: 182px;
	height: 131px;
	background-color:#91BDC8;
}
#right{
	margin-left: 182px;
	height: 131px;
	border-left:1px solid #333;
	background-color:#ccc;
}
#footer{
	height: 33px;
	background: url(img/footer.png);
}
Некоторые места у вас не сильно понятны, например,
* так ли нужна белая рамочка вокруг всего содержимого страницы (у вас это таблица с классом "main_border")?
* для какой цели точно задана высота ячейки с классом "left" — 131px?
Потому, возможно, в этих местах окончательный вариант верстки будет выглядеть несколько иначе.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru