JoyStick
-
Posts
14 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by JoyStick
-
Есть меню, нужно сверстать что бы была картинка постом ссылка Пример, картинка_ссылка картинка_ссылка a.menu { display:block; font: 14pt sans-serif; background-position: left bottom; background-image: url(images/icon-folder.png); background-repeat: no-repeat; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; margin: 0 0 0 10px; } <a href="#" class="menu">Главная страница</a> Вот что у меня есть, но проблема в том, что ссылка налазит на картинку, а нужно что бы ссылка шла после картинки
-
Ни кто не может помочь???
-
Короче говоря, нашол в интернете модальное окно, то которое мне нужно... все туда свое повставлял но есть проблема....Нужно, что бы если человек его закрыл, то оно больше не появлялось...Ну и скажем оно появилось там например через неделю... И нашол еще одно окно, и суть его в том что оно запускается когда человек отводит мышку с границ страницы... Люди добрые помогите сделать так что бы оно сохраняло куки и выскакивало тогда когда человек отводит мышку с границ страницы.... Собственно мое модальное окно <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Демо</title> <style> body { font-family:verdana; font-size:15px; } a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#aaaaaa; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #boxes #dialog2 { background:url(images/notice.png) no-repeat 0 0 transparent; width:450px; height:350px; padding:50px 0 20px 0; } </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.simplemodal.js"></script> <script> $(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> </head> <body> <ul> <li><a href="#dialog2" name="modal">Модальное окно</a></li> </ul> <div id="boxes"> <!-- Начало красивого стикера --> <div id="dialog2" class="window"> <input type="image" src="images/x.png" value="Закрыть окно" class="close" style="float: right; margin: -17px 30px 0 0;"/> <center> А Вы не забыли получить простую и <br>быструю технику устранения страхов<br> и других психологических проблем<br> в благодарность за подписку на любую<br> из рассылок?<br><br> <a href="maillist.php" class="link">узнать о рассылках</a><br> <a href="bonus.php" class="link">узнать о бонусе</a><br> <!-- Макска, которая затемняет весь экран --> <div id="mask"></div> </div></body> </html> И код вызова, что бы оно выскакивало по отведению мышки... $(document).ready(function() { $(document).mousemove(function(e) { if(e.pageY <= 5) { // Launch MODAL BOX $('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close}); } }); }); function modalOpen (dialog) { dialog.overlay.fadeIn('fast', function () { dialog.container.fadeIn('fast', function () { dialog.data.hide().slideDown('fast'); }); }); } function simplemodal_close (dialog) { dialog.data.fadeOut('fast', function () { dialog.container.hide('fast', function () { dialog.overlay.slideUp('fast', function () { $.modal.close(); }); }); }); } Пробовал сам связать, но увы не получилось из-за не знания jquery. За ранее благодарен....
-
для начала стоит выложить css)
-
так что ни у кого нет никаких мыслей?
-
это вариант... и по идее они не должны сдвигаться...
-
может быть, но нужно обойтись без списка... по другому ни как? мну или примерно как со списком это выглядит.
-
хм...не прокатит, тут вся фишка в том, что картинки растягиваются на всю ширину... списком точно не прокатит... тут нуна правильно ховер втулить... а вот как в этом вопрос...
-
почти так) спс) вот только при увеличении нужно что бы соседние картинки не двигались... при увеличении она как бы вылазила вперед...
-
Суть проблемы такова, нужно правильно поставить hover. Вот код html <body> <div id="images"> <img src="images/6.jpg" width="130" height="120" /> <img src="images/7.jpg" width="120" height="140" /> <img src="images/8.jpg" width="130" height="120" /> <img src="images/2.jpg" width="120" height="140" /> <img src="images/5.jpg" width="130" height="120" /> <img src="images/1.jpg" width="120" height="140" /> <img src="images/2.jpg" width="130" height="120" /> <img src="images/1.jpg" width="120" height="140" /> <img src="images/5.jpg" width="130" height="120" /> <img src="images/3.jpg" width="120" height="140" /> <img src="images/8.jpg" width="130" height="120" /> <img src="images/7.jpg" width="120" height="140" /> <img src="images/5.jpg" width="130" height="120" /> <img src="images/8.jpg" width="120" height="140" /> <img src="images/2.jpg" width="120" height="140" /> <img src="images/5.jpg" width="130" height="120" /> <img src="images/1.jpg" width="120" height="140" /> <img src="images/3.jpg" width="130" height="120" /> <img src="images/4.jpg" width="120" height="140" /> <img src="images/6.jpg" width="130" height="120" /> <img src="images/7.jpg" width="120" height="140" /> <img src="images/8.jpg" width="130" height="120" /> <img src="images/2.jpg" width="120" height="140" /> <img src="images/5.jpg" width="130" height="120" /> <img src="images/1.jpg" width="120" height="140" /> <img src="images/2.jpg" width="130" height="120" /> <img src="images/5.jpg" width="130" height="120" /> </div> </body> CSS #images { text-align: justify; } #images img { max-height: 200px; max-width: 200px; margin:1px; vertical-align: middle; border:2px solid #fff; position:relative; z-index:10; } #images:hover img { height: 250px; width: 250px; margin:1px; vertical-align: middle; border:2px solid #fff; position:relative; left:0; top:0; z-index:20; } Проблема в том, что при наведении увеличиваются все картинки одновременно... Нужно что бы каждая отдельно и при этом остальные не двигались...
-
именно)) спс)
-
нужно именно разного размера
-
уверенны? нужно что бы картинки отображались разного размера и растягивались(резиновый), и что бы картинки на всю ширину тянулись... и центрирование было именно по центру картинки, т.е. img { vertical-align:middle; } вот что есть, но нужно сделать так что бы расстояние с лева и с права было одинаковое, т.е. картинки сами по всей строке растягивались.
-
Короче говоря, натолкните на мысль, как сделать отображение картинок как в гугле Нуна реализовать все на хтмл+ксс.