Jump to content

universalPRO

Newbie
  • Posts

    7
  • Joined

  • Last visited

Everything posted by universalPRO

  1. А что "этакое" должно быть? В каких-то случаях удобнее воспользоваться cms, в каких-то - обойтись без нее. Только в первом случае Вы получаете(или не получаете) опыт, в основном, в устройстве используемой cms, а во втором - непосредственно в верстке. Из cms знаком плотно только с joomla. Сейчас пишу визитку с нуля. Для себя сделал вывод, что гораздо больше практического опыта получаю именно сейчас, т.к. возникает множество вопросов, которые приходится решать. На ошибках, их исправлении и возникает опыт. Визитку для себя стоит написать с нуля (больше возможностей + опыт), в коммерческих целях - с использованием cms( дешево быстро и сердито). И я о том-же Тем более визитка без cms не так уж и обделена... Для хорошего вида javascript самое то
  2. Здравствуйте форумчане Хотел бы поинтересоваться! Дело в том что я при создании сайта визитки не использую вообще никакого движка. Есть ли в этом что-то этакое? Знаю что многие используют joomla или wordpress утверждая тем что так быстрее или из-за того что лень редактировать каждую страницу. Мне лично удобно работать без cms. Хотя честно признаюсь я не разу не пробовал делать визитку на движке. А как вы поступаете в данной ситуции? И что можете сказать по поводу того что я не работаю с cms?
  3. Все я разобрался и сделал все как хотел. Спасибо вам за помощь и за то что заставили меня обратить внимание на очень полезные функции в хроме. Я бы плюсанул но что-то не плюсуеться. Спасибо еще раз всем кто помогал
  4. учитесь пользоваться поиском(Ctrl+F) Чес слово я так и делал... Ничего не нашол.
  5. А каким должен? Цвет описан в правиле .lb-overlay{ background: #F1D2C2; background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%, rgba(241, 210, 194, 1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255, 255, 255, 0.56)), color-stop(100%,rgba(241, 210, 194, 1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%,rgba(241, 210, 194, 1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%,rgba(241, 210, 194, 1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%,rgba(241, 210, 194, 1) 100%); background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.56) 0%,rgba(241, 210, 194, 1) 100%); } Задайте тот, который больше нравится. Чет такого и нет вроде Две таблицы отвечают за галерею это.... stule2.css .lb-album{ width: 900px; margin: 0 auto; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; } .lb-album li{ float: right; margin: 5px; position: relative; } .lb-album li > a, .lb-album li > a img{ display: block; } .lb-album li > a{ width: 150px; height: 150px; position: relative; padding: 10px; background: #; -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px 4px 4px 4px; } .lb-album li > a span{ position: absolute; width: 150px; height: 150px; top: 10px; left: 10px; text-align: center; line-height: 150px; color: rgba(27,54,81,0.8); text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 24px; opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ background: rgb(241,210,194); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .lb-album li > a:hover span{ opacity: 1; filter: alpha(opacity=99); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/ } .lb-overlay{ width: 0px; height: 0px; position: fixed; overflow: hidden; left: 0px; top: 0px; padding: 0px; z-index: 99; text-align: center; background: rgb(241,210,194); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%); } .lb-overlay > div{ position: relative; color: rgba(27,54,81,0.8); opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ width: 550px; margin: 10px auto 0px auto; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); -webkit-transition: opacity 0.3s linear 1.3s; -moz-transition: opacity 0.3s linear 1.3s; -o-transition: opacity 0.3s linear 1.3s; -ms-transition: opacity 0.3s linear 1.3s; transition: opacity 0.3s linear 1.3s; } .lb-overlay div h3, .lb-overlay div p{ padding: 0px 20px; width: 200px; height: 60px; } .lb-overlay div h3{ font-size: 36px; float: left; text-align: right; border-right: 1px solid rgba(27,54,81,0.4); } .lb-overlay div h3 span, .lb-overlay div p{ font-size: 16px; font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-style: italic; } .lb-overlay div h3 span{ display: block; line-height: 6px; } .lb-overlay div p{ text-align: left; float: left; width: 260px; } .lb-overlay a.lb-close{ background: rgba(27,54,81,0.8); z-index: 1001; color: #fff; position: absolute; top: 43px; left: 50%; font-size: 15px; line-height: 26px; text-align: center; width: 50px; height: 23px; overflow: hidden; margin-left: -25px; opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -webkit-transition: opacity 0.3s linear 1.2s; -moz-transition: opacity 0.3s linear 1.2s; -o-transition: opacity 0.3s linear 1.2s; -ms-transition: opacity 0.3s linear 1.2s; transition: opacity 0.3s linear 1.2s; } .lb-overlay img{ /* height: 100%; For Opera max-height does not seem to work */ max-height: 100%; position: relative; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3); box-shadow: 0px 2px 7px rgba(0,0,0,0.2); } .lb-overlay:target { width: auto; height: auto; bottom: 0px; right: 0px; padding: 80px 100px 120px 100px; } .lb-overlay:target img { -webkit-animation: scaleDown 1.2s ease-in-out; -moz-animation: scaleDown 1.2s ease-in-out; -o-animation: scaleDown 1.2s ease-in-out; -ms-animation: scaleDown 1.2s ease-in-out; animation: scaleDown 1.2s ease-in-out; } .lb-overlay:target a.lb-close, .lb-overlay:target > div{ opacity: 1; filter: alpha(opacity=99); /* internet explorer */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/ } @-webkit-keyframes scaleDown { 0% { -webkit-transform: scale(10,10); opacity: 0; } 100% { -webkit-transform: scale(1,1); opacity: 1; } } @-moz-keyframes scaleDown { 0% { -moz-transform: scale(10,10); opacity: 0; } 100% { -moz-transform: scale(1,1); opacity: 1; } } @-o-keyframes scaleDown { 0% { -o-transform: scale(10,10); opacity: 0; } 100% { -o-transform: scale(1,1); opacity: 1; } } @-ms-keyframes scaleDown { 0% { -ms-transform: scale(10,10); opacity: 0; } 100% { -ms-transform: scale(1,1); opacity: 1; } } @keyframes scaleDown { 0% { transform: scale(10,10); opacity: 0; } 100% { transform: scale(1,1); opacity: 1; } } /* 100% Height for Opera as the max-height seems to be ignored, not optimal for large screens http://bricss.net/post/11230266445/css-hack-to-target-opera */ x:-o-prefocus, .lb-overlay img { height: 100%; } И demo.css @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* General Demo Style */ body{ font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-weight: 400; font-size: 15px; color: #aa3e03; overflow-y: scroll; } .ie7 body{ overflow:hidden; } a{ color: #333; text-decoration: none; } .container{ position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center; } .container > header h1{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); padding: 0px 0px 5px 0px; } .container > header h1 span{ color: #c7957b; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } .container > header h2, p.info{ font-size: 16px; font-style: italic; color: #4a3124; text-shadow: 0px 1px 1px rgba(255,255,255,1); } /* Header Style */ .codrops-top{ font-family:'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; width: 100%; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none; display: inline; } p.codrops-demos{ text-align:center; display: block; padding: 14px; } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block; border: 1px solid #ddd; border-color: #ddd #aaa #aaa #ddd; padding: 4px 10px 3px; font-size: 13px; line-height: 18px; margin: 0px 3px; font-weight: 800; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color: rgba(27,54,81,0.8); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); } p.codrops-demos a:hover{ background: #fff; } p.codrops-demos a:active{ background: #e5e5e5; background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.9); } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: #999; } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } }
  6. В index.html не закоментированные(не верно закоментированные) стили: <style type="text/css"> <!-- body { background-color: #EDEDED; font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; } ... --> </style> В файле стилей 2 раза определяеться семейство шрифтом для body. Приведите в порядок стили... Да теперь я понял и задал общий шрифт для всех страниц "Helvetica". Правда шапка немного таки скачет( Ну все равно спасибо А если еще кто может помочь с галереей http://testprolux.16mb.com/portfolio.html При открытии картинки фон становиться "розовым"
  7. А можете пожалуйста ткнуть носом?
  8. Вот загрузил собственно сайт http://testprolux.16mb.com/index.html Если поклацать между разделами то можно заметить проблему.
  9. Здравствуйте. Помогите мне с версткой сайта... Я пока в этом деле почти 0 но уже кое что получаеться. Сейчас я верстаю сайт И остановился на том что шапка сайта а точнее "Меню" бегает туда сюда на разных страницах. Кто может помочь?
×
×
  • 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