morohon
-
Posts
20 -
Joined
-
Last visited
morohon's Achievements
Explorer (1/14)
0
Reputation
-
Укажите, пожалуйста, на ошибки верстки из PSD-макета!
morohon replied to GusevIvan's topic in Discussion of works
не знаю. Мне просто удобно иметь один блок с id внутри которого блоки с class. Хотя может это потому, что я еще толком с js не сталкивался. -
Укажите, пожалуйста, на ошибки верстки из PSD-макета!
morohon replied to GusevIvan's topic in Discussion of works
А почему лучше пользоваться классами, можете объяснить? Чем плохи id? Или это к тому, что id оставляется для js? -
Увы не я писал эти часики. Я не разбираюсь в css, поэтому и обратился сюда за помощью
-
Здравствуйте, уважаемые форумчане. Кто может помочь увеличить размер цифр вот в этих часах: 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>
-
Не могу понять, почему горизонтальные картинки при задании размера встают нормально, а вот вертикальные картинки почему-то становятся больше области просмотра. Где-то пикселей на 200, хотя такого размера им никто не задавал
-
Все еще актуально !
-
Не подскажите, относительно чего задавать размеры картинки. Они по идее лежат в 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/
-
Вам огромное спасибо! Пойду все соединю воедино. Если что не пойму - обращусь. Спасибо еще раз огромное. И не только вам, а еще и ZverushkaОчень помогли
-
Только вопрос такой, если на эту верстку прикрепить этот ротатор изображений: <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, и выходило, что картпинка начинает постоянно опускаться вниз. Одна картинка в нужном месте появилась, другая ниже ее ( как список)
-
Див внутри которого список ulразмер картинки примерно ширина-70% высота - 80% Вот примерная схема: Да, нечто похожее. Картинка должна быть по центру div вне зависимости от того, вертикальная она или горизонтальная. Я в самом начале думал двигать картинку просто (наивно думая, что она не выйдет за границы div), но оказывается в html картинки выходят за границы div. Я очень слаб в css, поэтому и обратился сюда
-
У меня ротатор картинок завязан на списке ul. Никак его не могу убрать
-
Вот так сначала выглядит: А потом на очень короткий период, перед сменой картинки, картинка увеличивается до таких размеров:
-
В данный момент, код располагается здесь: http://www.morohon.pusku.com/panel2.ru/
-
Здравствуйте. Есть проблемы с наследованием. Не могу понять, что работает не так. Подскажите пожалуйста, если не затруднит. код представлен здесь: 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>
-
Я понимаю, что прошу многого, но не могли бы вы помочь исправить этот косяк? Я не очень хорошо знаю css