Очень нужно разобраться с галереей - HTML и CSS

gitaristxx · 05.03.2017, 00:35

Здравствуйте уважаемые форумчане.
Недавно начал изучать Html и Css, знаю какие то определенные азы, опыт не велик.
Решил сделать для своего сайта галерею, нашел в инете понравилась, где то код немного подшаманил под себя.

Html

Код:

<!DOCTYPE html>

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
		<title>Создаем переходы для страниц при помощи CSS3 | Демонстрация для сайта s-sd.ru</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>

				
		<div id="home" class="panel">
		    <ul class="content">
			<h2>collection<span>"Mebel-Natalie"</span></h2>
			
			   <li>
				  <a href="#image-1">
				 <img src="http://s020.radikal.ru/i705/1703/78/75afeaea6dc9.jpg" alt="foto 1">
				 <span>Шкафы-Купе</span>
				  </a>
			<div class="lb-overlay" id="image-1">
                 <img src="http://s002.radikal.ru/i198/1703/c3/9b8574a65eb7.jpg" alt="foto 1">
                <div>
                    <h3>Шкафы-купе со стеклом</h3>
                    <span class="price">40 000</span>
					<p>P</p>
					<span class="order">Заказать</span>
				</div>
                  <a href="#page" class="lb-close">X Close</a>
            </div>				  
			   </li>
		   </ul>
		     </div>
		
		<div id="header">
			<div id="navigation">
				<a id="link-home" href="#home">1</a>
			</div>			
		</div>

	</body>
	
</html>

Css

Код:

body {
	width: 100%;
	background: #ffffff;
	overflow-y: auto;
	background:  100% url(http://s018.radikal.ru/i518/1703/78/1757d8d73caa.jpg); 
}


#header{
	position: absolute;
	z-index: 1000;
	bottom: 10px;
	left: 45%;
}

#navigation {
	display:inline-block;
	list-style:none;
	z-index:3;
}
#navigation a{
	text-decoration: none;
	color: #444;
	display: inline-block;
	background: #fff;
	background: rgba(255,255,255,0.9);
	border-radius: 5px;
	padding: 12px;
	text-transform: uppercase;
	margin-right: 20px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-size: 14px;
}
#navigation a:hover {
	background: #ddd;
}
.content{
    left: 2%;
	right: 2%;
	position: absolute;
	padding-bottom: 30px;
	list-style: none;
}

.content li{
	float: left;
    margin: auto;
	position: relative;
	padding-left: 10px;
	padding-bottom: 7px;
}

.content li > a,
.content li > a img{
	display: block;
}

.content li > a{
	width: 250px;
	height: 165px;
	position: relative;
	padding: 10px;
	background: #e7e5e5;
	box-shadow: 2px 2px 4px #444447, 1px 1px 2px rgba(158,111,86,0.3) inset;
	border-radius: 2px;
}

.content li > a span{
	position: absolute;
	width: 250px;
	height: 165px;
	top: 10px;
	left: 10px;
	text-align: center;
	line-height: 150px;
	color: #21646a;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	font-size: 24px;
	opacity: 0;
	background: rgb(241,210,194);	
	background: radial-gradient(rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
	transition: opacity 0.3s linear;
}

.content li > a:hover span{
	opacity: 1;
}

.content h2{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	text-align: center;
	font-weight: 400;
	padding: 10px 0px 20px 0px;
	margin-top: 52px;
	margin-left: 50px;
	color: #fff;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 10px 10px rgba(0,0,0,0.3);
}



.panel{	
	width: 100%;
	min-height: 100%;
	position: absolute;
	box-shadow: 4px -4px 4px rgba(0,0,0,0.2);
	margin-left: -102%;
	z-index:2;
	transition: all .6s ease-in-out;
	
	
}
.panel:target{
	margin: 0%;
	background: 100% url(http://s018.radikal.ru/i518/1703/78/1757d8d73caa.jpg);
}
#home:target ~ #header #navigation #link-home,
{
	background: #000;
	color: #fff;
}

.lb-overlay{
	background: #fbf8f4 url(../images/bg.jpg) repeat top left;
	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: radial-gradient(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;
	width: 550px;
	margin: 10px auto 0px auto;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3{
	margin:0;
	padding: 0px 20px;
	width: 200px;
	height: 60px;
}


.lb-overlay div h3{
	font-size: 30px;
	float: left;
	text-align: right;
	border-right: 1px solid #4a5d7e;
}
.lb-overlay div h3 span{
	font-size: 16px;
	font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-style: italic;
}

.lb-overlay div p{
	font-family: 'Arial', sans-serif;
	font-weight: bold;
	display: inline-block; 
    font-size: 35px; 
    line-height: 12px;  
    border-bottom: 3px solid #da251c;
	padding-left: 5px;
	margin-left: 20px;
	margin-top: 15px;
	color: #da251c;
}

.price {
	font-family: 'Arial', sans-serif;
    font-size: 30px;	
	float: left;
	margin-left: 80px;
	font-weight: bold;
	color: #da251c;
}

.order {
	margin-left: 250px;
	font-family: 'Arial', sans-serif;
    font-size: 35px;	
	border: 2px solid #373837;
	border-radius: 3px;
    padding: 3px;
    background: #1a3c3d;
	color: #ffffff;
	
}

.order:hover {
	color:#ffffff;
	background: #da251c;
}

.lb-overlay div h3 span{
	display: block;
	line-height: 6px;
}
.lb-overlay div p{
	text-align: center;
	float: left;
}
.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: 70px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 0;


	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);

	transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
	max-height: 100%;
	position: relative;
	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 {
	animation: scaleDown 1.2s ease-in-out;
}

.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
	opacity: 1;
}

@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

При клике по ссылке, фото открывается в другом окне,

при закрытие фото нужно опять переходить в галерею.

а мне надо чтобы фото открывалась в галерее.

В Галерее будет 4 страницы, на каждой странице 12 фото,
хотелось бы чтобы каждое фото открывалось в своей странице.

Методом тыка пробовал не получается.
Как предполагаю нужно что то менять в css.

Решил обратиться за помощью на форум, помогите кто чем может.
Любые советы приму к сведению.
Буду рад если напишите в коде.

Alar · 05.03.2017, 01:11

Цитата:

background: 100% url(http://s018.radikal.ru/i518/1703/78/1757d8d73caa.jpg);

это вот что такое и зачем.

gitaristxx · 05.03.2017, 12:41

это фон, на котором должно быть модальное окно при клике на ссылку.
Или же оно не должно быть прописано в Body?

Alar · 05.03.2017, 13:36

почему фон на каком-то левом сайте.

Naive · 05.03.2017, 14:06

ИМХО, Alar спросил про 100% (ну я бы спросил) тут 2 вопроса:
1. Зачем? Если второй вопрос не актуален.
2. Ты знаешь, что эти 100% делают?
Ну и заголовок внутрь маркированного списка ставить нельзя, в айтем списка — можно. Прогоняй верстку через валидатор w3c, или поставь соответствующий плагин на браузер. Это позволит тебе избежать многих ошибок, которые ты вначале просто не осознаешь. Это не "я Бог — ты говно", просто я тоже до сих пор некоторые свои ошибки не осознаю: я знаю что так не правильно, но не знаю почему при этом браузеры ведут себя так.

gitaristxx · 05.03.2017, 17:48

Я же написал что я html и css недавно начал изучать.
Нужна помощь в коде.
фото не там где надо отображается.
А по поводу 100% как понимаю занимают весь экран.

Naive · 05.03.2017, 18:07

Это делается только через JavaScript. Есть, конечно, возможность сделать это при помощи html&css, но это уберскилл и в боевых условиях это не делают.
Гугли галерею, чо уж...

Цитата:

Сообщение от gitaristxx

А по поводу 100% как понимаю занимают весь экран.

NOPE это выравнивание по горизонтали, эти 100% утыкают картинку в право.

gitaristxx · 05.03.2017, 19:00

спасибо за совет.
вот ссылка от куда я скачал галерею https://s-sd.ru/files/CSS3Lightbox/index2.html#page
там все при помощи html и css сделано.
Вот как там мне нужно, фото открывается в галерее.

Naive · 05.03.2017, 22:20

АХРИНЕТЬ я не знал такого метода))) СПС!!
то, что ты скинул, это one-page-ожая галерея, так что не совсем понятно про какие там страницы ты говоришь...

gitaristxx · 06.03.2017, 00:30

Цитата:

Сообщение от Naive

АХРИНЕТЬ
так что не совсем понятно про какие там страницы ты говоришь...

Ну я имел ввиду там сделана галерея в одну страницу, а я хотел бы в три или четыре страницы сделать, чтоб на каждой странице было по 12 фото и странички переключались вот таким эфектом https://s-sd.ru/files/CSS3PageTransi...dex3.html#home

05.03.2017, 14:06	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	ИМХО, Alar спросил про 100% (ну я бы спросил) тут 2 вопроса: 1. Зачем? Если второй вопрос не актуален. 2. Ты знаешь, что эти 100% делают? Ну и заголовок внутрь маркированного списка ставить нельзя, в айтем списка — можно. Прогоняй верстку через валидатор w3c, или поставь соответствующий плагин на браузер. Это позволит тебе избежать многих ошибок, которые ты вначале просто не осознаешь. Это не "я Бог — ты говно", просто я тоже до сих пор некоторые свои ошибки не осознаю: я знаю что так не правильно, но не знаю почему при этом браузеры ведут себя так. Alar, верни репу!

05.03.2017, 22:20	#9
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	АХРИНЕТЬ я не знал такого метода))) СПС!! то, что ты скинул, это one-page-ожая галерея, так что не совсем понятно про какие там страницы ты говоришь... Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Очень быстро нужно и очень просто,С# матрица треугольник	Santa1	Помощь студентам	1	04.04.2012 15:55
Помогите разобраться с галереей IMAGIN	yana_studio	JavaScript, Ajax	1	12.12.2009 17:58
Очень нужна помощь! Нужно найти ошибку в очень простой программе.	Lex55555777	Помощь студентам	3	07.12.2008 20:32
помогите разобраться с массивами.очень нужно	катя@90	Помощь студентам	8	16.11.2008 13:48

05.03.2017, 12:41	#3
gitaristxx Регистрация: 03.03.2017 Сообщений: 5	это фон, на котором должно быть модальное окно при клике на ссылку. Или же оно не должно быть прописано в Body?

05.03.2017, 13:36	#4
Alar Александр Администратор Регистрация: 28.10.2006 Сообщений: 17,649	почему фон на каком-то левом сайте. Купить рекламу на форуме за 42 тыс руб за месяц размещения

05.03.2017, 17:48	#6
gitaristxx Регистрация: 03.03.2017 Сообщений: 5	Я же написал что я html и css недавно начал изучать. Нужна помощь в коде. фото не там где надо отображается. А по поводу 100% как понимаю занимают весь экран.

05.03.2017, 19:00	#8
gitaristxx Регистрация: 03.03.2017 Сообщений: 5	спасибо за совет. вот ссылка от куда я скачал галерею https://s-sd.ru/files/CSS3Lightbox/index2.html#page там все при помощи html и css сделано. Вот как там мне нужно, фото открывается в галерее.