How to use images instead of text labels?
I need the menu to slide down when the .logo (bird) image button is clicked
How can I link text label with a logo image on the menu bar?
PS: the menu slides down when the .logo (bird) is clicked BUT there are two birds, I need the menu to slide down when the bird image sitting on the menu is clicked, AND yes I need only one bird image
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
OK So I have found out all I needed to do was to replace
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
with
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
JSFiddle https://jsfiddle.net/heumnzLe/4/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
Related
I Need Help.
I want to create a hero-image, but I'm having trouble positioning the text.
I want it to look like this:
enter image description here
When I do it my way, then I have a problem with RWD positioning later.
Maybe it is possible to do it somehow simpler?
<header>
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>Zięba</h1>
<p>gallery</p>
</div>
<i class="fas fa-chevron-down"></i>
</header>
header {
.hero-img {
position: relative;
height: 100vh;
width: 100vw;
background-image: url('../img/Kapiaca-sie-small.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -2;
overflow: hidden;
.fa-chevron-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 95%;
color: $white-color;
font-size: 35px;
}
}
.hero-text {
position: absolute;
transform: translate(1430px, -50px);
height: 100%;
z-index: 5;
h1 {
color: $black-color;
font-size: 30rem;
font-family: 'Disclaimer', sans-serif;
}
h1::before {
content: 'Sławomir';
position: absolute;
display: inline-block;
transform: rotate(270deg);
top: 312px;
right: 180px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
color: $green-color;
}
p { position: absolute;
top: 540px;
right: 10px;
text-transform: uppercase;
color: $brown-color;
font-size: 1.6rem;
}
}
I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY
header .hero-text {
position: absolute;
right:40px;
height: 100%;
z-index: 5;
}
Just use Right Property to fix position.
I have a div with inline a few items but the item on the right is an image which must be align right in that div.
html
<div class='row'>
<div class='col-md-12'>
<div class='bank_tribune_speler' data-spelerid='77'>
<div class='positie'>K</div>
<img src='img/clubs/shirt.png' class='bank_tribune_shirt' alt='shirt'>
<div class='bank_tribune_naam_info'>
<span class='ellipsis font-weight-bold club_margin_top'>Name</span>
</div>
<div class='bank_tribune_wissel'>
<div class='bank_tribune_wissel_icon'></div>
</div>
</div>
</div>
</div>
css
.bank_tribune_speler {
display: flex;
padding-top: 8px;
padding-left: 10px;
border: solid 1px #b5b5b5;
margin-top: 10px;
}
.bank_tribune_shirt {
height: 50px;
width: 50px;
margin-left: 12px;
margin-top: -5px;
}
.positie {
color: #fff;
font-size: 22px;
font-weight: 700;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
width: 40px;
}
.bank_tribune_naam_info {
font-size: 20px;
line-height: 22px;
margin-left: 10px;
margin-top: -3px;
}
.bank_tribune_wissel_icon {
background: url("../img/wissel4.jpg");
height: 40px;
margin-right: 15px;
width: 48px;
}
See JSFiddle
I want the image with the red and green arrow to align right in the div with the grey border
I have tried float: right, text-align: right but so far no luck .... :-(
Any idea how to achieve this?
Kind regards,
Arie
I have achieved it by using float: right .... ;-)
See JSFiddle
body {
font-family: 'Hind', sans-serif;
}
.bank_tribune_speler {
padding-top: 8px;
padding-left: 10px;
border: solid 1px #b5b5b5;
margin-top: 10px;
height: 50px;
}
.bank_tribune_shirt {
height: 50px;
width: 50px;
margin-left: 12px;
margin-top: -5px;
float: left;
}
.positie {
color: #fff;
font-size: 22px;
font-weight: 700;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
width: 40px;
float: left;
}
.linie-positie-keeper {
background-color: red;
}
.bank_tribune_naam_info {
font-size: 20px;
line-height: 22px;
margin-left: 10px;
margin-top: -3px;
float: left;
}
.club_margin_top {
margin-top: 0.8rem!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.bank_tribune_wissel {
height: 40px;
width: 40px;
margin-right: 15px;
}
.float-right {
float: right!important;
}
I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
I have found a solution from http://codepen.io/SitePoint/pen/bNYBZX but it i incomplete.
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1" class="basic__img" src="http://lorempixel.com/250/250/fashion/1" alt="Fashion 1" />
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large" src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1" />
</div>
</div>
</section>
I need to have a side gallery for images to load in the preview section on click just like google image search. Here is the image of what I want to do Google Image search layout preview
Thanks.
I Did a codepen with the solution I wanted. http://codepen.io/bahiirwa/pen/BKmmzm
HTML
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</div>
</div>
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-2">
<img id="expand-jump-2"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</div>
</div>
...
</section>
CSS
html {box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit; }
.image-grid {
width: 100%;
max-width: 1310px;
margin: 0 auto;
overflow: hidden;
padding: 10px 5px 0;
}
.image__cell {
float: left;
position: relative;
width: 20%;
}
.image--basic {
padding: 0 5px;
}
.basic__img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.image__cell.is-collapsed .arrow--up {
display: block;
height: 10px;
width: 100%;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image__cell.is-expanded .image--expand {
max-height: 500px;
margin-bottom: 10px;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background: #222;
max-height: 0;
transition: max-height .3s ease-in-out,
margin-bottom .1s .2s;
width: 500%;
}
.image__cell:nth-of-type(5n+2) .image--expand {
margin-left: -100%;
}
.image__cell:nth-of-type(5n+3) .image--expand {
margin-left: -200%;
}
.image__cell:nth-of-type(5n+4) .image--expand {
margin-left: -300%;
}
.image__cell:nth-of-type(5n+5) .image--expand {
margin-left: -400%;
}
.image__cell:nth-of-type(5n+6) {
clear: left;
}
.image__cell.is-expanded .arrow--up {
display: block;
border-bottom: 8px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
width: 0;
margin: 2px auto 0;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
JS
var $cell = $('.image__cell');
$cell.find('.image--basic').click(function() {
var $thisCell = $(this).closest('.image__cell');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
}
});
$cell.find('.expand__close').click(function() {
var $thisCell = $(this).closest('.image__cell');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
});
Or you can query SerpAPI to get a JSON response.
Then you can easily loop over the images in the json.
https://serpapi.com/images-results
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