Jump to content

CSS


Recommended Posts

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

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

Link to comment
Share on other sites

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

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

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

width: 400px;

лишнее

Link to comment
Share on other sites

отсюда

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

убираем:

   border: 1px solid #888;

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

Link to comment
Share on other sites

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

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

Спойлер

.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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

12.png

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

Link to comment
Share on other sites

в шаблоне commentTemplate

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

<div class='ipsComposeArea ipsComposeArea_withPhoto ipsClearfix ipsContained'>

вставить:

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

 

Link to comment
Share on other sites

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

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

Screenshot_1.png

Link to comment
Share on other sites

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

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

Screenshot_1.png

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

Screenshot_2.png

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

Link to comment
Share on other sites

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

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

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

Screenshot_1.png

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

Screenshot_2.png

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...