Jump to content

JoyStick

Newbie
  • Posts

    14
  • Joined

  • Last visited

Everything posted by JoyStick

  1. Есть меню, нужно сверстать что бы была картинка постом ссылка Пример, картинка_ссылка картинка_ссылка 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> Вот что у меня есть, но проблема в том, что ссылка налазит на картинку, а нужно что бы ссылка шла после картинки
  2. Ни кто не может помочь???
  3. Короче говоря, нашол в интернете модальное окно, то которое мне нужно... все туда свое повставлял но есть проблема....Нужно, что бы если человек его закрыл, то оно больше не появлялось...Ну и скажем оно появилось там например через неделю... И нашол еще одно окно, и суть его в том что оно запускается когда человек отводит мышку с границ страницы... Люди добрые помогите сделать так что бы оно сохраняло куки и выскакивало тогда когда человек отводит мышку с границ страницы.... Собственно мое модальное окно <!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. За ранее благодарен....
  4. для начала стоит выложить css)
  5. JoyStick

    Hover

    так что ни у кого нет никаких мыслей?
  6. JoyStick

    Hover

    это вариант... и по идее они не должны сдвигаться...
  7. JoyStick

    Hover

    может быть, но нужно обойтись без списка... по другому ни как? мну или примерно как со списком это выглядит.
  8. JoyStick

    Hover

    хм...не прокатит, тут вся фишка в том, что картинки растягиваются на всю ширину... списком точно не прокатит... тут нуна правильно ховер втулить... а вот как в этом вопрос...
  9. JoyStick

    Hover

    почти так) спс) вот только при увеличении нужно что бы соседние картинки не двигались... при увеличении она как бы вылазила вперед...
  10. JoyStick

    Hover

    Суть проблемы такова, нужно правильно поставить 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; } Проблема в том, что при наведении увеличиваются все картинки одновременно... Нужно что бы каждая отдельно и при этом остальные не двигались...
  11. нужно именно разного размера
  12. уверенны? нужно что бы картинки отображались разного размера и растягивались(резиновый), и что бы картинки на всю ширину тянулись... и центрирование было именно по центру картинки, т.е. img { vertical-align:middle; } вот что есть, но нужно сделать так что бы расстояние с лева и с права было одинаковое, т.е. картинки сами по всей строке растягивались.
  13. Короче говоря, натолкните на мысль, как сделать отображение картинок как в гугле Нуна реализовать все на хтмл+ксс.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy