Jump to content

morohon

Newbie
 View Profile  See their activity

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Everything posted by morohon

  1. morohon
    не знаю. Мне просто удобно иметь один блок с id внутри которого блоки с class. Хотя может это потому, что я еще толком с js не сталкивался.
  2. morohon
    А почему лучше пользоваться классами, можете объяснить? Чем плохи id? Или это к тому, что id оставляется для js?
  3. morohon
    Увы не я писал эти часики. Я не разбираюсь в css, поэтому и обратился сюда за помощью
  4. morohon
    Здравствуйте, уважаемые форумчане. Кто может помочь увеличить размер цифр вот в этих часах: http://www.morohon.pusku.com/new_panel/clock/ Нужно чтобы они были во весь размер фона. Если не трудно, пожалуйста, помогите... Вот код часов: <!DOCTYPE html><html> <head> <meta charset="utf-8"/> <style type="text/css"> #clock{ width:500px; border-radius: 6px; } #clock .display{ text-align: center; padding: 50px 10px 10px; border-radius:6px; position:absolute; height: 110px; width:500px; } /*------------------------- Light color theme --------------------------*/ #clock.light{ background-color:#ffffffs; color:#272e38; } #clock.light:after{ box-shadow:0 4px 10px rgba(0,0,0,0.15); } #clock.light .digits div span{ background-color:#272e38; border-color:#272e38; } #clock.light .digits div.dots:before, #clock.light .digits div.dots:after{ background-color:#272e38; } #clock.light .display{ background-color:#dddddd; box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa; } /*------------------------- Dark color theme --------------------------*/ #clock.dark{ background-color:#272e38; color:#cacaca; } #clock.dark:after{ box-shadow:0 4px 10px rgba(0,0,0,0.3); } #clock.dark .digits div span{ background-color:#cacaca; border-color:#cacaca; } #clock.dark .alarm{ background:url('../img/alarm_dark.jpg'); } #clock.dark .display{ background-color:#0f1620; box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642; } #clock.dark .digits div.dots:before, #clock.dark .digits div.dots:after{ background-color:#cacaca; } /*------------------------- The Digits --------------------------*/ #clock .digits div{ text-align:left; position:relative; width: 28px; height:50px; display:inline-block; margin:0 4px; } #clock .digits div span{ opacity:0; position:absolute; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s; } #clock .digits div span:before, #clock .digits div span:after{ content:''; position:absolute; width:0; height:0; border:5px solid transparent; } #clock .digits .d1{ height:5px;width:16px;top:0;left:6px;} #clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} #clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} #clock .digits .d2{ height:5px;width:16px;top:24px;left:6px;} #clock .digits .d2:before{ border-width:3px 4px 2px;border-right-color:inherit;left:-8px;} #clock .digits .d2:after{ border-width:3px 4px 2px;border-left-color:inherit;right:-8px;} #clock .digits .d3{ height:5px;width:16px;top:48px;left:6px;} #clock .digits .d3:before{ border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;} #clock .digits .d3:after{ border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;} #clock .digits .d4{ width:5px;height:14px;top:7px;left:0;} #clock .digits .d4:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d4:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d5{ width:5px;height:14px;top:7px;right:0;} #clock .digits .d5:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d5:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} #clock .digits .d6{ width:5px;height:14px;top:32px;left:0;} #clock .digits .d6:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d6:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d7{ width:5px;height:14px;top:32px;right:0;} #clock .digits .d7:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d7:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} /* 1 */ #clock .digits div.one .d5, #clock .digits div.one .d7{ opacity:1; } /* 2 */ #clock .digits div.two .d1, #clock .digits div.two .d5, #clock .digits div.two .d2, #clock .digits div.two .d6, #clock .digits div.two .d3{ opacity:1; } /* 3 */ #clock .digits div.three .d1, #clock .digits div.three .d5, #clock .digits div.three .d2, #clock .digits div.three .d7, #clock .digits div.three .d3{ opacity:1; } /* 4 */ #clock .digits div.four .d5, #clock .digits div.four .d2, #clock .digits div.four .d4, #clock .digits div.four .d7{ opacity:1; } /* 5 */ #clock .digits div.five .d1, #clock .digits div.five .d2, #clock .digits div.five .d4, #clock .digits div.five .d3, #clock .digits div.five .d7{ opacity:1; } /* 6 */ #clock .digits div.six .d1, #clock .digits div.six .d2, #clock .digits div.six .d4, #clock .digits div.six .d3, #clock .digits div.six .d6, #clock .digits div.six .d7{ opacity:1; } /* 7 */ #clock .digits div.seven .d1, #clock .digits div.seven .d5, #clock .digits div.seven .d7{ opacity:1; } /* 8 */ #clock .digits div.eight .d1, #clock .digits div.eight .d2, #clock .digits div.eight .d3, #clock .digits div.eight .d4, #clock .digits div.eight .d5, #clock .digits div.eight .d6, #clock .digits div.eight .d7{ opacity:1; } /* 9 */ #clock .digits div.nine .d1, #clock .digits div.nine .d2, #clock .digits div.nine .d3, #clock .digits div.nine .d4, #clock .digits div.nine .d5, #clock .digits div.nine .d7{ opacity:1; } /* 0 */ #clock .digits div.zero .d1, #clock .digits div.zero .d3, #clock .digits div.zero .d4, #clock .digits div.zero .d5, #clock .digits div.zero .d6, #clock .digits div.zero .d7{ opacity:1; } /* The dots */ #clock .digits div.dots{ width:5px; } #clock .digits div.dots:before, #clock .digits div.dots:after{ width:5px; height:5px; content:''; position:absolute; left:0; top:14px; } #clock .digits div.dots:after{ top:34px; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> <script src="assets/js/script.js"></script> </head> <body> <div id="clock" class="light"> <div class="display" > <div class="digits"></div> </div> </div> </body></html>
  5. morohon
    Не могу понять, почему горизонтальные картинки при задании размера встают нормально, а вот вертикальные картинки почему-то становятся больше области просмотра. Где-то пикселей на 200, хотя такого размера им никто не задавал
  6. morohon
    Все еще актуально !
  7. morohon
    Не подскажите, относительно чего задавать размеры картинки. Они по идее лежат в li, т.е. нужно ориентироваться на размеры li. Но размеры li явно не заданы, пытался задать, получил очень плохую штуку. Пытался задать для div#rotator ul li img размеры, получаются слишком большие (если берешь 100% он ориентируется не на область браузера и выдает размер больше высоты области просмотра страницы и выходит бегунок) И еще маленький вопрос, если вы разбираетесь в js, подскажите, почему после переверстывания, у меня получилась небольшая заминка перед появлением первой картинки ( там идет просто белый экран на месте картинки (как будто у нее opacity 0). код html: <?php $count=count(glob($path.'/*.jpg'));?><div id="rotator"> <ul> <li class="snow"><img src="<?php echo $path.'/1.jpg'; ?>" alt="img-1" /></li> <?php for ($i=2;$i<=$count;$i++){ ?> <li class="snow2"><img src="<?php echo $path.'/'.$i.'.jpg'; ?>" alt="img<?php echo '-'.$i;?>" /></li> <?php } ?> </ul></div><div id="right"> <div class="logo"> <img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main"> </div> <div class="clock"> <?php include "clock/index.html"; ?> </div></div><div id="marquee"> <marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10" class="marq"> <span class="text"><?php echo $row['marquee'];?></span> </marquee></div>код css: div#rotator{ float:left; text-align: center; margin: 0 auto; height: 80%; display: table; width: 65%; } div#rotator ul{ margin: 0; padding: 0; list-style: none; display: table-cell; vertical-align: middle; } div#rotator ul li { display: none; } div#rotator ul li.show { z-index:500; display: block; } div#rotator ul li img { vertical-align: top; } div#right { position: absolute; right: 0px; width: 30%; height: 80%; } div#right .logo { width: 100%; height: 40%; } div#right .logo img { width: 70%; height: auto; margin: 0 auto; } div#right .clock{ width: 100%; height: 30%; margin: 20px auto; } #marquee .marq { position: absolute; bottom: 0; left: 0; right: 0; } #marquee .text { color: blue; font-size:95px; }И код js: function theRotator() { var time="<?php echo $time;?>"; $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); setInterval('rotate()',time); } function rotate() { var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { theRotator(); });Надеюсь я вам еще не надоел Ах да, код здесь: http://www.morohon.pusku.com/new_panel/
  8. morohon
    Вам огромное спасибо! Пойду все соединю воедино. Если что не пойму - обращусь. Спасибо еще раз огромное. И не только вам, а еще и ZverushkaОчень помогли
  9. morohon
    Только вопрос такой, если на эту верстку прикрепить этот ротатор изображений: <script type="text/javascript"> function theRotator() { var time="<?php echo $time;?>"; // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',time); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); // Прячем текущую картинку current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { // Запускаем слайдшоу theRotator(); }); </script>я пробовал в css убирать position: absolute, и выходило, что картпинка начинает постоянно опускаться вниз. Одна картинка в нужном месте появилась, другая ниже ее ( как список)
  10. morohon
    Див внутри которого список ulразмер картинки примерно ширина-70% высота - 80% Вот примерная схема: Да, нечто похожее. Картинка должна быть по центру div вне зависимости от того, вертикальная она или горизонтальная. Я в самом начале думал двигать картинку просто (наивно думая, что она не выйдет за границы div), но оказывается в html картинки выходят за границы div. Я очень слаб в css, поэтому и обратился сюда
  11. morohon
    У меня ротатор картинок завязан на списке ul. Никак его не могу убрать
  12. morohon
    Вот так сначала выглядит: А потом на очень короткий период, перед сменой картинки, картинка увеличивается до таких размеров:
  13. morohon
    В данный момент, код располагается здесь: http://www.morohon.pusku.com/panel2.ru/
  14. morohon
    Здравствуйте. Есть проблемы с наследованием. Не могу понять, что работает не так. Подскажите пожалуйста, если не затруднит. код представлен здесь: http://www.morohon.pusku.com/panel/ (там размеры изображения скачут) css body .main { width:100%; height:100%; } .main div.rotator{ float:left; max-width: 60%; max-height: 80%; } div.rotator ul{ position: relative; list-style: none; padding: 0px; max-width: inherit; max-height: inherit; } div.rotator ul li { position: absolute; margin: 0 auto; list-style: none; max-width: inherit; max-width: inherit; } div.rotator ul li img { max-width: inherit; max-width: inherit; } div.rotator ul li.show { max-width: inherit; max-height: inherit; z-index:500; } div.rotator ul li.show img { max-width: inherit; max-height: inherit; } .main div.right { float:right; max-width: 40%; max-height:80%; } div.right .logo img { max-width: 35%; max-height: 30%; margin: 0 auto; } div.right .clock{ max-width:35%; max-height:auto; margin: 0 auto; } .main div.marquee { width: 100%; max-height: 20%; } .main div.marquee .marq { position: absolute; bottom: 0; right: 0; left: 0; } .main div.marquee .marq .text { color: blue; font-size:95px; }html <body> <?php $count=count(glob($path.'/*.jpg')); ?> <div class="main"> <div class="rotator"> <ul> <li class="show"><img src="<?php echo $path.'/1'.$type; ?>"/></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo $path.'/'.$i.$type; ?>"/></li> <?php }?> </ul> </div> <div class="right"> <div class="logo"> <img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main"> </div> <div class="clock"> <?php include "clock/index.html"; ?> </div> </div> <div class="marquee"> <marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10" class="marq"> <span class="text"><?php echo $row['marquee'];?></span> </marquee> </div> </div></body>
  15. morohon
    Я понимаю, что прошу многого, но не могли бы вы помочь исправить этот косяк? Я не очень хорошо знаю css
  16. morohon
    Актуально!
  17. morohon
    Ничего из этого увы, не помогло. Есть еще варианты? Может у меня в верстке где-то ошибка? Не подскажите?
  18. morohon
    Вверх
  19. morohon
    Здравствуйте, уважаемые гуру! Не могли бы вы подсказать, как выровнять картинку по центру div'а в коде, который будет представлен ниже. Я знаю, что код не совершенен, и если вам будет не трудно, укажите на ошибке и если можно с объяснениями, чтобы я мог исправить их в дальнейшем. Буду очень признателен за помощь. css: body { width:100%; height:100%; } body div#rotator{ float:left; min-width: 60%; max-width: 65%; min-height: 70%; max-height: 80%; } #rotator li img { min-width: 85%; max-width: 100%; min-height: 75%; max-height: 80%; } #rotator div > ul.list{ position: relative; list-style: none; padding: 0px; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; } #rotator ul.list > li { position: absolute; margin: 0 auto; list-style: none; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; } #rotator ul.list > li.show { z-index:500; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; }код html: <div id="rotator"> <ul class="list"> <li class="show"><img src="<?php echo $path.'/1'.$type; ?>"/></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo $path.'/'.$i.$type; ?>"/></li> <?php } ?> </ul> </div>Если нужно, данный код располагается здесь. Заранее размер картинки неизвестен. Нужно чтобы и вертикальные и горизонтальные картинки были одинаково расположены по центру. Пожалуйста, помогите!
  20. morohon
    Здравствуйте, уважаемые посетители форума. Замучался решать вопрос, он следующий. У меня есть скрипт ротатора картинок, который меняет картинки по времени (делает это через ul). Как сделать так, чтобы картинки которые он выводит НИКОГДА не выходили за границы div'а? И еще вопрос. Мне нужно чтобы все это было адаптивно к экрану (будет показываться на full HD, но была бы возможность посмотреть с 17-24"(Radmin)). Если вас не затруднит, помогите пожалуйста. Код прилагаю. В нем о размещении элементов даже не пахнет (много раз исправлял). Нужен такой вариант как во вложении (картинке), чтобы так было на всех экранах (ток картинки по-больше в высоту ну и выровняно). Понимаю, что прошу много, если это трудно - подскажите в какую сторону копать, я плох в css и js. Спасибо огромное тем, кто откликнется P.S. Картинка может быть как вертикальная, так и горизонтальная (на схеме показано) <?php error_reporting(E_ALL); header('Content-Type: text/html; charset=utf-8'); include "scripts/config.php"; $errors=connect(); $sql=mysql_query('SELECT * FROM `index`') or die (mysql_error()); if(mysql_num_rows($sql) <= 0) echo 'ошибка'.$errors; $row=mysql_fetch_assoc($sql); $path=$row['images']; $count=count(glob('images/'.$path.'*.jpg')); if($count == 0){?> <img src="default/1.jpg" width="500" height="313"> <?php exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="clock/assets/css/style.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#rotator { float:left; width: 800px; max-width: 75%; } div#rotator img { max-width: 100%; height: auto; } div#rotator ul{ position: relative; list-style: none; padding: 0px; } div#rotator ul li { position: absolute; list-style: none; } div#rotator ul li.show { z-index:500; } .clock { float: right; } .main { float: right; } .marq{ position: absolute; bottom: 0; right: 0; left: 0; } .text { color: blue; font-size:95px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function theRotator() { var time="<?php echo $time;?>"; // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',time); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); // Прячем текущую картинку current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { // Запускаем слайдшоу theRotator(); }); </script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> <script src="clock/assets/js/script.js"></script> </head> <body> <div id="rotator" align="center"> <ul> <li class="show"><img src="<?php echo 'images/'.$row['images'].'1'.$type; ?>" class="img_main" /></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo 'images/'.$row['images'].$i.$type; ?>" class="img_main" /></li> <?php } ?> </ul> </div> <div class="main"> <img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main"> </div> <div class="clock"> <?php include "clock/index.html"; ?> </div> <div class="marq"> <marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10"> <span class="text"><?php echo $row['marquee'];?></span> </marquee> </div> </body> </html>
×
×
  • 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

  I accept