Free Web Hosting Forum
(#1)
Old
starr05 starr05 is offline
Member
starr05 is on a distinguished road
 
Posts: 68
Join Date: Oct 2011
Default CSS is not working - 11-28-2014, 12:15 AM

I've made a <div> for my slides for bxslider, but its not coming out the way I want it to. I also am trying to get my directional navigation arrows a little bit towards the center.

Code:

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border:  5px solid #fff;
	left: -5px;
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}
#slider 
{
    text-align:center;
    padding : 40px;
    padding-left:40px;
    padding-right:60px;
    padding-bottom:60px;
    
    }

Last edited by d3iti; 12-08-2014 at 08:01 AM. Reason: #2. Topic titles must be descriptive.
Reply With Quote

(#2)
Old
starr05 starr05 is offline
Member
starr05 is on a distinguished road
 
Posts: 68
Join Date: Oct 2011
Default 11-28-2014, 12:15 AM

HTML 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>BxSlider Test</title>
    
    <!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

    <link rel="Stylesheet" type="text/css" href="css/jquery.bxslider.css" />
    
    <!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<script>
$(document).ready(function(){
 $('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade'
});
});
</script>

</head>
<body>
<div id="slider">
<ul class="bxslider">

  <li><img src="images/slide1.jpg" /></li>
  <li><img src="images/slide2.png" /></li>
  <li><img src="images/slide3.jpg" /></li>
  <li><img src="images/slide4.jpg" /></li>
  <li><img src="images/olaf.png" /></li>
  </div>
 
</ul>
</body>
</html>
http://starr05.comule.com/bxSlider/bxSlider2.html This is my link where I have my work saved.

Last edited by d3iti; 11-28-2014 at 08:35 AM. Reason: [html] tags added
Reply With Quote
(#3)
Old
barniani barniani is offline
Senior Member
barniani is on a distinguished road
 
Posts: 114
Join Date: Nov 2014
Default 12-07-2014, 03:09 PM

I got nothing on top of my head for this Starr, but were you able to come up with a solution here already?
Reply With Quote
(#4)
Old
starr05 starr05 is offline
Member
starr05 is on a distinguished road
 
Posts: 68
Join Date: Oct 2011
Default 12-07-2014, 10:37 PM

Yes, I have, but it wasn't appropriate for what I was doing, so I had to switch it up and use JQuery Lightbox. Which oddly enough, is causing my CSS problems as with my footer. My footer is not showing up, not below my image slider or below the divider that I have like I am suppose to have it.

Here is my link : http://starr05.comule.com/Final%20we.../families.html
Reply With Quote
(#5)
Old
snetus11 snetus11 is offline
Member
snetus11 is on a distinguished road
 
Posts: 50
Join Date: Jul 2014
Default 12-08-2014, 03:34 AM

I am trying to learn how to fix it
Reply With Quote
(#6)
Old
starr05 starr05 is offline
Member
starr05 is on a distinguished road
 
Posts: 68
Join Date: Oct 2011
Default 12-09-2014, 01:12 AM

I think I figured it out, I put my slider in a <div> and it seems to show up now. Now I am not sure how to get my slider bigger and centered? I changed a few things, I still didn't get the result I was looking for.

My link : http://starr05.comule.com/Final%20We.../children.html
Reply With Quote
(#7)
Old
DanielNichesite3 DanielNichesite3 is offline
Junior Member
DanielNichesite3 is on a distinguished road
 
Posts: 18
Join Date: Feb 2015
Default 02-26-2015, 05:35 AM

I think it was overridden by another css class.
Reply With Quote
(#8)
Old
rajeshhome rajeshhome is offline
Junior Member
rajeshhome is on a distinguished road
 
Posts: 4
Join Date: Jul 2015
Default Css - 07-10-2015, 08:47 AM

You have to try inline css, only slider is checking or not.
Reply With Quote
(#9)
Old
advent_geek advent_geek is offline
Senior Member
advent_geek is on a distinguished road
 
Posts: 795
Join Date: Jan 2015
Location: Chennai
Default 07-10-2015, 02:02 PM

Do Not Open or reply old thread bro.
Reply With Quote
(#10)
Old
George P. Patterson George P. Patterson is offline
Junior Member
George P. Patterson is on a distinguished road
 
Posts: 9
Join Date: Jul 2015
Default 07-12-2015, 01:06 AM

I have seen the active slide show. have you done it.
Reply With Quote
Reply

Thread Tools
Display Modes

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



Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2015, Jelsoft Enterprises Ltd.
vBulletin Skin developed by: vBStyles.com