Тёмная тема
-=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;
//ловить тут
}
}
}Тема в архиве.