.....страницы с одинаковым кодом имеют разный вид... - HTML и CSS

vedro-compota · 15.12.2010, 00:25

Доброго времени суток, друзья ))
Собственно - не могу понять разницы между двумя листами стилей 1-ый -

Код:

html, body {
	font: 13px Arial,Tahoma,Sans-serif;
	margin: 0;
	padding: 0;
}
h3 {
	font-size: 13px;
	text-align: center;
}
#wrapper {
	margin: 12px auto;
	width: 1024px;
}
#main-menu {
	background: #f0f0f0;
	border: 1px solid #d8d8d8;
	height: 60px;
	line-height: 60px; /* Set line-height same with height will give the equal vertical alignment */
	text-align: center;
}
#content {
	padding: 12px 0;
	border: dashed 1px;
}
#columns {
	overflow: hidden;
}
#left {
	float: left;
	width: 287px;
}
#main_photo, #main_form {
	border: 1px solid #ddd;
	font-weight: bold;
	margin-bottom: 12px;
	padding: 87px 10px;
	text-align: center;
}
#middle {
	border: 1px solid #ddd;
	float: left;
	margin-left: 22px;
	padding: 13px 8px 87px;
	width: 432px;
}
#right {
	float: right;
	width: 250px;
	border: 1px solid #ddd;
}
#main_text_head {
	background: #e8e8e8;
	border: 1px solid #d7d7d7;
	margin: 0 0 9px;
	padding: 8px 3px;
}
#message {
	overflow: hidden;
	position: relative;
}
#avatar {
	background: #f7f7f7;
	border: 1px solid #d8d8d8;
	float: left;
	font-weight: bold;
	height: 111px;
	line-height: 111px;
	width: 117px;
	text-align: center;
}
#message_text {
	margin-left: 124px;
	padding: 8px 13px;
}

2-ой -

Код:

html, body {
	font: 13px Arial,Tahoma,Sans-serif;
	margin: 0;
	padding: 0;
	border: dashed 0px;
}
#wrapper {
	margin: 12px auto;
	width: 1024px;
}
#main-menu {
	background: #f0f0f0;
	border: 1px solid #d8d8d8;
	height: 60px;
	line-height: 60px; /* Set line-height same with height will give the equal vertical alignment */
	text-align: center;
}
#content {
	padding: 12px 0;
	border: dashed 1px;
}
#left {
	float: left;
	width: 287px;
}
#main_photo, #main_form {
	border: 1px solid #ddd;
	font-weight: bold;
	margin-bottom: 12px;
	padding: 87px 10px;
	text-align: center;
}
#middle {
	border: 1px solid #ddd;
	float: left;
	margin-left: 22px;
	padding: 13px 8px 87px;
	width: 432px;
}
#main_text_head {
	background: #e8e8e8;
	border: 1px solid #d7d7d7;
	margin: 0 0 9px;
	padding: 8px 3px;
	text-align: center;
}
#right {
	float: right;
	width: 250px;
	border: 1px solid #ddd;
}
h3 {
	font-size: 13px;
	text-align: center;
	}
#message {
	overflow: hidden;
	position: relative;
}
#avatar {
	background: #f7f7f7;
	border: 1px solid #d8d8d8;
	float: left;
	font-weight: bold;
	height: 111px;
	line-height: 111px;
	width: 117px;
	text-align: center;
}
#message_text {
	margin-left: 124px;
	padding: 8px 13px;
}

код сраницы в обоих случаях одинаковый-

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Что-то вроде страницы.</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen">
</head>
<body>
	<div id="wrapper">
		<div id="main-menu">
			Main Menu
		</div>
		<div id="content">
			<div id="columns">
				<div id="left">
					<div id="main_photo">Main Photo</div>
					<div id="main_form">Main Form</div>
				</div>
				<div id="middle">
					<h3 id="main_text_head">Main Text Head</h3>
				</div>
				<div id="right">
					<h3>Right Side</h3>
				</div>
			</div>
			<div id="message">
				<div id="avatar">Avatar</div>
				<div id="message_text">Message</div>		  
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

, но отображаются эти самые страницы почему-то по-разному !
Подскажите пожалуйста - что не так во втором случае !
Заранее благодарю))
(прикрепляю файл с обоими вариантами - чтобы в браузере можно было посмотреть отн. стилей)

vedro-compota · 15.12.2010, 00:32

всё)) разобрался))

vedro-compota · 15.12.2010, 00:58

вообще - если кто может - пожалуйста прокомментируйте стиль вёрстки (есть же . наверное, разные стили?...в той или иной степени...) -

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Что-то вроде страницы.</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
	<div id="wrapper">
		<div id="main-menu">
			Main Menu
		</div>
		<div id="content">
			<div id="columns">
				<div id="left">
					<div id="main_photo">Main Photo</div>
					<div id="main_form">Main Form</div>
				</div>
				<div id="middle">
					<h3 id="main_text_head">Main Text Head</h3>
				</div>
				<div id="right">
					<h3>Right Side</h3>
				</div>
			</div>
			<div id="message">
				<div id="avatar">Avatar</div>
				<div id="message_text">Message</div>		  
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

+

Код:

html, body {
	font: 13px Arial,Tahoma,Sans-serif;
	margin: 0;
	padding: 0;
}
h3 {
	font-size: 13px;
	text-align: center;
}
#wrapper {
	margin: 12px auto;
	width: 1024px;
}
#main-menu {
	background: #f0f0f0;
	border: 1px solid #d8d8d8;
	height: 60px;
	line-height: 60px; /* Set line-height same with height will give the equal vertical alignment */
	text-align: center;
}
#content {
	padding: 12px 0;
	border: dashed 1px;
}
#columns {
	overflow: hidden;
}
#left {
	float: left;
	width: 287px;
}
#main_photo, #main_form {
	border: 1px solid #ddd;
	font-weight: bold;
	margin-bottom: 12px;
	padding: 87px 10px;
	text-align: center;
}
#middle {
	border: 1px solid #ddd;
	float: left;
	margin-left: 22px;
	padding: 13px 8px 87px;
	width: 432px;
}
#right {
	float: right;
	width: 250px;
	border: 1px solid #ddd;
}
#main_text_head {
	background: #e8e8e8;
	border: 1px solid #d7d7d7;
	margin: 0 0 9px;
	padding: 8px 3px;
}
#message {
    border: dashed 1px;
	overflow: hidden;
	position: relative;
}
#avatar {
	background: #f7f7f7;
	border: 1px solid #d8d8d8;
	float: left;
	font-weight: bold;
	height: 111px;
	line-height: 111px;
	width: 117px;
	text-align: center;
}
#message_text {
	margin-left: 124px;
	padding: 8px 13px;
}

это мне один человек помог - по-моему классно сделано, но совершенно непонятно -минимум свойств используется -в всё "само-собой".
Прикреплю файл для изучения -

KPEATuBHO · 15.12.2010, 10:04

Структура документа написана хорошо, но есть подозрение что при разрастании сайта, она может немного покорябаться) Еще существует мнение, что стили лучше передавать через атрибут class. А так в целом, на мой взгляд, все очень качественно и добротно написано!

vedro-compota · 15.12.2010, 19:07

да....спасибо за ответ))
вообще - если убрать -

Код:

<div id="content">

то всё сразу перекашивается ..1)..не понятно почему....
2)и почему-то при добавлении выделенного -

Код:

#right {
	float: right;
	width: 250px;
	border: 1px solid #ddd;
        padding: 13px;

}

блок right резко "соскакивает" вниз - разве свойство padding не за поля отвечает ?...то есть за то - что внутри блока....почему же меняется его положение.....
прошу объяснить - если кто может вникнуть в это дело ) )

KPEATuBHO · 16.12.2010, 09:36

1) Странно, скачал ваш код, удалил <div id="content"> и его закрывающий тэг - ничего не съехало) Да походу судя по стилям и не должно было ничего съезжать.

2) при добавлении padding в стиль элемента его ширина (в вашем случае 250px) увеличивается на два значения паддинга (в вашем случае на 26px). Таким образом конечная ширина элемента буит 276px независимо от браузера. То есть если вы хотите чтобы от падиинга нчиего не съезжало ширину надо уменьшить, т.е. сделать 224px.

vedro-compota · 16.12.2010, 18:01

KPEATuBHO

Цитата:

1) Странно, скачал ваш код, удалил <div id="content"> и его закрывающий тэг - ничего не съехало) Да походу судя по стилям и не должно было ничего съезжать.

странно...пробую ещё раз....

Цитата:

2) при добавлении padding в стиль элемента его ширина (в вашем случае 250px) увеличивается на два значения паддинга (в вашем случае на 26px). Таким образом конечная ширина элемента буит 276px независимо от браузера. То есть если вы хотите чтобы от падиинга нчиего не съезжало ширину надо уменьшить, т.е. сделать 224px

то есть padding - это этакий "внутренний margin" ? )))

TranceSmile · 16.12.2010, 19:50

Да padding это внутренний margin

15.12.2010, 00:32	#2
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	всё)) разобрался)) против абортов=за + жизнь;.фкн вгу;_______________________мойблг

15.12.2010, 10:04	#4
KPEATuBHO Форумчанин Регистрация: 03.09.2010 Сообщений: 197	Структура документа написана хорошо, но есть подозрение что при разрастании сайта, она может немного покорябаться) Еще существует мнение, что стили лучше передавать через атрибут class. А так в целом, на мой взгляд, все очень качественно и добротно написано! быстрый хостинг. недорогие домены.

15.12.2010, 19:07	#5
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	да....спасибо за ответ)) вообще - если убрать - Код: `<div id="content">` то всё сразу перекашивается ..1)..не понятно почему.... 2)и почему-то при добавлении выделенного - Код: `#right { float: right; width: 250px; border: 1px solid #ddd; padding: 13px; }` блок right резко "соскакивает" вниз - разве свойство padding не за поля отвечает ?...то есть за то - что внутри блока....почему же меняется его положение..... прошу объяснить - если кто может вникнуть в это дело ) ) против абортов=за + жизнь;.фкн вгу;_______________________мойблг

16.12.2010, 09:36	#6
KPEATuBHO Форумчанин Регистрация: 03.09.2010 Сообщений: 197	1) Странно, скачал ваш код, удалил <div id="content"> и его закрывающий тэг - ничего не съехало) Да походу судя по стилям и не должно было ничего съезжать. 2) при добавлении padding в стиль элемента его ширина (в вашем случае 250px) увеличивается на два значения паддинга (в вашем случае на 26px). Таким образом конечная ширина элемента буит 276px независимо от браузера. То есть если вы хотите чтобы от падиинга нчиего не съезжало ширину надо уменьшить, т.е. сделать 224px. быстрый хостинг. недорогие домены.

16.12.2010, 19:50	#8
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Да padding это внутренний margin Самый перспективный framework Yii (c)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
проверить есть ли в массиве числа с одинаковым значением?	yardie	Общие вопросы C/C++	1	12.10.2010 13:17
Присваивание значений одинаковым полям разных типов.	Alex Cones	Общие вопросы Delphi	1	20.09.2010 17:56
Слияние одного dbf в другой с одинаковым названием, но из разных директорий	xamillion	Microsoft Office Excel	25	18.09.2010 13:59
Внешний вид страницы	Syltan	JavaScript, Ajax	1	28.04.2010 13:41
слова с одинаковым началом и концом	shelest	Помощь студентам	2	28.02.2010 15:07