I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
This one should make many scratch their head...
Could someone let me know why my <div> element (id 'container') is shifting down when the overflow-y is set to "scroll" in Microsoft Edge? Seems to work just fine in Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
</script>
</body>
</html>
Here are the screenshots for both Firefox and Microsoft Edge:
Firefox:
Edge:
Try to modify your code as below(demo):
<style type="text/css">
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<div style="height: 95%; width: 60vmin; border: 2px dotted orange; background-color: blue; overflow: hidden; margin-right:20px ; margin-top:20px; float:right">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 100%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
});
</script>
The result in Microsoft Edge browser as below:
I have tried everything, including "text-decoration: none;" and making sure all padding is removed. Should be a pretty basic and elemental procedure but nothing works.
Yes, I have read all I can find here and tried it or looked elsewhere on the net for a solution. Nothing is working.
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<style>
#main-nav {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 100%;
height: 30px;
margin: auto;
padding: 0;
text-decoration: none;
background-color: #D6D5D6;
list-style-type: none;
text-align: center;
}
.nav-list {
text-decoration: none;
text-align: center;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 1000px;
margin-: auto;
padding: 0;
}
.nav-list > li {
margin: 0;
float: left;
width: 200px;
height: 30px;
position: relative;
line-height: 30px;
}
.nav-list > li > a {
width: 200px;
height: 30px;
text-align: center;
padding-top: 12px;
list-style-image: none;
}
.nav-list > li > a:hover {
background-color: #FFF;
}
#dropdown {
position: relative;
top: 30px;
width: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
list-style-image: none;
list-style-type: none;
color: #F00;
}
.dropdown: li{
background-color:#697;
position:relaive;
width:200px;
height:30px;
text-decoration: none;
}
.dropdown: li a {
color: #ddd;
text-decoration:none;
position: absolute;
width:200px;
height:30px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown: li a:hover {
background-color: #CCC;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#transbar {
position: absolute;
z-index: -1;
width: 1000px;
left: 0px;
top: 0px;
}
#wrap {
width: 1000px;
top: 668px;
position: absolute;
margin-right: auto;
margin-left: auto;
}
#textbox {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
height: 575px;
width: 1000px;
position: absolute;
z-index: -1;
margin-top: 80px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
</style>
<div id="wrapper">
<body>
<nav class="main-nav">
<ul class="nav-list">
<li>About
<ul style="list-style: none;" class="dropdown">
li>The Film</li>
<li>The Park</li>
</ul>
</li>
<li>Updates
<ul style="list-style: none;" "dropdown">
<li>Slideshow<li>
</ul>
</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Add this to your CSS to remove underline effect for <li> links:
a:link {
text-decoration: none;
}
As for displaying <li> elements in the center of the page I've provided a simplified version of your code that centers each <li>.
HTML:
<ul>
<li>About</li>
<li>The Film</li>
<li>The Park</li>
<li>Updates</li>
<li>Slideshow</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
a:link {
text-decoration: none;
}
ul {
text-align: center;
list-style-type: none;
}
ul li {
display: inline-block;
}
NOTE: you may want to adapt this to your current code, next time you ask a question like this probably best to post a link to a jsfiddle example of your code.
I got it to work. Fooling around with the width in the CSS "Box" attribute did the trick. I am using Dreamweaver as my text editor, btw. A width of 123px added to the ul CSS script did it for the first listed column. For the ul li column I had to mess with that as well. A measure of 68px on the width centered that. I don't know why this works, and as you tell I'm a novice at this.
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!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" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.
I'm creating a liquid j-query slider using Mark Tyrell's blueberry plugin (all hail!), but am having a problem with thumbnail images not re-sizing in Safari (mobile or desktop) that work in IE 8, and Firefox 7.01 and Opera 9.5.
You can see the (almost) working page at http://development.carrollorganization.com/blueberry3.php
IN Safari, the thumbnail images do not shrink to fit the height of the container (div called thumbnail) and are not restricted to overflow:hidden in that container. They do obey the overflow:hidden command in the div's parent (an a tag). The big issue is the refusal to re-size to fit the height of the parent div tag.
I honestly don't know if this is a Safari bug, a box-model problem, user-error (could be likely) or some combination of all. I would appreciate any help anybody can give. If I cou
My style sheets are:
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }
#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc {
margin:0px;
padding:0px;
width:100%;
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}
.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; /*position: relative; */}
.blueberry .crop li img { width: auto; }
.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li {
overflow:hidden;
display: block;
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active {
background-color: #F00;
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000;
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important;
margin:5%;
border:1px solid #fff;
}
.blueberry .pager div.thumbNail img {
display:block;
float:left;
height:100%;
width:auto;
}
My page code is (it's a php page, not html):
<div id="doc">
<div id="content">
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="images/slider_images/slider_01.jpg"/></li>
<li><img src="images/slider_images/slider_02.jpg"/></li>
<li><img src="images/slider_images/slider_03.jpg"/></li>
<li><img src="images/slider_images/slider_04.jpg"/></li>
</ul>
<ul class="pager">
<li><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></li>
</ul>
</div>
height: 100% is not working as you might expect it to
I'd choose
.blueberry .pager div.thumbNail {
position: relative
.blueberry .pager div.thumbNail img {
position: absolute;
top: 0px;
bottom: 0px;
}
additionaly