Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page nth-child work around

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-08-2012, 07:55 PM   PM User | #1
Iso Godly
New Coder

 
Join Date: Nov 2012
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Iso Godly is an unknown quantity at this point
nth-child work around
Hello all.

I'm having a tough time trying to make this slideshow IE8 friendly. It works fine for me in IE9, Chrome, and Safari. I know that IE8 doesn't support nth-child selectors and I want to make this work with CSS (Javascript is the last resort.)

Here is the live link: http://webhawks.org/~dm160bivsalg4654/finalmain.html

Hopefully somebody can point me in the right direction for this. Thanks in advance.

Code:
<div class="cr-container">     
       
 
    <!-- radio buttons and labels -->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1"><span class="hidenumber">1</span></label>
 
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2"><span class="hidenumber">2</span></label>
 
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3"><span class="hidenumber">3</span></label>
 
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4"><span class="hidenumber">4</span></label>
 
    <div class="clr"></div> 
 
    <!-- panels -->
    <div class="cr-bgimg">
        <div>
            <span>Slice 1 - Image 1</span>
            <span>Slice 1 - Image 2</span>
            <span>Slice 1 - Image 3</span>
            <span>Slice 1 - Image 4</span>
        </div>
        <div>
            <span>Slice 2 - Image 1</span>
            <span>Slice 2 - Image 2</span>
            <span>Slice 2 - Image 3</span>
            <span>Slice 2 - Image 4</span>
        </div>
        <div>
            <span>Slice 3 - Image 1</span>
            <span>Slice 3 - Image 2</span>
            <span>Slice 3 - Image 3</span>
            <span>Slice 3 - Image 4</span>
        </div>
        <div>
            <span>Slice 4 - Image 1</span>
            <span>Slice 4 - Image 2</span>
            <span>Slice 4 - Image 3</span>
            <span>Slice 4 - Image 4</span>
        </div>
    </div>
 
    <!-- titles -->
    <div class="cr-titles">
        <h3>
            <span>SEYMOUR ART</span>
            <span>Verona, Italy</span>
        </h3>
        <h3>
            <span>U.DESIGNWELL</span>
            <span>Newcastle, Australia</span>
        </h3>
        <h3>
            <span>TRAVIS TEE </span>
            <span>Porto Alegre, Brazil</span>
        </h3>
        <h3>
            <span>ROBERT PAINTS</span>
            <span>Guadalajara, Mexico</span>
        </h3>
    </div>
 
</div>

</div>

</div>









CSS

.cr-container{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 320px;
	top: 20px;
	margin: 0 auto;
	overflow: hidden;
	border: 20px solid white;
	box-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}

/* numbers */

.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #FFF;
	line-height: 32px;
	font-size: 24px;
	float: left;
	position: relative;
	margin-top:350px; 
	z-index: 1000;
	
}

/* circle size */
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
	
}
/* line height   */
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	position: absolute;
	bottom: -20px;
	right: 0px;
}

.cr-container label.cr-label-img-4:after{
	width: 0px;
}

/* active number color */
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}

/* active button color */
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #FFF;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
.cr-bgimg{
	width: 600px;
	height: 400px;
	left: 0px;
	top: 0px;
	z-index: 1;
	position: absolute;
}

.hidenumber{
display: none;
}

.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
	
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
}
.cr-bgimg div span:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: scaleOut 0.6s ease-in-out;
	-moz-animation: scaleOut 0.6s ease-in-out;
	-o-animation: scaleOut 0.6s ease-in-out;
	-ms-animation: scaleOut 0.6s ease-in-out;
	animation: scaleOut 0.6s ease-in-out;
}


.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	z-index:10000;
}
.cr-titles h3{
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
	z-index: 10000;
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
	opacity: 0;
	top: 50%;
	left: 0px;
	font-family: Impact;
	font-size: 50px;
	letter-spacing: 1px;

	text-shadow: 2px 2px 4px black;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* artists name on pictures */
.cr-titles h3 span:nth-child(1){
	left: 0px;
	font-family: "Arial Narrow", Arial, Serif;
	font-size: 50px;
	letter-spacing: 1px;

	text-shadow: 2px 2px 4px black;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* artists info in blue strip */
.cr-titles h3 span:nth-child(2){
	margin-top: 84px;
	letter-spacing: 2px;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px 0px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span{
	opacity: 0;
	text-shadow: 0px 0px 30px #fff; /* text transition */
}

/* artists name change */
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
	opacity: 1;
	text-shadow: 0px 0px 1px #fff;
}



/* bar change info */
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
	opacity: 1;
}
Iso Godly is offline   Reply With Quote
Old 11-08-2012, 11:25 PM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,705
Thanks: 5
Thanked 876 Times in 851 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Well, just do
Code:
.cr-bgimg div span:first-child {…} /* first child */
.cr-bgimg div span:first-child + span {…} /* second child */
.cr-bgimg div span:first-child + span + span {…} /* third child */
… etc. …
and likewise:
Code:
.cr-bgimg div:first-child {…}
.cr-bgimg div:first-child + div {…}
.cr-bgimg div:first-child + div + div {…}
…
__________________
Don’t click this link!
VIPStephan is online now   Reply With Quote
Old 11-09-2012, 12:11 AM   PM User | #3
Iso Godly
New Coder

 
Join Date: Nov 2012
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Iso Godly is an unknown quantity at this point
I'll try that. I did earlier but it was so much I had to do and got jumbled up somewhere.
Iso Godly is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:52 AM.
Advertisement
Log in to turn off these ads.