Форум

bpystep · #1 (**permalink**) 05.12.2010, 18:21

есть готовая фотогалерея.

Код:

<head>
<title>Gallery</title>
<style type="text/css">
body{
	margin:0;
	padding:50px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	background:#000;
}
a img{border:none;}
 
#gallery{
	width:663px;
	height:400px;
	overflow:hidden;
	position:relative;
	z-index:1;
	margin:0 auto 100px auto;
}
#tabs2{
	list-style:none;
	padding:0;
	margin:0;
	width:130px;
	height:400px;
	float:left;
}
#tabs2 li{
	padding:0;
	margin:0;
	float:left;
}
#tabs2 li a img{
	display:block;
	width:120px;
	height:90px;
}
#tabs2 li a{
	display:block;
	border:5px solid #999;
	width:120px;
	height:90px;
}
#tabs2 li a:hover{border:5px solid #fff;}
#tabs2 li a img.fullPic, #gallery1 div{
	position:absolute;
	z-index:1;
	left:130px;
	top:0;
	width:533px;
	height:400px;
}
#tabs2 li a:hover img.fullPic{z-index:3;}
#gallery div{
	z-index:2;
	background:#242424;
}
</style>
</head>

<script language="JavaScript">

var imagesMassiv = new Array('images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg');
var countImages = 0;
var timer;
function show(){
	if(countImages > 3){
		countImages = 0;
	}
	document.images['Show'].src = imagesMassiv[countImages];
	countImages = countImages + 1;
}

</script>
<body>
<h1>Gallery</h1>
<div id="gallery">
<table>
	<ul id="tabs2">
		<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic1.jpg" id="Show" class="fullPic" /></a></li>
	</ul>
</table>
</div>
<input type="button" value="PLAY" onClick="timer = setInterval('show()', 50)">
<input type="button" value="STOP" onClick="clearInterval(timer)">

</body>
</html>

нужно переместить список фотографий под главное окно в строчку, но поскольку они заключены в одни

Код:

<li></li>

то как бы я не менял они остаются в столбик... подскажите что делать

dmitriymar · #2 (**permalink**) 05.12.2010, 18:57

учить htmlприменять не список а таблицу либо контейнеры

monolithed · #3 (**permalink**) 05.12.2010, 19:47

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

то как бы я не менял они остаются в столбик... подскажите что делать

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

учить html

в

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

#tabs2{
list-style:none;
padding:0;
margin:0;
width:130px;
height:400px;
float:left;
}

изменить/удалить ширину

bpystep · #4 (**permalink**) 06.12.2010, 13:47

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

учить html применять не список а таблицу либо контейнеры

Таблицу пытался поставить, но дело в том что если бы было здесь

Код:

<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>

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

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

изменить/удалить ширину

для этого сначала нужно список поместить вниз. а потом уже заниматься размерностью блоков.

dmitriymar · #5 (**permalink**) 06.12.2010, 19:22

ну и убрать тег списка...каждую ссылку либо в свою ячейку либо контейнер

bpystep · #6 (**permalink**) 07.12.2010, 02:46

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

ну и убрать тег списка...каждую ссылку либо в свою ячейку либо контейнер

блин ну пробовал я так, не выходит!!!!!!!

dmitriymar · #7 (**permalink**) 07.12.2010, 09:32

ну тогда ответ один- учить основы html чтобы вышло

bpystep · #8 (**permalink**) 07.12.2010, 13:08

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

ну тогда ответ один- учить основы html чтобы вышло

Хочешь можешь устроить мне опрос по основам Html, я тебе без гугла отвечу, через аську, чтоб ты точно знал что я не гуглю... Не надо посылать человека что-то учить, если он говорит: "Ну не выходит так, я уже пробовал!"

если ничего дельного предложить не можешь, проходи лесом..

З.Ы. Насчет опроса я не пошутил.

Skipp · #9 (**permalink**) 07.12.2010, 14:24

Цитата:

<table>
	<ul id="tabs2">
		<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>
		<li><a href="#"><img src="images/pic1.jpg" id="Show" class="fullPic" /></a></li>
	</ul>
</table>

Если вы знаете html обьясните мне зачем тут ul находится в table, может я что-то не знаю?
далее
Если вы знаете html, что происходит при нажатии на <a href="#"></a>?
И если вы знаете css

Цитата:

#tabs2{
	list-style:none;
	padding:0;
	margin:0;
	width:130px;
	height:400px;
	float:left;
}

Как они выстроятся при фиксированной ширине в 130px?

А ещё много js.

monolithed · #10 (**permalink**) 07.12.2010, 15:31

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

Как они выстроятся при фиксированной ширине в 130px?

Тоже самое сказал, но видимо автор в танке.

Форум

Справочник

Discord чат

Курсы javascript