Перейти к содержанию

CSS


Onore

Рекомендуемые сообщения

Как в css задать размер обьекта равное размеру блока?

Screenshot_2.png1) Этот обьект

2) Этот блок

Ссылка на комментарий
Поделиться на другие сайты

<div>

заменяется на 

<span>

 

Ссылка на комментарий
Поделиться на другие сайты

.sliderA {
    width: 400px;
    height: 250px;
    border: 1px solid #888;
    position: relative;
    text-align: center;
}

Вот весь css код обьекта

Ссылка на комментарий
Поделиться на другие сайты

Только что, Onore сказал:

.sliderA {
    width: 400px;
    height: 250px;
    border: 1px solid #888;
    position: relative;
    text-align: center;
}

Вот весь css код обьекта

width: 400px;

лишнее

Ссылка на комментарий
Поделиться на другие сайты

Ещё один вопрос, как убрать это пустое пространство ниже?

Screenshot_1.png

Ссылка на комментарий
Поделиться на другие сайты

ol.ipsList_reset.cForumList {
    top: -11px;
    position: relative;
}

добавить в custom.css

---->  67574848.png

Ссылка на комментарий
Поделиться на другие сайты

отсюда

.sliderA {
    width: 400px;
    height: 250px;
    border: 1px solid #888;
    position: relative;
    text-align: center;
}

убираем:

   border: 1px solid #888;

тот код удалить тогда

Ссылка на комментарий
Поделиться на другие сайты

Как поднять кнопки выше и растянуть слайдер до размеров блока? И убрать это пустое место в блоке под слайдером?

Ахтунг! Длинный код!

Спойлер

.wrapper {
	height: 250px;
	position: relative;
	width: 700px;
}

.slider {
	background-color: #ddd;
	height: inherit;
	overflow: hidden;
	position: relative;
	width: inherit;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.wrapper > input {
	display: none;
}

.slides {
	height: inherit;
	position: absolute;
	width: inherit;
}

.slide1 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); }
.slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }

.wrapper .controls {
	left: 50%;
	position: absolute;
}

.wrapper label {
	cursor: pointer;
	display: inline-block;
	height: 8px;
	margin: 25px 12px 0 16px;
	position: relative;
	width: 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

.wrapper label:after {
	border: 2px solid #ddd;
	content: " ";
	display: block;
	height: 12px;
	left: -4px;
	position: absolute;
	top: -4px;
	width: 12px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

.wrapper label {
	cursor: pointer;
	display: inline-block;
	height: 8px;
	margin: 25px 12px 0 16px;
	position: relative;
	width: 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: background ease-in-out .5s;
	-moz-transition: background ease-in-out .5s;
	-o-transition: background ease-in-out .5s;
	transition: background ease-in-out .5s;
}

.wrapper label:hover, 
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
	background: #ddd;
}

.slides {
	height: inherit;
	opacity: 0;
	position: absolute;
	width: inherit;
	z-index: 0;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
	transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}

#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
	opacity: 1;
	z-index: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

 

Пока что всё это выглядит так

Screenshot_2.png

Ссылка на комментарий
Поделиться на другие сайты

.wrapper {
    height: 250px;
    position: relative;
    width: 1053px;
}

.wrapper .controls {
    left: 44%;
    position: absolute;
    margin-top: -45px;
    z-index: 9999;
}

 

Ссылка на комментарий
Поделиться на другие сайты

.wrapper {
    height: 250px;
    position: relative;
    width: 1053px;
    margin-bottom: -9px;
}

 

Ссылка на комментарий
Поделиться на другие сайты

Как сделать что бы слайды переключались?

Ссылка на комментарий
Поделиться на другие сайты

3 минуты назад, Onore сказал:

Как сделать что бы слайды переключались?

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

Ссылка на комментарий
Поделиться на другие сайты

Хорошо, последний вопрос. В закрытых темах рядом с редактором есть такая строчка:

12.png

Как сделать так что бы это было во всех темах а не только в закрытых, но с другим текстом конечно же.

Ссылка на комментарий
Поделиться на другие сайты

Всё, спасибо большое WOLF, я и сам нашёл)

Ссылка на комментарий
Поделиться на другие сайты

в шаблоне commentTemplate

перед строчкой:

<div class='ipsComposeArea ipsComposeArea_withPhoto ipsClearfix ipsContained'>

вставить:

<div class="blabla" style="margin-left: 75px;position: relative;">текст</div>

 

Ссылка на комментарий
Поделиться на другие сайты

Хех, ещё один вопрос появился)

Как сюда добавить код? После чего его вставлять я не могу найти.

Screenshot_1.png

Ссылка на комментарий
Поделиться на другие сайты

У меня возникла проблема с маштабированием в слайдере.

Вот нормальный маштаб

Screenshot_1.png

А вот если отдалить страницу

Screenshot_2.png

Как это исправить?

Ссылка на комментарий
Поделиться на другие сайты

15 часов назад, Onore сказал:

У меня возникла проблема с маштабированием в слайдере.

Вот нормальный маштаб

Screenshot_1.png

А вот если отдалить страницу

Screenshot_2.png

Как это исправить?

никак, либо фиксируете ширину форума либо все будет изменяться

Ссылка на комментарий
Поделиться на другие сайты

Как зафиксировать ширину форума?

И.. кхм, не могли бы вы помочь мне ещё и с этим? С меня как обычно море репутации.

Ссылка на комментарий
Поделиться на другие сайты

16 минут назад, Onore сказал:

Как зафиксировать ширину форума?

И.. кхм, не могли бы вы помочь мне ещё и с этим? С меня как обычно море репутации.

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

Ссылка на комментарий
Поделиться на другие сайты

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...