19 replies [Last post]
thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

this is the slider that i am using
http://tympanus.net/Tutorials/ParallaxSlider/

when the browser window is re-sized, the image should adjust to center of the page but with my custom changes i did (added text/description box to the image) to the code the image does not adjust correctly when the browser is resized. however, in full screen it is positioned correctly. can someone help me fix this?

full screen

browser re-sized

should look like this

heres the css

*{
	margin:0;
	padding:0;
}
 
.alignleft{float:left;}
.alignright{float:right;}
 
body{
	font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
	font-size:14px;
	background:#fff;
	color:#000;
	overflow-x:hidden;
}
 
h1{
	font-size:56px;
	color:#5d5d5d;	width:1000px;
}
 
h2{
	font-size:20px;
	padding:10px 0px 10px 0px;
	margin:15px 0px 20px 0px;
}
 
h3{ 
	margin: 10px 10px 0px 10px;
 
	color:#FFF; 
	font:14pt Arial, sans-serif; 
	letter-spacing:-1px; 
	font-weight: bold;  
}
 
a {
	color:#fff;
	text-decoration:none;
}
 
a:hover {
	color:#fff;
}
 
.headerlink a:link {
	color:#fff;
}      
 
.headerlink a:hover {
	color:#f6c65a;
}  
 
p{
	padding:5px 0px;
}
 
.wrapper{
	width:1000px;
	margin:20px auto;
}
 
.clear{
	clear:both;
}
 
.header{
	font-family:"Arial", Verdana, Sans-serif;	color:#5d5d5d;
	text-align:right;
	font-size:12px;
	top:0px;
	width:1000px;
	background-color: #000;	padding:5px 10px;
	clear:both;
	margin-top:0px;	margin-left:auto;	margin-right:auto;
}
 
.footer{
	font-family:"Times New Roman", Times, serif;	color:#5d5d5d;	
	width:1000px;
	background-color: #000;	
	padding:10px 10px;
	clear:both;
	margin-top:30px;
	margin-left:auto;	
	margin-right:auto;
}
 
.footer a{
	margin:0px 20px;
}
 
.social-buttons {
	width:125px;
	margin-top:0px;
	margin-right:10px;
	padding:0px;	
	background-color: #000;
 
}
 
.main {
    float:left;
    width:740px;
	height:300px;
	margin-bottom:30px;
	margin-top;30px;
    background:#9c9;
    }
 
.sidebar {
    float:right;
    width:250px;
	margin-bottom:30px;
	margin-top;30px;
    background:#fff;
    }
 
 
 
 
/* Slider Style */
 
.pxs_container{
	width:100%;
	height:420px;
	position:relative;
	border-top:7px solid #fff;
	border-bottom:7px solid #fff;
	overflow:hidden;
	-moz-box-shadow:0px 0px 7px #fff;
	-webkit-box-shadow:0px 0px 7px #fff;
	box-shadow:0px 0px 7px #fff;
}
 
.pxs_bg{
	background:transparent url(../images/bg.png) repeat top left;
}
 
.pxs_bg div{
	position:absolute;
	top:0px;
	left:0px;
	width:7584px; /*1264px window width times number of images*/
	height:420px;
	background-repeat:repeat;
	background-position:top left;
	background-color:transparent;
}
 
.pxs_bg .pxs_bg1{
	background-image:url(../images/bg1.png);
	/*left negative 1/8 of ww*/
}
 
.pxs_bg .pxs_bg2{
	background-image:url(../images/bg2.png);
	/*left negative 1/4 of ww*/
}
 
.pxs_bg .pxs_bg3{
	background-image:url(../images/bg3.png);
	/*left negative 1/2 of ww*/
}
 
.pxs_slider_wrapper{
	display:none;
}
 
.pxs_container ul{
	margin:0px;
	padding:0px;
	list-style:none;
}
 
ul.pxs_slider{
	position:absolute;
	left:0px;
	top:0px;
	height:420px;
}
 
ul.pxs_slider li{
	height:420px;
	float:left;
	position:relative;
}
 
ul.pxs_slider li img{
	display:block;
	margin:35px auto 0px auto;
 
}
 
ul.pxs_thumbnails{
	height:35px;
	position:absolute;
	top:320px;
	left:50%;
}
 
ul.pxs_thumbnails li{
	position:absolute;
	display:block;
}
 
ul.pxs_thumbnails li img{
	border: 5px solid #FFFFFF;
	-moz-box-shadow:1px 1px 7px #fff;
	-webkit-box-shadow:1px 1px 7px #fff;
	box-shadow:1px 1px 7px #fff;
	cursor:pointer;
	display:block;
	opacity:0.7;
}
 
ul.pxs_thumbnails li.selected img{
	opacity:1.0;
}
 
.pxs_navigation span{
	position:absolute;
	width:30px;
	height:60px;
	-moz-box-shadow:0px 0px 2px #fff;
	-webkit-box-shadow:0px 0px 2px #fff;
	box-shadow:0px 0px 2px #fff;
	top:145px;
	opacity:0.6;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	cursor:pointer;
}
 
.pxs_navigation span:hover{
	opacity:0.9;
}
 
.pxs_navigation span.pxs_prev{
	background:#000 url(../images/prev.png) no-repeat center center;
}
 
.pxs_navigation span.pxs_next{
	background:#000 url(../images/next.png) no-repeat center center;
}
 
.pxs_loading{
	color:#fff;
	font-size:20px;
	padding:15px 15px 15px 50px;
	position:absolute;
	background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	opacity:0.7;
	width:180px;
	position:absolute;
	top:150px;
	left:50%;
	margin-left:-90px;
}
 
 
 
/* Text/Description Overlay */
 
.boxgrid{ 
	width: 760px; 
	height: 279px; 
	margin:0; 
	float:left; 
	background:#161613;  
	overflow: hidden; 
	position: absolute; 
	top: 35px; 
	left: 22%; 
	border: 0;
	}
 
.boxgrid img{ 
	position: relative; 
	top: -13%; 
	left: 0; 
	border: 0; 
}
 
.boxgrid p{ 
	padding: 0px 10px; 
	color:#afafaf; 
	font-weight:bold; 
	font:10pt "Lucida Grande", Arial, sans-serif; 
}
 
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000;
	top: 100%; 
	height: 70px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 }
 
 .captionfull .boxcaption {
 	top: 260;
 	left: 0;
 }
 
 .caption .boxcaption {
 	top: 0;
 	left: 220;
 }

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi thoroprod, Can you somehow

Hi thoroprod,
Can you somehow provide a link to a working example of your page.
It would be so much easier to fix.

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

ahhh, i have a host but i

ahhh, i have a host but i havent made it public as i dont want to put it up until it is complete. perhaps i can paste any of the html on here that would help?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

can you upload it as a page

can you upload it as a page to your host as something like test.html and add a robots.txt that excludes it.
No one will link to it and we ad rel=nofollow to all links.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 7 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

if not

Hey,

if its not possible for you to put it up there - you could just fiddle it here - http://jsfiddle.net/

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

i've tried messing around

i've tried messing around using different properties like absolute, relative, margin:auto, etc for the boxcaption, boxgrid, slider to no avail. any suggestions?

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

Tony wrote: Hi thoroprod, Can

Tony wrote:

Hi thoroprod,
Can you somehow provide a link to a working example of your page.
It would be so much easier to fix.

try this;
http://thoroprod.com.previewdns.com/index2.html

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

It's using JavaScript to

It's using JavaScript to postion those elements previous next buttons.

Try this:

.boxgrid {
width: 760px;
height: 279px;
background: #161613;
overflow: hidden;
border: 0;
margin: 0 auto;
}

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

Tony wrote: It's using

Tony wrote:

It's using JavaScript to postion those elements previous next buttons.

Try this:

.boxgrid {
width: 760px;
height: 279px;
background: #161613;
overflow: hidden;
border: 0;
margin: 0 auto;
}

no luck Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

When you commence throwing

When you commence throwing *stuff* at the wall to see what sticks, it is necessary to clean the wall before throwing the next patty. Float and absolute are mutually exclusive. Do this:

.boxgrid {
    background: none repeat scroll 0 0 #161613;
    border: 0 none;
    float: left;
    height: 279px;
    left: 22%;
    margin: 35px auto 0;
    overflow: hidden; /*not sure why that's there!*/
    position: absolute;
    top: 35px;
    width: 760px;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

gary.turner wrote:When you

gary.turner wrote:
When you commence throwing *stuff* at the wall to see what sticks, it is necessary to clean the wall before throwing the next patty. Float and absolute are mutually exclusive. Do this:
.boxgrid {
    background: none repeat scroll 0 0 #161613;
    border: 0 none;
    float: left;
    height: 279px;
    left: 22%;
    margin: 35px auto 0;
    overflow: hidden; /*not sure why that's there!*/
    position: absolute;
    top: 35px;
    width: 760px;
    }

cheers,

gary

the image is now centered correctly when the browser is resized however there a few other problems that arise.
(**UPDATE** this was fixed by editing the .boxgrid img) 1. the image is positioned too high, (the reason I originally had "top:35px")

still having this problem with the captionbar
2. the captionbar is now working incorrectly, as it spans across the entire page and does not hide

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

My bad

I broke it. Here is the patch.

.boxgrid {
    background: none repeat scroll 0 0 #161613;
    border: 0 none;
    height: 279px;
    margin: 35px auto 0;
    overflow: hidden;  /*Well, now I know why it's there. ;)*/
    position: relative;  /*Provides position reference.*/
    width: 760px;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

gary.turner wrote: I broke

gary.turner wrote:

I broke it. Here is the patch.

.boxgrid {
    background: none repeat scroll 0 0 #161613;
    border: 0 none;
    height: 279px;
    margin: 35px auto 0;
    overflow: hidden;  /*Well, now I know why it's there. ;)*/
    position: relative;  /*Provides position reference.*/
    width: 760px;
    }

cheers,

gary

perfect! thank you!

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

i have another small problem

i have another small problem i'm somewhat embarrassed to ask Puzzled

i'm trying to align the header font to the right but it extends too far into the .sidebar

i have it inside the .main class that spans a width of 740px. for some reason it extends beyond that width when i try to align text "right"

how do i fix this?

screenshot

live link of what it looks like for now: http://thoroprod.com

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You have set the width of the

You have set the width of the H1 to be 1000px;
Either remove that rule, set it to auto or the width of the .main 740px;
Best to remove it and not set a width unless it is needed.

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

Tony wrote:You have set the

Tony wrote:

You have set the width of the H1 to be 1000px;
Either remove that rule, set it to auto or the width of the .main 740px;
Best to remove it and not set a width unless it is needed.

ahhh that's right

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

so i've been tweaking my

so i've been tweaking my website here and there and i must of changed something by accident because now my right-arrow on the image slider is not positioned correctly..i dont understand what it was because i didn't touch any of the css/html coding for the slider.. also strangely enough, if u resize the browser then return to fullscreen, it is positioned correctly. Puzzled

anyone know how to get it back to the edge of the photo?

url: http://thoroprod.com

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

It is positioned via

It is positioned via JavaScript and looks to be out by the width of the scrollbar.
Once you resize the window it is calculated correctly.
The structure of the slider is overly complex, I can't see a simple fix.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

@thoroprod

It is a best practice to limit each thread/topic to one issue. When the issue changes, a new thread with an appropriate problem heading will make it more reliably searched and easier for members with different skills to notice and respond.

cheers,

gary/mod

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thoroprod
thoroprod's picture
Offline
Regular
Last seen: 6 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-08-30
Posts: 35
Points: 45

Tony wrote: It is positioned

Tony wrote:

It is positioned via JavaScript and looks to be out by the width of the scrollbar.
Once you resize the window it is calculated correctly.
The structure of the slider is overly complex, I can't see a simple fix.

it just doesnt make sense to me. unless some of the javascript i added for the twitter feed is interfering with the other scripts. hopefully there is an explanation for this and not-so-difficult fix. something this small is just giving me a headache Puzzled