див игнорирует отсутствие отступа

sh1va · May 17, 2010

Доброго времени суток.

Я ни как не могу поднять свои дивы к границам. т.е. в боди я убрал все границы

body { background:url(img/back_g.jpg); margin:0; padding:0; }

в следующих дивах я тоже убрал все границы

.col_head {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	text-align:left;
	background:#000;
	font-size:18px;
	color:#CCC;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#header{
	position:relative;
	margin:0 auto; // выравнивал по центру
	display:block;
	width:960px;
	border:1px dashed #666; // специально обозначил что бы было его видно
}

Вроде не должно быть ни каких дырок, а вот что получается на самом деле:

stars · May 17, 2010

можно взглянуть на весь код страницы? Можете попробывать написать сразу

* { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

sigma77 · May 17, 2010

sh1va

У заголовков отступы убрали?

можно взглянуть на весь код страницы? Можете попробывать написать сразу
* { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

Вот это не есть очень хорошо. Для тестирования и быстрого редактирования - нормально, но для финального кода лучше обнулять только нужные элементы. Да и не зачем писать четыре раза 0px. Достаточно написать padding: 0; margin: 0;

Edited May 17, 2010 by sigma77

stars · May 17, 2010

Вот это не есть очень хорошо. Для тестирования и быстрого редактирования - нормально, но для финального кода лучше обнулять только нужные элементы. Да и не зачем писать четыре раза 0px. Достаточно написать padding: 0; margin: 0;

Ну все зависит от проекта и личных привычек, если это какая-то тестовая маленькая страница лучше обнулить все имхо... Что касается не писать 4 раза ))) ну так можно и "px" не писать, на валидность и грамотность кода не то не другое не влияет, влияет разве что на размер страницы...

sh1va · May 17, 2010

<body>
<div class="col_head">
  <div id="header">
	<div id="logo_1"><H1>In-stante</H1><p>instante of life...</p></div>
	  <div class="menu">
<ul>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a>
			 <ul>
			   <li><a href="#">4</a></li>
			   <li><a href="#">5</a></li>
			   <li><a href="#">6</a></li>
			   <li><a href="#">7</a></li>
			 </ul></li>
		  <li><a href="#">1</a></li>
		</ul>
	</div>
	<div style="clear:both"></div>
	</div>
	</div>
<div class="col_foto">
 <div id="foto">
		<ul>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		</ul>
 </div>
</div>

</body>

body { background:url(img/back_g.jpg); margin:0; padding:0; }
/* —- header —- */
.col_head {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	text-align:left;
	background:#000;
	font-size:18px;
	color:#CCC;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#header, #foto{
	position:relative;
	margin:0 auto;
	display:block;
	width:960px;
	border:1px dashed #666;
	/*
	border-left:1px dashed #666;
	border-right:1px dashed #666;
	*/
	}
#foto{
	background:#000;
	}

#logo_1 {
	margin: 30px 0 0 10px;
	display:block;
	float:left;
	width:300px;
}

/* —- menu -- */
#menu {
	display:block;
	float:right;
}
.menu ul {
	list-style:none;
	padding:90px 10px 0 0;
}

.menu li {
	list-style:none;
	width:120px;
	float:right;
	position:relative;
}
.menu li ul {
	display:none;
	position:absolute;
	z-index:1;
	padding:0;
}
.menu li a{
	padding:5px;
	text-decoration:none;
	color:#CCC;
	padding:2px;
	border:1px solid #666;
	display:block;
}
.menu li a:hover {
	background:#666;
}
.menu li:hover ul, li.over ul { 
	display: block; 
   }

	/* —- foto —- */

.col_foto {
	display:block;
	width:100%;
	margin:0;
}

Edited May 17, 2010 by sh1va

sigma77 · May 17, 2010

sh1va

h1 {margin: 0; padding: 0;}

stars · May 17, 2010

код как то избирательно скопирован )))

Edited May 17, 2010 by stars

Searcher · May 17, 2010

У мення все прижимается нормально. Какой доктайп ставили?

Может стилями броузера где-то перекрыли?

sh1va · May 17, 2010

sh1va
h1 {margin: 0; padding: 0;}

не помагло

У мення все прижимается нормально. Какой доктайп ставили?
Может стилями броузера где-то перекрыли?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

psywalker · May 17, 2010

*{margin: 0; padding: 0;} да обнули ты уже всё таким образом для проверки.

stars · May 17, 2010

Ради интереса собрал страничку все отображается нормально(в ie6-8 operar 10.5 ff 3.6.3 хроме и сафари)...

Так что скорей всего вам просто надо снять со своего браузера надстройки....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { background:url(img/back_g.jpg); margin:0; padding:0; }

.col_head {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	text-align:left;
	background:#000;
	font-size:18px;
	color:#CCC;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#header, #foto{
	position:relative;
	margin:0 auto;
	display:block;
	width:960px;
	border:1px dashed #666;
	}
#foto{
	background:#000;
	}

#logo_1 {
	margin: 30px 0 0 10px;
	display:block;
	float:left;
	width:300px;
}

#menu {
	display:block;
	float:right;
}
.menu ul {
	list-style:none;
	padding:90px 10px 0 0;
}

.menu li {
	list-style:none;
	width:120px;
	float:right;
	position:relative;
}
.menu li ul {
	display:none;
	position:absolute;
	z-index:1;
	padding:0;
}
.menu li a{
	padding:5px;
	text-decoration:none;
	color:#CCC;
	padding:2px;
	border:1px solid #666;
	display:block;
}
.menu li a:hover {
	background:#666;
}
.menu li:hover ul, li.over ul { 
	display: block; 
   }

.col_foto {
	display:block;
	width:100%;
	margin:0;
}
</style>
</head>
<body>
<div class="col_head">
  <div id="header">
	<div id="logo_1"><H1>In-stante</H1><p>instante of life...</p></div>
	  <div class="menu">
<ul>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a>
			 <ul>
			   <li><a href="#">4</a></li>
			   <li><a href="#">5</a></li>
			   <li><a href="#">6</a></li>
			   <li><a href="#">7</a></li>
			 </ul></li>
		  <li><a href="#">1</a></li>
		</ul>
	</div>
	<div style="clear:both"></div>
	</div>
	</div>
<div class="col_foto">
<div id="foto">
		<ul>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">3</a></li>
		  <li><a href="#">2</a></li>
		  <li><a href="#">1</a></li>
		</ul>
</div>
</div>
</body>
</html>

sh1va · May 17, 2010

у меня паника! убрал в свойствах фаерфокса стили и вот что я там увидел в самом верху где пробел стоит!

п»ї

но в хтм коде я этого не увидел, что это??

и кстати если убрать боред

#header, #foto{
	position:relative;
	margin:0 auto;
	display:block;
	width:960px;
	/* border:1px dashed #666; ВОТ ЕГО */
	}

то опять все сьезжает, этот бордер получается как костыль

Edited May 17, 2010 by sh1va

stars · May 17, 2010

Убери бом и "п»ї" пропадет

Эм чето я увлекся ))) БОМ = bite order mark это возможно у файлов в кодировке UTF

Edited May 17, 2010 by stars

sh1va · May 17, 2010

Убери бом и "п»ї" пропадет

да, с этим я уже разобрался... погуглил.

а вот как выровнить все без бордера, без костыля так и не понял, в хроме, опере и фаерфоксе одно и тоже показывает.

stars · May 17, 2010

ну так используй

overflow: hidden;

sh1va · May 17, 2010

ну так используй
overflow: hidden;

нет, тогда моя менюшка будет уезжать под див... это тоже костыль, я не верю что нет ни одного нормально решения...

и вот опять же если тут указать отрицательный маргин то опять все встает на свое место

#header{
	position:relative;
	margin:-15px auto;
	padding:0;
	display:block;
	width:960px;
	border:1px dashed #666;
	border-top:none;
	/*
	border-left:1px dashed #666;
	border-right:1px dashed #666;
	*/
	}

Edited May 17, 2010 by sh1va

Sign In

див игнорирует отсутствие отступа

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information