список строкой

goodsik · December 22, 2011

Создал список строкой через float:left;. В списке картинки. Привентил плагин Pagination.

Плагин работает, но беда в том, что браузеры воспринимают список столбиком, хотя картинки располагаются строкой. Т.е. браузер растягивает окно суммирую ширину картинок в списке, оставляя под футером пустоту. display:inline нельзя использовать - нарушает работу плагина.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script/jquery00.js"></script>
<script type="text/javascript"  src="script/script00.js" ></script>
<title>Документ без названия</title>
</head>

<body>
     <table cellpadding="0" cellspacing="0" border="0" class="center">
               <tr>
                   <td id="lightBox">
                        <div id="main">
                        <ul id="holder">
                            <li><img src="images/foto/Ludi/Foto_2.jpg"   width="200"  border="0" class="fot"   /></li>
                            <li><img src="images/foto/Ludi/Foto_1.jpg"  width="200" border="0" class="fot" /></a> </li>
                            <li> <a rel="prettyPhoto[mixed]" href="images/foto/Ludi/Foto_3.jpg" title=""><img src="images/foto/Ludi/Foto_3.jpg"   width="200"  border="0" class="fot"   /></a> </li>
                            <li><img src="images/foto/Ludi/Foto_4.jpg"   width="200"  border="0" class="fot"   /></li>
                           <li><img src="images/foto/Ludi/Foto_5.jpg"   width="200"  border="0" class="fot"   /></li>
                           <li><img src="images/foto/Ludi/Foto_6.jpg"   width="200"  border="0" class="fot"   /> </li>
                           <li><img src="images/foto/Ludi/Foto_7.jpg"   width="200"  border="0" class="fot"   /></li>
                           <li><img src="images/foto/Ludi/Foto_8.jpg"   width="200"  border="0" class="fot"   /></li>
                           <li><img src="images/foto/Ludi/Foto_9.jpg"   width="200"  border="0" class="fot"   /> </li>
                          <li><img src="images/foto/Ludi/Foto_10.jpg"   width="200"  border="0" class="fot"   /></li>
                           <li><img src="images/foto/Ludi/Foto_11.jpg"   width="200"  border="0" class="fot"   /></li>
                     </ul>
   </div>
                        </td>
      	</tr>
     </table>

</body>
</html>

#holder li{
			float:left;
			list-style-type:none;

		}
	#main{
		float:left;
		display:inline;
		width:637px;
		height: 500px;
	}

		#holder{
			overflow: hidden;
			position:relative;
			padding: 0;
	}

Плагин взят от сюда http://www.codeharmony.ru/materials/16

Edited December 22, 2011 by goodsik

Akaciya · December 23, 2011

Приложите картинку как у вас работает. Как-то неправильно в <ul> пихать <div>, в котором потом живут <li>.

п.с. Я в свое время отсюда брала http://css-tricks.com/examples/AnythingSlider/#panel1-6

или отсюда можно http://ruseller.com/lessons/les382/index.html

Edited December 23, 2011 by Akaciya

goodsik · December 23, 2011

Вот скрин. пустота внизу. кнопочки перелистки поднял на 1000 px. но пустоту убрать не могу)

Edited December 23, 2011 by goodsik

Sign In

список строкой

Question

goodsik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Akaciya

Link to comment

Share on other sites

goodsik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information