» Вопросы по CSS

Krakozavr
если в странице нет уже такого механизма - нет.
ед вариант при этом - выдавать другую страницу через свой сайт (как прокси, через скрипты) - при этом можно вставить в код что угодно. но и тут могут быть свои особенности.

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



суть в том, что сайт позволяет редактировать только стили элементов, но не положение-добавление html

задача: пропихнуть левый блок до верха мелких... (в html-е он нижний)
т.е. в коде страницы:

<div> мелкий1
<div> мелкий2
<div> мелкий3
....... 25 штук
<div> большой

и естественно большой снизу оказывается, а надо шоб как на картинке...
( position:absolute; конечно выход, но чёта как-то сложно там потом попасть чтоб не перекрывало)

HeT BonpocoB

Цитата:

подскажите, возможно ли соорудить подбную конструкцию с div-блоками?

да. смотрите на float, при правильной ширине все выставится как нужно.
http://www.w3schools.com/css/css_float.asp


Цитата:

( position:absolute; конечно выход, но чёта как-то сложно там потом попасть чтоб не перекрывало)

общий родитель есть?

Цитата:

я полный нуб в css...

Надо учить, рекомендую htmlbook.ru/css/

Цитата:

возможно ли соорудить подбную конструкцию с div-блоками?

да

Цитата:

сайт позволяет редактировать только стили элементов

Если HTML код не редактируем, то надо освоить вложенные и дочерние селекторы, а также классы типа :nth-child


Цитата:

чтоб не перекрывало

надо первому div-у приделать :before плавающий с размерами последнего. Что делать с остальными подсказать не могу, т.к. зависит от содержания блоков. Если будет просто текст ступенчато обтекающий левый блок, то задача решена. Если надо показать блоки с рамками, то придётся отказаться от адаптивности и рассчитывать на фиксированную ширину, тогда остальные блоки тоже следует сделать плавающими, но с предопределённой шириной.

Mavrikii
Цитата:

общий родитель есть?

общий родитель есть у всех блоков, отдельно у мелких нету...
так-же есть "промежуточный" див, отделяющий мелкие от большого...
Цитата:

да. смотрите на float, при правильной ширине все выставится как нужно.

при выставлении float мелким они начинают "обтекать" сами себя и "распадаются" в горизонталь
пробовал каждому:
float:right;
clear:right;
тогда они сами становятся как надо, НО большой пролезает только до высоты нижнего мелкого...
тут что-то сложнее...


Цитата:

Если надо показать блоки с рамками

не,рамки не нужны...
в мелких блоках ещё по паре табличных блоков только с текстом...

ладно, покурю по наводкам^..

Лучше покажите страницу, будет проще понять что хотите сделать, и придумать более конкретно как это реализовать. Только пусть будет не много кода, а то соображать тяжело.

Цитата:

Лучше покажите страницу,

на странице там чёртногусломит... вот попытался изобразить принцип в симуляторе

https://jsfiddle.net/vopros/8tj2acr1/2/

(не уверен что ссылка для всех сработает, но вроде должна)

кароче надо блок с логом ру-борды продвинуть вверх используя только css
всё что я смог это позишен-абсолют туда его пририсовать, но это как-то самому не нравится решение....
(стили я естественно перенёс на все (без цветов, бордеров и т.д.), но вроде принцип понятен, не? )

Кажись я лихо сбрехал на счёт плаванья, так не получится.
Можно позиционировать нижний блок, но он не будет влиять на другие блоки, и надо что-то делать с остальными, либо поля им задать, либо ширину и позиционирование.
https://jsfiddle.net/pjzxs14p/
-последнему блоку назначена ширина
-остальным блокам назначено левое поле равное ширине последнего

stupom
ну тут^ вся "фишка" опять таки в position: absolute;
так, понятное дело, можно прилепить при любых размерах что угодно...
я думал может есть способ его впихнуть туда "законно", чтоб нижнему контенту потом не подбирать тоже все отступы вручную...
вроде кажется так просто, а никак
счас пробую с berore-after прилепить, тоже как-то всё криво получается...

С плаваньем вроде никак. Плавающий блок может быть только прижат влево или в право, тогда остальной контент будет его обтекать. Но плавать будет только на уровне того контента, где он появляется в коде. Можно его сместить вверх-вниз, но это кажется не будет изменять форму обтекания, да и нет способа сделать это адаптивно.

Если есть доступ к редактированию JavaScript, то можно перенести блок в начало, тогда будет хорошо плавать и обтекаться

Добавлено:
Можно так https://jsfiddle.net/pjzxs14p/1/ , но надо согласовывать размер :before с последним блоком.

HeT BonpocoB
как вариант с позиционированием, и раз есть родитель нормальный - https://jsfiddle.net/0m8zhj3t/
но тут есть особенность - ширину лучше задавать (или проверять), чтобы не было перекрытия. и высота родителя будет определяться правыми блоками - что может вызвать некоторые неудобства. в такой ситуации блоки справа можно снова сделать float:right, не забывая влепить очистку через clear: right в том же классе

http://bootstrap-3.ru/css.php#grid-example-basic
как вариант

всех с Днём Победы!

ещё такой вопрос возник... по :nth-child , nth-of-type и т.д.

в html-е имеется куча "сложных" одинаковых див-блоков (с десятком чайлдов,подчайлдов ....) , их можно добавлять-удалять, т.е. их число и последовательность не известна допустим....

можно ли внутри этих "сложных" блоков некоторым под-чайлдам автоматически изменить к примеру float , через один?
или их придётся "зеркалить" в самом html-коде вручную???

Посмотрите http://htmlbook.ru/css/nth-child табличку с примерами, в принципе можно как угодно, только если угодно будет в некоторой линейной форме выразить счётчик для child-ов.
Через один :nth-child(2n) или :nth-child(2n+1)

stupom, не, это я видел... уже кучу перечитал всего...
я имею в виду можно ли сие применить не ко ксяким там li, p... а к внутри конкретных классов

вот к примеру блоки:

(заменил код на jsfiddle)

блоки на странице идут парами (горизонтально)
хотелось к .thumbnail применить float:right через один, ну чтоб ини выглядели "зеркально"

html тоже можно подредактировать в этом случае.... но чтоб визуально не пострадало, там всякие картинки, эффекты...

Хреново понял, что хотите, но в общем селектор извращать можно как угодно.

TAG.ИМЯ_КЛАССА:nth-chil(...) - Сперва пишите тег, через точку имя класса и далее псевдо-класс. Тег можно не писать, хотя я считаю, что лучше так не выпендриваться, просто для сохранения контроля над проектом.

stupom

Цитата:

Хреново понял

ну вот конструкция: https://jsfiddle.net/vopros/kgw7vnmj/

нужно чтоб аватарка на втором блоке была слева от текста, (а на первом соответственно справа) и так на всех...

Код: tag:nth-child(odd) > avatar { float: right; }
tag:nth-child(even) > avatar { float: left; }

воу... вроде работает (в эмуляторе пока тока)
т.е. вот так правильно для конкретного^ примера?

Код:
div:nth-child(odd) > .thumbnail { float: right; }
div:nth-child(even) > .thumbnail { float: left; }

Селектор1 > Селектор2 - выборка Селектор2, которые являются дочерними элементами в Селектор1
Селектор1 Селектор2 - то же, но все потомки.

Если не работало с пробелом вместо > значит была ещё ошибка. Кстати, > не работает в IE7.

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

Код: .video_id:nth-child(even) > .thumbnail { float: left; }

добавь в закладки http://prgssr.ru/development/polnoe-rukovodstvo-po-psevdoklassam-i-psevdoelementam.html


Цитата:

как всё же правильно синтаксически, или как работает так и оставить?

оба варианта правильные, но я бы взял последний

вчера два часа ломал голову на очередным кроссвордом с nth-child
(решил, но не напрямую... а хотелось бы узнать решение:

допустим обычная таблица, строки <tr>
как с помощью "чайлдов" "выделить" все строки, кроме первой и последней?

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

Код: <style>
table tr td { background-color: red; width: 10px; height: 3px; }
table tr:nth-child(n+2):nth-child(-n+9) td { background-color: blue; }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>

stupom
ага, вроде фурычит... но! хотя всёж (-n+9) не универсальный вариант
Цитата:

и считать с конца тоже не умеют.

ну есть же nth-last-child() я вот их в парре вчера крутил-крутил... так и не хватило логического мЫшления... хотя вот всё время чувствовал что-то как-то можно!

Цитата:

nth-last-child

-точно, чёт я сбрехал.
тогда интервал можно сделать

Код: :nth-child(...):nth-last-child(...) { }

да. вроде вот так работает...

table tr:nth-child(n+2):nth-last-child(n+2) td { background-color: blue; }


я вчера просто с синтаксисом профтыкался... я этот вариант и крутил, но не так прописывал....

Код: tr:not(:first-child):not(:last-child) {
color: red;
}

Здравствуйте прошу помощи.Нужен скрипт.Суть- калькулятор расчёта стоимости услуг.1 переменная+2 переменная * 3 переменная * 4 переменная* 5 переменная=результат.
<form action="<?_SERVER['PHP_SELF']?>"method="post">
Стоимость товара:<br />
<input type="text" name="cost of goods"><br />
Стоимость доставки:<br />
<input type="text" name="Shipping"><br />
<imput typy="hidden" name="Курс валют 1" value="0.17"><br />
<imput typy="hidden" name="Процент за услуги" value="5"><br />
<imput typy="hidden" name="Курс валют 1" value="26.6"><br />
<input type="submit" value="Считать"/>
</form>

Цитата:

калькулятор расчёта стоимости

- ошиблись темой