Jump to content

Николя223

Expert
 View Profile  See their activity

  • Posts

    1,771

  • Joined

  • Last visited

  • Days Won

    53

 Content Type 

Everything posted by Николя223

  1. Николя223
    после градиента для хрома стоит точка с запятой... зачем? точка с запятой означает что background закрывается. а следом идёт url... задайте фон шапки другому элементу или ... попробуйте так
  2. Николя223
    под мобильный, лучше другую верстку сделайте... (к сведенью ваша страница целиком 3 с лишним мегабайта весит), понятное дело у обычного телефона проблемы будут. ) у меня компьютер секунд 20 грузил... сразу понял, что движок - jooml овский ))
  3. Николя223
    там в самом первом посте опечатка - перелинКовка
  4. Николя223
    посмотрел в ie вот без всего кода можно только гадать
  5. Николя223
    разработчики вашего браузера на русских не рассчитывали
  6. Николя223
    только сейчас заметил, разработчики исправлять не хотят =))
  7. Николя223
    vadimka, мотивируй =) мысль пришла из таких окошек можно галерею неплохую сделать на канвасах
  8. Николя223
    задать им display: table-cell, обернуть ещё вы два div-а display: table-row и display: table соответственно
  9. Николя223

    бара-бара-бара, бере-бере-бере =)

  10. Николя223
    я б взялся, но я уже за седня норму кодинга выполнил )) гуглите ))) вот что то похожее нагуглил
  11. Николя223
    идея... можно сделать ещё одну шапку, которая будет отображаться в нужный момент... отсюда и отталкивайтесь По поводу без двух таблиц... впринципе и строку фиксануть можно, но это опасно, как знать как разный браузер себя поведёт
  12. Николя223
    ой ну погуглите... шапку лучше сделать отдельной таблицей. При скролинге страницы происходит проверка, если она выходит за рамки окна вверх, то ей задаётся position: fixed; top: 0%; и наоборот... как то так реализуется да... и если у вас всё же есть thead - то и пишите там <th> а не <td>
  13. Николя223
    она подлагивает - потому что не могу до конца убрать width у колонки , поэтому и получается такой эффект. Единственный выход, как я вижу - переводить её позишн в абсолют, а потом сворачивать... ну мне чёт влом сегодня уже)) Сказал - сделал . предыдущий пост поткоректировал, в гугл хроме даже незаметно всё проходит. в опере - немного есть ))
  14. Николя223
    ssory )) за длинный пост, =) всё переписал (самому интересно было =) у меня работает в мазиле, в хроме, и опере. в кодепене лагает, поэтому сюда выкладываю =)) P.S: чет не нашёл как спойлер сделать ))) и там осталось ещё анимацию доработать для webkit,при наведении на листочки ( в FF прикольно смотриться=) по поводу восьмого: чувствую нужно отталкиваться от запрета на выделение... Может натолкнет <!DOCTYPE HTML> <html> <head> <title></title> <meta name="" content=""> <style> *{margin: 0px; padding: 0px;} body{font: Normal 62.5%/1.1 "Open Sans", Helvetica; } a { color: #DDD; text-decoration: none; outline: none; } .table{ width: 1000px; margin: 0 auto; } .b-tash-top{border-top: 1px dashed #444;} .td_table{text-align: center; box-shadow: 0 2px 0px 0px rgba(9,9,9,0.3); } .td_first{width: 250px; background: url('http://subtlepatterns.com/patterns/black_linen_v2.png'); display: table-cell;} .navigation{color:#EEE; background: url('http://subtlepatterns.com/patterns/black_linen_v2.png'); font-weight: bold; padding-top: 25px; padding-bottom: 25px; font-size: 120%; } .t_align_right{text-align: right; background: url('http://subtlepatterns.com/patterns/black_linen_v2.png'); padding-right: 50px; height: 50px; } .t_align_right_nav{} .t_align_right_a:link, .t_align_right_a:visited{ color: #eee; text-decoration: none;} .menu_item{cursor: pointer; color: #DDD; background: #333; width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; position: relative; float: left; margin-top: 5px; margin-left: 5px;} .menu_item hr {width: 50%; margin: 7px auto; } ul.nav li{list-style: none; text-align: center; line-height: 50px; font-size: 170%; color: #EEE; border-bottom: 1px dashed #444;} .t_align_right2{background: url('http://subtlepatterns.com/patterns/whitey.png'); border-top: 3px solid rgba(9,9,9,0.3);} #td_first{overflow: hidden;} .left-content, .right-content, .middle-content{ display: block; float: left; width: 23%; max-width:500px; margin:50px 20px 50px; background:url('http://subtlepatterns.com/patterns/lined_paper.png'); padding:15px; border:1px solid rgba(3,3,3,0.2); font-size:1.2em; line-height:1.25em; box-shadow:3px 3px 3px 1px rgba(6,6,6,0.2); position: relative; z-index: 1000; } .wrapper{ margin:10px 20px; width:120px; height:140px; /*the projects have to be floated so that they wrap when the container width decreases, this would be possible if flex-wrap was supported, but unfortunately it's not*/ border:5px solid white; border-radius:1px; position:relative; background:white; float: left; box-shadow: 1px 1px 2px 1px rgba(40,40,40,0.5); z-index:0; } .wrapper:before, .wrapper:after{ content:""; display:block; width:98%; height:98%; background:white; box-shadow: 1px 1px 2px 1px rgba(40,40,40,0.5); position:absolute; border:5px solid white; border-radius:1px; transition: all 0.5s ease-out; } .wrapper:before{ z-index:-5; transform:rotate(-2deg); -webkit-transform:rotate(-2deg) skewy(2deg) scale(1, 1); top:-5px; left:-12px; } .wrapper:after { z-index:-6; transform:rotate(3deg); top:0px; left:10px; } .wrapper:hover:before, .wrapper:hover:after{ transform:rotate(0); -webkit-transform:rotate(0deg) skewy(0deg) scale(1, 1); } .wrapper:hover:before{top:-3px; left:0px;} .wrapper:hover:after{top:-5px; left:0px;} img{ opacity:1; transition:opacity all 0.5s ease; } .wrapper p { font:Bold 1.2em/2 "Open Sans"; } .acc{ margin-top:50px; width:100%; margin-bottom:100px; } .acc ul li { width:100%; height:40px; line-height:30px; font-size:1.7em; color:#ddd; padding:5px 30px; } .acc ul li a{ display:block; width:100%; height:100%; } .acc > ul > li { border-bottom: 1px dashed #444; } .acc > ul > li:first-child{ border-top:1px dashed #444; } .second-level { background: #333; display:none; } .second-level li{ border-bottom: 1px dashed #666; } .projects{ margin:40px 50px 10px 50px; } .clearfix{ clear:both; } .inner{ display:box; box-align:stretch; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> <!-- //////////////////////////////////// ///Bolotov_ns@mail.ru/////////////// //////////////////////////////////// //////////////////////////////////// var flagShow = '1'; function ShowOrHide(){ if (flagShow == 1){ flagShow = 0; $('#td_first').animate({ width: '1px',opacity: '0',opacity: 'hide'},600); $('#td_first2').animate({ width: '1px',opacity: '0',opacity: 'hide'},600); document.getElementById('nav1').style.position ='absolute'; document.getElementById('nav1').style.display ='none'; document.getElementById('nav2').style.position ='absolute'; document.getElementById('nav2').style.display ='none'; } else { flagShow = 1; $('#td_first').animate({ width: '250px',opacity: '1',opacity: 'show'},600); $('#td_first2').animate({ width: '250px',opacity: '1',opacity: 'show'},600); document.getElementById('nav1').style.display ='block'; document.getElementById('nav1').style.position ='relative'; document.getElementById('nav2').style.position ='relative'; document.getElementById('nav2').style.display ='block'; } } //--> </script> </head> <body> <table class="table" cellpadding="0px" cellspacing="0px"> <tr class="tr_table"> <td class="td_table td_first " valign="top" id="td_first"> <div class="navigation" id='nav1'>NAVIGATION</div> </td> <td class="td_table t_align_right"> <div class="menu_item" onclick="ShowOrHide()"><hr><hr><hr></div> <div class="navigation t_align_right_nav"> <a href="http://twitter.com/SaraSoueidan" class="t_align_right_a" title="Follow me On Twitter">@SaraSoueidan</a> </div> </td> </tr> <tr> <td class="td_table td_first " valign="top" id="td_first2"> <ul class="nav" id='nav2'> <li class="b-tash-top"> </li> <li>Nav Link One</li> <li>Nav Link Two</li> <li>Nav Link Five</li> </ul> </td> <td height="1000px;" width="auto" class="t_align_right2" valign="top"> <div class="top-bar"> <div id="menu-icon"></div> <h2><a href="http://twitter.com/SaraSoueidan" title="Follow me On Twitter">@SaraSoueidan</a></h2> </div> <div class="content"> <div class="projects"> <div class="wrapper"><img src="http://www.palantir.net/files/imagecache/inset_full/general/images/WF-sketch.jpg" height="100" width="100" /><p>Some Project</p></div> <div class="wrapper"><img src="http://blog.echoenduring.com/wp-content/uploads/2011/07/wireframing.jpg" height="100" width="100" /><p>Some Project</p></div> <div class="wrapper"><img src="http://visionwidget.com/images/2010-6/0609/web-design-ui-wireframe-ui-kit.jpg" height="100" width="100" /><p>Some Project</p></div> <div class="wrapper"><img src="http://webdesignledger.com/wp-content/uploads/2010/05/sketched_wireframes_15.jpg" height="100" width="100" /><p>Some Project</p></div> <div class="wrapper"><img src="http://c0660312.cdn.cloudfiles.rackspacecloud.com/iMockups%20Final.png" height="100" width="100" /><p>Some Project</p></div> <div class="clearfix"></div> </div> <div class="inner"> <div class="left-content"> <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p> <p>This is another dummy content paragraph.</p> </div> <div class="middle-content"> <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p> <p>This is another dummy content paragraph.</p> </div> <div class="right-content"> <p> Some other dummy text.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> </div> </div> </td> </tr> </table> </body> </html>
  15. Николя223
    какой отладчик такое выдает? опера и хром нормально работают, а так =) не. не применяй этот способ. я к вечеру постараюсь что нибудь придумать. mozilla все зарубилла ))
  16. Николя223
    нука- нука, расшифруй =) что значит как Г ?? =))
  17. Николя223
    дополню: .fon {background: white; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80, finishOpacity=80, style=0);} /*ie*/ .fon {background: rgba (255,255,255,0.8);} /*для всех кроме ie*/
  18. Николя223
    у меня так получилось: пример код извиняюсь, не так вопрос понял, чтобы при разном размере экрана было разное количество ячеек - нужно с float: left шаманить, на это времени нет уже =)
  19. Николя223
    элементарные вещи в уроках смотреть бесполезно - бездарно потраченое время))) лучше сами кнопки потыкайте, прочувствуйте - а потом уже и уроки смотрите, если не поймете ничего. fhotoshop - не After effects и таким способом можно понять ))
  20. Николя223
    добил вроде )) Jquery плохо знаю и разбираться щас лень, поэтому пару строк JS добавил )) вот
  21. Николя223
    исправил )) вроде в опере работает =) какой то ерунды там наворотили =)) вот display поменял table-cell; и max-width со второй колонки удалил, он на container-е стоит, а вообще код чистить надо исправил ошибки, появились другие)) сейчас подумаю ещё
  22. Николя223

    object

    Николя223 replied to jurassik's question in HTML Coding

    ндаа .. писать уже лишнего, по теме твоих речевых оборотов и полной алогичности приравнивания знаний структуры кода к своему мышлению, желания нет показывай уже свой ucoz-сайт
  23. Николя223

    object

    Николя223 replied to jurassik's question in HTML Coding

    правильно слово position
  24. Николя223
    код тащите =) а вообще ответ та дали уже...
  25. Николя223
    всё предельно просто)) я этим способом и предзагрузку и большие изображения кэширую (кэшируется скрипт, а вместе с ним и сами изображения) создаём файлик, например JavaScript.js в него и вписываем нужные нам пути pic1 = new Image(); pic1.src="/test1.jpg";//сюда прописываем путь к изображению pic2 = new Image(); pic2.src="/test2.jpg"; //и т.д. сохраняем в папку, например scripts и в тексте страницы, лучше между <head></head> вставляем, тщательно подготовленый нами скрипт <head> ... <script language=JavaScript src="/scripts/JavaScript.js"></script> ... </head>
×
×
  • 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