Наследование свойств - HTML и CSS

vedro-compota · 16.04.2010, 20:07

Здравствуйте , товарищи 0)))
Не могу понять принципы наследования свойств в css .
В качестве фона я хочу использовать растянутый градиент. Насколько я знаю, это нельзя сделать, используя свойство "background-image". Поэтому я использую тэг <img src="fone2.jpg" id="fone">. Фон ( как и весь сайт) должен располагаться по центру страницы. Потому я использую лист стилей:

Код:

div  { margin: 0 auto;
       border: dashed 1px; }
 
#head  {   
         width: 1024px ;  
         height: 259px ;
       
         background-image:  url('sp.jpg');
         background-repeat: no-repeat;
         text-align: center;
         border: dashed 0 px;
         padding: 20 px;
         border-color: #406;    }
#fone { width: 1024px ;  
         height: 1500px ;
           
        }

Разве картинка не должна выравниваться по центру, наследуя это свойство от внешнего тега div ?
вот код страницы:

Код:

<html>
<head>
<title> Free </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div>
  <div id="head"> text  </div>
  <div> <img src="fone2.jpg" id="fone"> </div>
</div>
</body>
</html>

Пожалуйста, подскажите в чём моя ошибка.....или чегомя не понимаю )))
Заранее благодарен))

MrJenika · 17.04.2010, 12:02

сделайте основной див например контент:

Код:

<div id="content">
 содержимое сайта
</div>

#content{
margin: 0 auto;
}

также фон сайта тоже прописываете в этом диве

vedro-compota · 18.04.2010, 13:51

сделал как вы сказали )) . вот так:
лист стилей:

Код:

#content {
margin: 0 auto;
border: dashed 1px;
}


 
#head  {   
         width: 1024px ;  
         height: 259px ;
       
         background-image:  url('sp.jpg');
         background-repeat: no-repeat;
         text-align: center;
         border: dashed 0 px;
         padding: 20 px;
         border-color: #406;    }
#fone { width: 1024px ;  
         height: 1500px ;
           
        }

код страницы:

Код:

<html>
<head>
<title> Free </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="content">
  <div id="head"> text  </div>
  <div> <img src="fone2.jpg" id="fone"> </div>
</div>
</body>
</html>

но что-то не работает. не хочет мАзила сайт по центру размещать. что же у меня не правильно ?
---------------------------------------------------
добавляю маленький архив с проблемой)) выручите, пожалуйста)

MrJenika · 18.04.2010, 21:29

вот замените свои стили на эти :

Код:

body {padding: 0; margin: 0; }

#content {  margin: 10px auto; width: 1024px;
border: dashed 1px;
}


 
#head  { margin : 0 auto;   
         width: 1024px ;  
         height: 259px ;
       
         background-image:  url('sp.jpg');
         background-repeat: no-repeat;
         text-align: center;
         border: dashed 0 px;
         padding: 20 px;
         border-color: #406;    }
#fone { margin : 0 auto; 
       width: 1024px ;  
         height: 1500px ;
           
        }

Для IE заключите всё меж тегами

Код:

<center> Весь ваш контент</center>

Magneto · 19.04.2010, 12:29

долго смотрел на изображения - искал градиент - нету его там
смотрел на код - написан через задницу
читал вопрос - в детском садике дети точнее формулируют вопросы

vedro-compota · 19.04.2010, 13:19

ни с чем не спорю) градиент- или нет) не в этом дело)) читай выше, злостный нарушитель) будь гражданином мира! ну или хотя бы как гражданин мира ) а то ты прям серьёзно настроен)

vedro-compota · 19.04.2010, 14:23

Спасибо, MrJenika ) теперь всё по центру)
экспериментирую с исправленным вами листом стилей получаю, что и вот такая версия работает:

Код:

#content {  margin: 0px auto; width: 1024px;
border: dashed 1px;
}

#head  { width: 1024px ;  
         height: 259px ;
         background-image:  url('sp.jpg');
         background-repeat: no-repeat;
         text-align: center;
         border: dashed 0 px;
         padding: 20 px;
         border-color: #406;    }
#fone {  
       width: 1024px ;  
         height: 1500px ;  
        }

благодарю за помощь !

Magneto · 19.04.2010, 14:30

градиентная заливка многое решает - если бы у Вас была именно она, то достаточно было ее размножить в фоне

не зависимо от степени Вашей обидчивости я останусь (не)гражданином мира/(не)землянином и тд и тп

а вопрос переформулирова нужно - так нифига не ясно - куда Вы собираетесь растягиваить этот рисунок - ведь в дивах прописаны размеры сопоставимы с размерами ваших рисунков - если вам сложно сформулировать вопрос - нарисуйте его

Вы не можете выровнят сайт по средине это мягко говоря странно - нет это позорно

P.S. Следующий вопрос будет приблезительно такой: А как поверх всего этого разместить контент сайта ?

vedro-compota · 19.04.2010, 14:39

Magneto обвинит меня в тупости ,но я так и не понял- почему не наследуется свойство

Код:

margin: 0px auto;

от внешнего элемента div? В то время , как

Код:

border: dashed 1px;

наследуется вполне успешно......
(это я рассуждаю , рассматривая лист стилей:

Код:

div  { margin: 0px auto;
       border: dashed 1px; }
 
#head  {   
         width: 1024px ;  
         height: 259px ;
       
         background-image:  url('sp.jpg');
         background-repeat: no-repeat;
         text-align: center;
         border: dashed 0 px;
         padding: 0 px;
         border-color: #406;    }
#fone { width: 1024px ;  
         height: 1500px ;
           
        }

и периодически проверяя, что код страницы:

Код:

<html>
<head>
<title> Free </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div >
  <div id="head"> text  </div>
  <div> <img src="fone2.jpg" id="fone"> </div>
</div>
</body>
</html>

) Хотелось бы понять логику. Книжка говорит, что свойства наследуется, да и практика показывает- что наследуются, только вот как-то не все..... почему так?

_PROGRAMM_ · 19.04.2010, 15:15

Я всегда делал так:

Код HTML:

body
{
Margin-left: 20%;
Margin-right: 20%;
}

Таблицу на 100% растягивал и ячейкам придавал фон.
Почти как у меня на дом. странице(в подписе)

16.04.2010, 20:07	#1
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	Наследование свойств Здравствуйте , товарищи 0))) Не могу понять принципы наследования свойств в css . В качестве фона я хочу использовать растянутый градиент. Насколько я знаю, это нельзя сделать, используя свойство "background-image". Поэтому я использую тэг <img src="fone2.jpg" id="fone">. Фон ( как и весь сайт) должен располагаться по центру страницы. Потому я использую лист стилей: Код: `div { margin: 0 auto; border: dashed 1px; } #head { width: 1024px ; height: 259px ; background-image: url('sp.jpg'); background-repeat: no-repeat; text-align: center; border: dashed 0 px; padding: 20 px; border-color: #406; } #fone { width: 1024px ; height: 1500px ; }` Разве картинка не должна выравниваться по центру, наследуя это свойство от внешнего тега div ? вот код страницы: Код: `<html> <head> <title> Free </title> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> </head> <body> <div> <div id="head"> text </div> <div> <img src="fone2.jpg" id="fone"> </div> </div> </body> </html>` Пожалуйста, подскажите в чём моя ошибка.....или чегомя не понимаю ))) Заранее благодарен)) против абортов=за + жизнь;.фкн вгу;_______________________мойблг

17.04.2010, 12:02	#2
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	сделайте основной див например контент: Код: `<div id="content"> содержимое сайта </div> #content{ margin: 0 auto; }` также фон сайта тоже прописываете в этом диве webinmd.com

19.04.2010, 13:19	#6
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	всё верно 0))) ни с чем не спорю) градиент- или нет) не в этом дело)) читай выше, злостный нарушитель) будь гражданином мира! ну или хотя бы как гражданин мира ) а то ты прям серьёзно настроен) против абортов=за + жизнь;.фкн вгу;_______________________мойблг Последний раз редактировалось vedro-compota; 19.04.2010 в 14:24.

19.04.2010, 14:23	#7
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	Спасибо, MrJenika ) теперь всё по центру) экспериментирую с исправленным вами листом стилей получаю, что и вот такая версия работает: Код: `#content { margin: 0px auto; width: 1024px; border: dashed 1px; } #head { width: 1024px ; height: 259px ; background-image: url('sp.jpg'); background-repeat: no-repeat; text-align: center; border: dashed 0 px; padding: 20 px; border-color: #406; } #fone { width: 1024px ; height: 1500px ; }` благодарю за помощь ! против абортов=за + жизнь;.фкн вгу;_______________________мойблг

19.04.2010, 14:30	#8
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	градиентная заливка многое решает - если бы у Вас была именно она, то достаточно было ее размножить в фоне не зависимо от степени Вашей обидчивости я останусь (не)гражданином мира/(не)землянином и тд и тп а вопрос переформулирова нужно - так нифига не ясно - куда Вы собираетесь растягиваить этот рисунок - ведь в дивах прописаны размеры сопоставимы с размерами ваших рисунков - если вам сложно сформулировать вопрос - нарисуйте его Вы не можете выровнят сайт по средине это мягко говоря странно - нет это позорно P.S. Следующий вопрос будет приблезительно такой: А как поверх всего этого разместить контент сайта ? Последний раз редактировалось Magneto; 19.04.2010 в 14:36.

19.04.2010, 12:29	#5
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	долго смотрел на изображения - искал градиент - нету его там смотрел на код - написан через задницу читал вопрос - в детском садике дети точнее формулируют вопросы

19.04.2010, 14:39	#9
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	Magneto обвинит меня в тупости ,но я так и не понял- почему не наследуется свойство Код: `margin: 0px auto;` от внешнего элемента div? В то время , как Код: `border: dashed 1px;` наследуется вполне успешно...... (это я рассуждаю , рассматривая лист стилей: Код: `div { margin: 0px auto; border: dashed 1px; } #head { width: 1024px ; height: 259px ; background-image: url('sp.jpg'); background-repeat: no-repeat; text-align: center; border: dashed 0 px; padding: 0 px; border-color: #406; } #fone { width: 1024px ; height: 1500px ; }` и периодически проверяя, что код страницы: Код: `<html> <head> <title> Free </title> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> </head> <body> <div > <div id="head"> text </div> <div> <img src="fone2.jpg" id="fone"> </div> </div> </body> </html>` ) Хотелось бы понять логику. Книжка говорит, что свойства наследуется, да и практика показывает- что наследуются, только вот как-то не все..... почему так? против абортов=за + жизнь;.фкн вгу;_______________________мойблг

19.04.2010, 15:15	#10
_PROGRAMM_ Участник клуба Регистрация: 30.07.2009 Сообщений: 1,601	Я всегда делал так: Код HTML: body { Margin-left: 20%; Margin-right: 20%; } Таблицу на 100% растягивал и ячейкам придавал фон. Почти как у меня на дом. странице(в подписе) В мире нет вечных двигателей, зато есть вечные тормоза... Блог

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
описание свойств webbrowser	Анастасия123456789	Работа с сетью в Delphi	10	25.12.2011 14:41
Редактирование свойств объектов	blacklight	Microsoft Office Excel	5	12.08.2009 19:26
Получение свойств изображения	Бутаков_Сергей	Мультимедиа в Delphi	2	10.06.2009 18:38
редактор свойств из Stringgrid	Leksmaster	Фриланс	3	01.03.2009 01:11
Изменение свойств файла	dimonbest	Win Api	7	23.02.2009 20:42