Need help to create html page with css div ul li list to make it rotational
Question
I am posting html content of my test page which I want to design like few of the web pages I have seen on different web sites. I want to create div with ul li list to make it rotational, at a time only three div should be displayed and remaining will be hidden. Hidden div should be visible only if I click on left or right rotation link
For example...
New product list on this site. www.mysmarttrip.in/index.php
Featured deal list on this site. www.freekaamaal.com
I tried a lot to make it like that but my knowledge of CSS and Javascript is limited. I need help form someone to make my page working like the site I posted above.
Thanks in advance... please help me
My HTML page:
<html>
<head>
<style type="text/css">
.product_head {
overflow: hidden;
width: 703px;
height: 35px;
padding: 0px;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
background-color: #27638C;
color: #FFFFFF;
font-size: 105%;
}
.product_page_box {
overflow: hidden;
width: 204px;
height: 250px;
padding: 0px;
margin: 2px 10px 5px 2px;
float: left;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
}
.product_head .product_page_box ol, ul {
list-style: none outside none;
}
.product_container_head {
width: 204px;
height: 25px;
background-color: rgb(234, 248, 228);
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
}
.product_container_head a {
color: #27638C;
text-transform: uppercase;
}
.product_details {
width: 172;
height: 25px;
vertical-align: middle;
text-align: center;
padding: 20px 10px 10px 0px;
position: relative;
margin: 10px;
border: 1px solid rgb(141, 196, 120);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="product_head">
<p> main title </p>
</div>
<div>
<ul>
<li>
<div class="product_page_box">
<div class="product_container_head">
aa title </div>
<div class="product_details">
aa 1 </div>
<div class="product_details">
aa 2 </div>
<div class="product_details">
aa 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
bb title </div>
<div class="product_details">
bb 1 </div>
<div class="product_details">
bb 2 </div>
<div class="product_details">
bb 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
cc title </div>
<div class="product_details">
cc 1 </div>
<div class="product_details">
cc 2 </div>
<div class="product_details">
cc 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
dd title </div>
<div class="product_details">
dd 1 </div>
<div class="product_details">
dd 2 </div>
<div class="product_details">
dd 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
ee title </div>
<div class="product_details">
ee 1 </div>
<div class="product_details">
ee 2 </div>
<div class="product_details">
ee 3 </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2014-02-20 19:38:08
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.