Менюшка туда сюда.

universalPRO · July 18, 2012

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

SilentImp · July 18, 2012

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

Если ты хочешь, что бы тебе помогли, то тебе придется описать проблему … м … понятнее. Я например ничего не понял.

Верстать за тебя никто не будет, но, думаю, конкретную проблему решить помогут.

Лучше всего дай ссылку на страничку с кодом. Можете выложить его на http://jsfiddle.net/

universalPRO · July 18, 2012

Вот загрузил собственно сайт http://testprolux.16mb.com/index.html

Если поклацать между разделами то можно заметить проблему.

USF · July 18, 2012

шрифты разные <_<

universalPRO · July 18, 2012

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

Viper · July 18, 2012

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

В 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. Приведите в порядок стили...

Edited July 18, 2012 by Viper

universalPRO · July 18, 2012

А можете пожалуйста ткнуть носом?
В index.html не закоментированные(не верно закоментированные) стили:
<style type="text/css">

</style>
В файле стилей 2 раза определяеться семейство шрифтом для body. Приведите в порядок стили...

Да теперь я понял и задал общий шрифт для всех страниц "Helvetica". Правда шапка немного таки скачет( Ну все равно спасибо

А если еще кто может помочь с галереей http://testprolux.16mb.com/portfolio.html

При открытии картинки фон становиться "розовым"

SilentImp · July 18, 2012

А если еще кто может помочь с галереей http://testprolux.16mb.com/portfolio.html
При открытии картинки фон становиться "розовым"

А каким должен?

Цвет описан в правиле

.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%);
}

Задайте тот, который больше нравится.

Edited July 18, 2012 by SilentImp

universalPRO · July 18, 2012

А если еще кто может помочь с галереей http://testprolux.16mb.com/portfolio.html
При открытии картинки фон становиться "розовым"
А каким должен?
Цвет описан в правиле
.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;

}

Edited July 18, 2012 by universalPRO

Viper · July 18, 2012

Чет такого и нет вроде

учитесь пользоваться поиском(Ctrl+F)

universalPRO · July 18, 2012

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

Чес слово я так и делал... Ничего не нашол.

SilentImp · July 18, 2012

Чет такого и нет вроде

Так, уточняю: ты умеешь пользоваться инспектором?

Открываешь страничку в хроме, например.

Кликаешь по картинке, что бы появился розовый лайтбокс.

Наводишь на него курсор и нажимаешь на правую кнопку мыши.

В контекстном меню выбираешь «Inspect element».

Откроется инспектор. В нем ты сможешь увидеть все примененные к элементу css правило, положение правило в css файле и в каком именно css файле правило находится.

Как то так:

https://skitch.com/silentimp/e8tqh/screen-shot-2012-07-19-at-12.00.15-am.png-66.7-layer-1-rgb-8

SilentImp · July 18, 2012

universalPRO а еще не стоит вываливать в пост css простыню без необходимости.

Уж лучше на pastie вывалить и дать ссылку.

universalPRO · July 18, 2012

universalPRO а еще не стоит вываливать в пост css простыню без необходимости.
Уж лучше на pastie вывалить и дать ссылку.

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

Спасибо еще раз всем кто помогал

Sign In

Менюшка туда сюда.

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information