universalPRO

А что "этакое" должно быть? В каких-то случаях удобнее воспользоваться cms, в каких-то - обойтись без нее. Только в первом случае Вы получаете(или не получаете) опыт, в основном, в устройстве используемой cms, а во втором - непосредственно в верстке. Из cms знаком плотно только с joomla. Сейчас пишу визитку с нуля. Для себя сделал вывод, что гораздо больше практического опыта получаю именно сейчас, т.к. возникает множество вопросов, которые приходится решать. На ошибках, их исправлении и возникает опыт. Визитку для себя стоит написать с нуля (больше возможностей + опыт), в коммерческих целях - с использованием cms( дешево быстро и сердито). И я о том-же Тем более визитка без cms не так уж и обделена... Для хорошего вида javascript самое то

Здравствуйте форумчане Хотел бы поинтересоваться! Дело в том что я при создании сайта визитки не использую вообще никакого движка. Есть ли в этом что-то этакое? Знаю что многие используют joomla или wordpress утверждая тем что так быстрее или из-за того что лень редактировать каждую страницу. Мне лично удобно работать без cms. Хотя честно признаюсь я не разу не пробовал делать визитку на движке. А как вы поступаете в данной ситуции? И что можете сказать по поводу того что я не работаю с cms?

Все я разобрался и сделал все как хотел. Спасибо вам за помощь и за то что заставили меня обратить внимание на очень полезные функции в хроме. Я бы плюсанул но что-то не плюсуеться. Спасибо еще раз всем кто помогал

учитесь пользоваться поиском(Ctrl+F) Чес слово я так и делал... Ничего не нашол.

А каким должен? Цвет описан в правиле .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; } }

В 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 При открытии картинки фон становиться "розовым"

А можете пожалуйста ткнуть носом?

Вот загрузил собственно сайт http://testprolux.16mb.com/index.html Если поклацать между разделами то можно заметить проблему.

Здравствуйте. Помогите мне с версткой сайта... Я пока в этом деле почти 0 но уже кое что получаеться. Сейчас я верстаю сайт И остановился на том что шапка сайта а точнее "Меню" бегает туда сюда на разных страницах. Кто может помочь?