Roomas
-
Posts
12 -
Joined
-
Last visited
Roomas's Achievements
Explorer (1/14)
0
Reputation
-
Добрый всем денек! Пересмотрел кучу вариантов по созданию слайдеров для контента, все они сильно запутанные, особенно для новичков, и вот решил собрать его самостоятельно и разобраться в этой штуке. Пока получается такой вариант, все переключается но контент стоит на месте: <body> <div id="slider"> <div id="content"> <div id="slide01"> <div id="slide02"> <div id="slide03"> <div id="slide-inner"> <div class="page" id="page1"><img src="img/exclusive_yachts_00.png"></div> <div class="page" id="page2"><img src="img/exclusive_yachts_01.png"></div> <div class="page" id="page3"><img src="img/exclusive_yachts_02.png"></div> </div> </div> </div> </div> </div> <ul id="nav"> <li class="button" id="button1"><a href="#content-inner-1">1</a></li> <li class="button" id="button2"><a href="#content-inner-2">2</a></li> <li class="button" id="button3"><a href="#content-inner-3">3</a></li> </ul> </div> </body> ol, ul { list-style: none; } #slider { width: 900px; } #content { background-color: #3CC; width: 900px; overflow: hidden; height: 400px; } #slide-inner { width: 2700px; height: 400px; } #slide-inner img { width: 900px; height: auto; } #slide01:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: 0px; } #slide02:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -900px; } #slide03:target #slider-inner{ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; margin-left: -1800px; } .page { } #nav { } #nav li{ float: left; margin-right: 10px; background-color: #66F; } #nav li a{ display: block; padding: 5px; color: #FFF; text-decoration: none; font-family: AG_Helvetica, sans-serif, "trebuchet MS"; } #nav li a:hover{ } но почему то оно не пашет... может кто то сможет помочь?
-
Получилось реализовать задумку через @media screen and (max-width: 800px) {} Это будет можно будет, в скором времени, посмотреть здесь http://ana-art.ru
-
Всем доброго дня! Друзья есть такой код... <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> <style> #div_a{ background-color: #0CF; width: 100%; max-width: 600px; height: 500px; margin-left:auto; margin-right:auto; } #div_1{ background-color:#39F; width:; width: 100%; min-width: 400px; height: 200px; float: left; } #div_2{ background-color:#325; width: 200px; height: 200px; float: left; } </style> </head> <body> <div id="div_a"> <div id="div_1"></div> <div id="div_2"></div> </div> </body> </html> Надо чтобы div 1 подвинул div 2, а когда окно сожмется браузером то div 1 растянулся на всю длинну div а, а див 2 спрыгнул вниз. Есть мысли?
-
как-то так http://jsfiddle.net/AgDXm/3/ еще чуток упростил Вот так получилось: CODE: <div class="gamesSlot"> <div class="game1"> <a href="#"><img src= "images/games/screens/game.png"> <span class="select"></span> </a> </div> </div> CSS .gamesSlot { height: 146px; width: 147px; margin: 10px; border: none; } .game1 { height: 146px; width: 147px; background-repeat: no-repeat; border: none; } .game1 a{ display: block; height: 146px; width: 147px; position:relative; } .game1 img { display: block; height: 146px; width: 147px; position:relative; border: none; } .select{ display: block; visibility: hidden; position: absolute; top: 0; left: 0; height: 146px; width: 147px; background-image: url(../../images/games/selecte.png); background-repeat: no-repeat; background-position: 0px 0px; border: none; } a:hover .select{ visibility: visible; } ЗАЕ.ПИСЬ! РАБОТАЕТ! Благо дарю друже!
-
а там именно картинка? Т.е. есть какое-то изображение на ней или это будет какой-то эффект для главного изображения? И еще, какие браузеры должны это понимать? Может это можно средствами одного css сделать? это картинка, над ней должна высвечиваться картинка со свечением, я думаю что можно конечно и border сделать с блюром, но хотелось бы конечно понять как сделать изображением...
-
Поменять местами display. Вот так http://jsfiddle.net/AgDXm/ Огромная благодарность. Разобрался только вот еще один вопрос: как сделать так, чтобы основная картинка была в коде, а картинка которая при наведении выскакивает в цсс?
-
С помощью z не могу ничего предпринять... проще объяснить так: есть картинка, надо чтобы при наведение над этой картинкой появлялась еще одна прозрачная png_шка! как это сделать проще всего?
-
Здравствуйте! Ребятушки такая вот дума! CODE <div class="class"> <div class="class2"> <a href="#"><img src= "images.png"></a> </div> </div> — CSS .class { height: 146px; width: 147px; margin: 5px; } .class2 { height: 146px; width: 147px; } .class2 :hover { background-image: url(select.png); height: 146px; width: 147px; } — Надо что бы изображение "выделитель" при наведение было с верху основного изображения, как сделать подскажите, если не трудно!
-
Благо дарю все получилось!
-
А это в начале кода он должен быть да?
-
Архив
-
Есть такой шаблон Моя ссылка Все замечательно но в мозиле и хроме нижняя картинка зависает на границе окна, что можно поделать с такой бедой, я уже зае..ся. Может еще будут какие то советы по верстке, высказывайте буду благо дарить!