Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.01.2013, 13:07   #1
m0rt
 
Регистрация: 01.03.2011
Сообщений: 8
По умолчанию Проблема с CSS (CSS Slider)

Есть такой вот каркас:
Код:
<div class="box">
	<div class="border">
        <div class="slide">
        </div>
    </div>
    
    <div class="box_nav">
		<a href="#slideone"><input type="radio" name="button" class="button1"  /></a>
        <a href="#slidetwo"><input type="radio" name="button" class="button2"  /></a>
        <a href="#slidethree"><input type="radio" name="button" class="button3"  /></a>
    </div>
</div>
И вот такой css:
Код:
.box {
	width:200px;
	height:250px;
	background-color:#333;
	margin:100px auto;
	overflow:hidden;
}

.border {
	width:190px;
	height:190px;
	overflow:hidden;
	border:5px #030 solid;
	border-style:inset;
	position:relative;
}

.slide {
	width:600px;
	height:200px;
	background-image:url(slide.png);
	position:absolute;
	left:-200px;
}
Все это дело имеет такой вот вид:


Вопрос следующий, каким образом по нажатию на радио, выполнялось смещение .slide { left:значение; } ? Или хоть подскажите в какую сторону копать, уже все перечитал, а понять как связать 2 объекта с помощью css не понимаю.
m0rt вне форума Ответить с цитированием
Старый 28.01.2013, 13:29   #2
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

если подключен JQuery
Код:
<input type="radio" onchange="$('.slide').css('left' , '200px');" />
если не подключен подключи:
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
ну а если вы настолько суровы что не хотите подключать лишних скриптов то можно и без этой либы обойтись. тогда вам надо слайдеру дать идентификатор
Код:
<div class="slide" id="slide">
ну и в чекете написать как то так:
Код:
<input type="radio" onchange="document.getElementById('slide').style['left']=200+'px';" />
Писано по д'Эльфийски

Последний раз редактировалось Лубышев; 28.01.2013 в 13:40.
Лубышев вне форума Ответить с цитированием
Старый 28.01.2013, 13:58   #3
m0rt
 
Регистрация: 01.03.2011
Сообщений: 8
По умолчанию

Спасибо огромное. То, что нужно!

Вот только хотел спросить, это ведь все-равно js, а не css. На чистом css, я так понимаю того же сделать не получиться?
m0rt вне форума Ответить с цитированием
Старый 28.01.2013, 14:05   #4
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,054
По умолчанию

нет не получится. чисто теоретически конечно можно попробовать (изподвыподверта). но по моим данным дочерний элемент не может влиять на родителя - только наоборот
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Старый 28.01.2013, 14:53   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Если слайды запихать в лейбл, то можно через css:checked
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с CSS wetdog HTML и CSS 0 24.06.2012 18:49
Проблема с css htc_storm HTML и CSS 1 29.05.2012 11:08
Проблема с CSS vXXv Помощь студентам 0 25.01.2010 16:55
Проблема с CSS COKOJIOB HTML и CSS 13 05.08.2009 12:47