Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.12.2010, 00:25   #1
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию .....страницы с одинаковым кодом имеют разный вид...

Доброго времени суток, друзья ))
Собственно - не могу понять разницы между двумя листами стилей 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>
, но отображаются эти самые страницы почему-то по-разному !
Подскажите пожалуйста - что не так во втором случае !
Заранее благодарю))
(прикрепляю файл с обоими вариантами - чтобы в браузере можно было посмотреть отн. стилей)
Вложения
Тип файла: zip 123.zip (2.5 Кб, 8 просмотров)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 15.12.2010, 00:32   #2
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

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

вообще - если кто может - пожалуйста прокомментируйте стиль вёрстки (есть же . наверное, разные стили?...в той или иной степени...) -
Код:
<!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;
}
это мне один человек помог - по-моему классно сделано, но совершенно непонятно -минимум свойств используется -в всё "само-собой".
Прикреплю файл для изучения -
Вложения
Тип файла: zip 1.zip (1.1 Кб, 11 просмотров)
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 15.12.2010, 10:04   #4
KPEATuBHO
Форумчанин
 
Аватар для KPEATuBHO
 
Регистрация: 03.09.2010
Сообщений: 197
По умолчанию

Структура документа написана хорошо, но есть подозрение что при разрастании сайта, она может немного покорябаться) Еще существует мнение, что стили лучше передавать через атрибут class. А так в целом, на мой взгляд, все очень качественно и добротно написано!
KPEATuBHO вне форума Ответить с цитированием
Старый 15.12.2010, 19:07   #5
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для 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 не за поля отвечает ?...то есть за то - что внутри блока....почему же меняется его положение.....
прошу объяснить - если кто может вникнуть в это дело ) )
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 16.12.2010, 09:36   #6
KPEATuBHO
Форумчанин
 
Аватар для KPEATuBHO
 
Регистрация: 03.09.2010
Сообщений: 197
По умолчанию

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

2) при добавлении padding в стиль элемента его ширина (в вашем случае 250px) увеличивается на два значения паддинга (в вашем случае на 26px). Таким образом конечная ширина элемента буит 276px независимо от браузера. То есть если вы хотите чтобы от падиинга нчиего не съезжало ширину надо уменьшить, т.е. сделать 224px.
KPEATuBHO вне форума Ответить с цитированием
Старый 16.12.2010, 18:01   #7
vedro-compota
любитель-далеко не
Участник клуба
 
Аватар для vedro-compota
 
Регистрация: 13.04.2010
Сообщений: 1,156
По умолчанию

KPEATuBHO

Цитата:
1) Странно, скачал ваш код, удалил <div id="content"> и его закрывающий тэг - ничего не съехало) Да походу судя по стилям и не должно было ничего съезжать.
странно...пробую ещё раз....
Цитата:
2) при добавлении padding в стиль элемента его ширина (в вашем случае 250px) увеличивается на два значения паддинга (в вашем случае на 26px). Таким образом конечная ширина элемента буит 276px независимо от браузера. То есть если вы хотите чтобы от падиинга нчиего не съезжало ширину надо уменьшить, т.е. сделать 224px
то есть padding - это этакий "внутренний margin" ? )))
против абортов=за + жизнь;.фкн вгу;_______________________мойблг
vedro-compota вне форума Ответить с цитированием
Старый 16.12.2010, 19:50   #8
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Да padding это внутренний margin
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверить есть ли в массиве числа с одинаковым значением? 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