-=MASTER=-
> при изменении ширины экрана
это называется адаптивная верстка, адаптивный дизайн
обычно делают наоборот, берут определенные размеры окна, и под каждый пороговый размер делают свою отличающуюся верстку, блоки css подключаются в зависимости от размеров окна, media queries
-=MASTER=-
Советую просто взять и пройти курс по CSS https://www.youtube.com/playlist?list=PL026CCEB5125879C2
Chupakaber
> при помощи js фреймворка jquery
Добавим троллизма .
если javascript итак связано с html ,
то зачем дополнительная библиотека jquery цель которой связать html+javascript ?
логический вывод— jquery не нужна , а те кто используют jquery - это нубы и программинг в плохом тоне. тем более что веб вы тут за программирование не держите и поливаете говном - быддле-коддэ, несерьёзно,непрограммирование и тд
Rikk
Использовать библиотеку, упрощающую разработку != программировать в плохом тоне, так что вывод не логический.
Почему, когда в CSS делает допустим ширину элемента width: 100%, а так же добавляешь марджин, то этот элемент слева сверху как бы отступает, а справа снизу улетает за родителя? То есть, если ты делаешь и слева и справа марджин 10%, то, что бы реальная ширина блока была корректна, тебе нужно её сделать width: 80%, то есть минус два марджина, слева и справа...
То есть как бы CSS сначала берёт всю ширину родителя, а потом уже отступает от краёв, конечно же вылезая из родительского элемента... Галимое поведение, нет, что бы сначала вычислить размеры своего frame-а с учётом всех марджинов и падингов, а потом уже, глядя что я требую ему растянуться на всю ширину - растянутся на всю ширину корретного фрейма
u960
> но зачем тебе margin?
ну как зачем, допустим хочу вкорячить какую-то таблицу на весь экран с отступами по по краям экрана. Или ты предлагаешь паддинг в сверху использовать вместо марджина внутри? )
u960
> я ничего не понял без картинки
Ну вот смотри:
получаю это:
Ну спрашивает и с какого у меня полосы прокрутки вылезли? Я же просил width: 100%, а получилось больше 100. То есть когда марджин добавляешь, он тупо сдвигает всё это дело нейпоми куда, причём снизу ещё если прокрутить видно эту жёлтую полосу, а справа - нет.
Всё, в топку, пойду всё таки видео уроки по CSS послушаю )))
-=MASTER=-
Нахрена везде position: absolute; добавил?
body { padding: 0; margin: 0; } .main { outline: 0; padding: 50px 0px 0px 50px; margin: 0; border: 0; /*overflow: hidden;*/ left: 0; right: 0; top: 0; bottom: 0; background: yellow; } .demo { margin: 0px; width: 100%; height: 100%; background: lightpink; }
<body> <div class="main"> body <div class="demo">div</div> </div> </body>
MrShoor
> Нахрена везде position: absolute; добавил?
да потому что после QML не привычно, что всё время layout-ы какие-то за тебя всё выравнивают, по этому привычней всё в абсолютах )
Кстати, твой пример не работает:
Я привык так, и мне кажется это реально удобным, что ты элементы выравниваешь по parent-у (хотя можешь и по любому другому), допустим вот пример QML:
Rectangle { id: parent width: 500 height: 500 color: "lightblue" Text { text: "parent" } Rectangle { id: child anchors.fill: parent //значит заполнить всего парента anchors.margins: 50 //заполнить то заполнить, но сделать отступ по всем сторонам... color: "red" Text { text: "child" } Text { anchors.centerIn: child text: "QML" font.pixelSize: 30 } } }
в итоге я получаю нормальный квадрат в квадрате:
а с HTML-ём начинаются какие-то танцы с бубмном... И почему браузеры не поддерживают QML, эта штука в сто раз круче...
-=MASTER=-
Что конкретно вы хотите получить?
Пример который вам предоставил MrShoor работает. Возможно, он просто вас не понял. В его примере padding настроен только сверху и справа. Можете сами добавить снизу и слева или заменить строчку padding: 50px 0px 0px 50px; на padding: 50px;.
Если вы хотите чтобы ваш контейнер всегда был по центру, то можно указать margin: auto для него, а дальше менять ширину этого контейнера.
Flyasd1
> В его примере padding настроен только сверху и справа.
Да я вижу. Просто во-первых, что бы получит квадрат в квадрате, нужно вдобавок убрать текст из main-а ("body"), ну и паддинг везде по 50 поставить + ещё поставить position: absolute в main.
Но паддинг мне не нужен, я не хочу в родительском элементе указывать всем потомкам, мол вы все будете теперь с паддингом жить, я хочу в потомках сам выбирать, с каким отступом размещать, для этого есть марджин, поведение которого весьма странно, о чём я и возмутился )
Я margin хотел использовать только для того, что бы не писать 4 строки (left,right,top,bottom) вместо одной, то есть что бы просто написать: margin: 50px и это означало бы, что отступ по всем сторона 50 пикселей чёрт возьми, но оно так не работает.
Работает так: (но длинная запись)
.parent { position: relative; width: 100vw; height: 100vh; background-color: blue; } .child { position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; background-color: yellow; }
В общем, HTML/CSS - это не языки программирования/разметки, это откровенное дерьмо динозавра. Этим наверное было удобно пользоваться, когда люди не знали ножей и топоров и ху...ём говядину рубили ))) Модераторы, удаляйте все эти темы левые мои. Надоело хрень всякую тут обсуждать.
u960
> нарисуй что в итоге хочешь получить
да..там вопрос уже давно не осталось.
Теперь не могу уловить, как поймать событие opacity changed в CSS?
В общем, по клику на одну финтифлюшку, меняю прозрачность элемента так:
function changeOpacity(element_id, value) { var obj = document.getElementById(element_id); if (obj) { obj.style.opacity = value; } }
Id у элемента "content".
Пытаюсь как-то поймать этот состояние/событие, пишу
#content.show { ... }
хочу поймать изменение opacity по аналогии с content:hover, собственно как это сделать?
P.S.: а вообще, из дважа скрипта можно элементу (div-у тому же) послать какой-то кастомный мессаг, что бы в CSS его отловить и что-то там подрихтовать?
-=MASTER=-
> margin
box-sizing: border-box помог бы, думаю.
> opacity changed
А нельзя просто класс накинуть, в котором и opacity, и всё остальное?
-=MASTER=-
> В общем, HTML/CSS - это не языки программирования/разметки, это откровенное
> дерьмо динозавра.
-=MASTER=-
> Модераторы, удаляйте все эти темы левые мои. Надоело хрень всякую
вы самозатроллились.
это было бы весьма смешно если бы не было бы так грустно.
-=MASTER=-
> хочу поймать изменение opacity по аналогии с content:hover, собственно как это
> сделать?
Ты же сам состояние opacity меняешь. И сам не можешь поймать это изменение? Ну ок, давай тебе подскажу:
function changeOpacity(element_id, value) { var obj = document.getElementById(element_id); if (obj) { if (obj.style.opacity != value) { obj.style.opacity = value; //ловить тут } } }
Тема в архиве.