Заставить CSS класс принудительно не наследовать родителя?

Главная » Форум » Программинг, Скрипты, Софт, Сервисы »

Тема: Заставить CSS класс принудительно не наследовать родителя?

цитата
26/06/11 в 21:43

Vyacheslav
Есть некий id - #submenu {font-size:24px} внутри <div id=submenu><span><span></div> этот самый <span> наследует этот font-size:24px. Можно ли как-то заставить <span> не наследовать шрифт или вобще ничего не наследовать?

цитата
26/06/11 в 22:17

SAV
вроде как нет, тока переопределить нужный формат
по сути логично, каким-то он должен быть

цитата
26/06/11 в 22:52

mr. snatch
ну фонт будет (и должен) наследоваться, просто что мешает сделать что-то типа:
#submenu span {font-size: 14px;}

цитата
26/06/11 в 22:59

Vyacheslav

Так и сделал.

цитата
27/06/11 в 18:21

Jabar
Позвольте расширить вопрос. С шрифтом все тривиально - переназначим новый размер для потомка и готово. А вот , что то не могу додуматься как сделать чтобы потомок не наследовал ширину родителя? Поясню, если width для класса А определена в 800px , а хотелось бы, что бы класс Б, находящийся внутри класса А, мог получить ширину 100%, т.е. во всю ширину окна браузера, например 1200px.

цитата
27/06/11 в 18:55

SAV
Jabar писал:

... если width для класса А определена в 800px , а хотелось бы, что бы класс Б, находящийся внутри класса А, мог получить ширину 100%, т.е. во всю ширину окна браузера, например 1200px.

раз Б внутри А, то как он будет шире А?

цитата
27/06/11 в 19:05

Jabar
Я правильно понял, что заставить потомок НЕ наследовать ширину родителя технически не возможно?

P.S. Под "внутри" я имел ввиду синтаксическое расположение, типа
<div class=A>
<div class=B>
...
</div>
</div>

P.P.S. SAV писал:

раз Б внутри А, то как он будет шире А?

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

цитата
27/06/11 в 19:45

SAV
Jabar писал:

Я правильно понял, что заставить потомок НЕ наследовать ширину родителя технически не возможно?

потомок внутри родителя, и за его пределы не выходит, т.е. 100% ширины для потомка - это ширина родителя... вариации превышения габаритов объекта внутри дива, за счет чего сам див вытягивается можно отнести к ошибке расчетов, а не технической возможности

Jabar писал:

лампочка же не простирается

цитата
27/06/11 в 21:30

Vyacheslav
Прикольный пример с лампочкой!

цитата
27/06/11 в 21:41

FXIX
Jabar писал:

А вот , что то не могу додуматься как сделать чтобы потомок не наследовал ширину родителя? Поясню, если width для класса А определена в 800px , а хотелось бы, что бы класс Б, находящийся внутри класса А, мог получить ширину 100%, т.е. во всю ширину окна браузера, например 1200px.

а додумываться не надо, надо маны курить. width не наследуемое свойство
<div><div> </div></div> - блочный див внутри - по-умолчанию имеет ширину внешнего дива. никакую другую сам по себе ширину он не имеет. причем это расчетная величина(расчитываемая движком браузера, в нее входят маргины-паддинги-бордеры-и сама ширина), а не выставленная принудительно 100%(в эту ширину не входят маргины-паддинги-бордеры). ну а размерность "проценты" - от ширины родителя. тебе надо внешний див position:relative, внутренний position:absolute, и для него уже задавать ширину в пикселях 1200. без позиционирования это засовывание большой деревянной рамки в маленькую. причем в одной плоскости. позиционирование выдергивает внутренний див из static-потока, и привязывает точки отсчета к внешнему. он какбы над внешним будет. в другой плоскости

цитата
27/06/11 в 21:44

mr. snatch
Jabar писал:

А вот , что то не могу додуматься как сделать чтобы потомок не наследовал ширину родителя?

ну просто сделать потомка float/inline/inline-block, типа как-то так:
Код:

...
<style>
body {margin: 0; padding: 0; border: none;}
#outer {width: 800px; height: 50px; margin: 0 auto; background: #ccc;}
#inner {display: inline-block; background: #FFC;}

</style>
</head>

<body>
<div id="outer">
<div id="inner">I'm Inner inline-block!</div>
</div>
</body>
...

Jabar писал:

Я правильно понял, что заставить потомок НЕ наследовать ширину родителя технически не возможно?

возможно, если вырвать потомка из потока, например, как-то так

Код:

...
<style>
body {margin: 0; padding: 0; border: none; position: relative; min-width: 800px;}
#outer {width: 800px; height: 50px; margin: 0 auto; background: #ccc;}
#inner {width: 100%; height: 30px; position: absolute; top: 10px; left: 0; background: #FFC;}
</style>
</head>

<body>
<div id="outer">
<div id="inner">I'm Inner with absolution position</div>
</div>
</body>
...

зы: ну плюс плюшки для IE6/7

зыы: упс, не заметил пост FXIX, ну да, вот такими путями)

цитата
28/06/11 в 08:16

Jabar
спасибо, понял

Новая тема Ответить

Эта страница в полной версии