You are here

views_horizontal_slider.css in Views Horizontal Slider 7

/* $Id$ */

/**
 * Basic css for output * 
 */

div.views_horizontal_slider div.item-list{
  list-style: none;
  font-family: Arial, sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 0;
  width:940px;
}

div.views_horizontal_slider div.item-list li{
  float: left;
  padding: 0px;
  display: block;
  margin-right: 2px;
  color: #7c7c7c;
  width: 100px; /* Initial width. This should be the same witdh as the "Min width" in the views options */
  cursor: pointer; 
  overflow:hidden;
  position:relative; /* fix for ie7 relative positioning of children*/
}

/*no padding right for the last item*/
div.views_horizontal_slider div.item-list li.hslider-last {
  margin-right:0px;
}

div.views_horizontal_slider div.item-list li img{
  z-index:100;
  max-width:none;
}

/* This is the style for the active item on page load */
div.views_horizontal_slider div.item-list li.hslider-active{
  width: 300px; 
}



/******************************************
********* HOVER TEXT STYLES ***************
******************************************/

/* this needs to be styled individually because one may use other fields*/
/* this is a sample with the TITLE field and and image, the views fields ar sorted title first then image to avoid z-index issues*/

div.views_horizontal_slider div.item-list li .views-field-title {
  z-index: 110;
  position: absolute;
  top:250px;
  font-size: 16px;
  background-color: #fff;
  margin-left:20px;
  padding: 3px 10px 3px 10px;
  /*display:none; */
  width:200px;
}

File

views_horizontal_slider.css
View source
  1. /* $Id$ */
  2. /**
  3. * Basic css for output *
  4. */
  5. div.views_horizontal_slider div.item-list{
  6. list-style: none;
  7. font-family: Arial, sans-serif;
  8. font-size: 11px;
  9. margin: 0;
  10. padding: 0;
  11. width:940px;
  12. }
  13. div.views_horizontal_slider div.item-list li{
  14. float: left;
  15. padding: 0px;
  16. display: block;
  17. margin-right: 2px;
  18. color: #7c7c7c;
  19. width: 100px; /* Initial width. This should be the same witdh as the "Min width" in the views options */
  20. cursor: pointer;
  21. overflow:hidden;
  22. position:relative; /* fix for ie7 relative positioning of children*/
  23. }
  24. /*no padding right for the last item*/
  25. div.views_horizontal_slider div.item-list li.hslider-last {
  26. margin-right:0px;
  27. }
  28. div.views_horizontal_slider div.item-list li img{
  29. z-index:100;
  30. max-width:none;
  31. }
  32. /* This is the style for the active item on page load */
  33. div.views_horizontal_slider div.item-list li.hslider-active{
  34. width: 300px;
  35. }
  36. /******************************************
  37. ********* HOVER TEXT STYLES ***************
  38. ******************************************/
  39. /* this needs to be styled individually because one may use other fields*/
  40. /* this is a sample with the TITLE field and and image, the views fields ar sorted title first then image to avoid z-index issues*/
  41. div.views_horizontal_slider div.item-list li .views-field-title {
  42. z-index: 110;
  43. position: absolute;
  44. top:250px;
  45. font-size: 16px;
  46. background-color: #fff;
  47. margin-left:20px;
  48. padding: 3px 10px 3px 10px;
  49. /*display:none; */
  50. width:200px;
  51. }