Web Designers, I Need Help (CSS/HTML)

[rexmakesbeats]

so i'm trying to use this css jquery image rotator and i want to add text/description to the image like this rotator has: http://workshop.rs/projects/jqfancytransitions/

this is the code to the rotator that i have
http://tympanus.net/codrops/2011/01/03/parallax-slider/

anybody know what code i need to add to the css to do this? or is there some other way?


**UPDATE** i found a way to add the text on the image but now i'm having issues with the positioning of the image once the browser window is re-sized. see post #3!


any help is much appreciated

 

[PRIME]

Make a span that layers over each image in the slider.

So where your slider more than likely says-



You want to put a span that looks like this-

YOUR DESCRIPTION HERE

So this is how it will look



YOUR DESCRIPTION HERE


In your CSS make a class named "description" and style it accordingly to your needs.

I would go more in depth for you, but I'm typing this from my phone. If you need any help with the steps, or my procedure isn't completely understandable (which I apologize for, I will edit this post later from my computer) then you can always PM me and we can solve the issue for you.


As a matter of fact, when I get home, I'll download the script, add in the description lines for you, and send it to you if by then someone else hasn't helped you solve the issue

 

[rexmakesbeats]

word if u can do that i'd appreciate it! i dont really know css, im only familiar with html. but i'll google around and see if i can come up with something in the meantime

 

[rexmakesbeats]

ok i figured out how to add a text to tthe image slider but now when the browser window is re-sized, the image does not adjust correctly like the rest of the items on the page. the height does, but the width doesn't :x

can someone tell me what to change in the code to fix this?

here's the css code for the text over the image

			.boxgrid{ 
				width: 760px; 
				height: 279px; 
				margin:0; 
				float:left; 
				background:#161613;  
				overflow: hidden; 
				position: absolute; 
				top: 35px; 
				left: 22%; 
				border: 0;
			}
				.boxgrid img{ 
					position: absolute; 
					top: -13%; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 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;
 				}

 

[mycoldyourdone]

do you have a url we can check out?

 

[rexmakesbeats]

do you have a url we can check out?

unfortunately, i dont have a web host at the moment

but this is the slider im using in the demo: http://tympanus.net/Tutorials/ParallaxSlider/
and when u resize the browser window everything adjusts so that the images fit to the window size until it becomes too small.
what happens with my site after adding the text code, is that the image is off center when the browser is resized. i described it best i can, hope that makes sense

 

[mycoldyourdone]

lol i cant tell.

maybe zip it up and send it over here? or if u dont want me to know about what ur doing, take a pic before and after.

 

[rexmakesbeats]

lol i cant tell.
maybe zip it up and send it over here? or if u dont want me to know about what ur doing, take a pic before and after.

full screen

browser window resized

should look like this

 

[rexmakesbeats]

bump

 

[mycoldyourdone]

it was fine before you added the caption code? what did you add for the caption? just css?

if you grab the right hand side of the window and stretch it out does the middle look like it stays in the same position?

if you take off width: 100% from .boxcaption what happens?

take off float left, what happens.

 

[rexmakesbeats]

it was fine before you added the caption code? what did you add for the caption? just css?
if you grab the right hand side of the window and stretch it out does the middle look like it stays in the same position?
if you take off width: 100% from .boxcaption what happens?
take off float left, what happens.

yea it was working correctly before i added the caption code

if i resize the right hand side of the window, it moves slightly. once it is at full screen width, it is positioned correctly

if i remove the width 100% from boxcaption, problem still exists

took off float:left, and same problem


any other suggestions? btw thanks for the feedback

 

[mycoldyourdone]

hmm i cant really tell how your html code is set up

you added .boxcaption which is inside either .captionfull or .caption, but where are those?

is there a caption in the pics? is it the white thing at the top?

 

[Fong$tarr]

Can't you put float middle or float relative? Mind you I suck at CSS so bare with me if I am even saying something that makes sense. I only use code when I adjust some stuff for my blog and that is only so many times in the year. Also if you want that image to position right in the middle all the time, it has to position according to the page size. I haven't read your code up top but maybe you have a side bar that is making all the numbering messed up. Some suggestions anyways.

 

[str8hood]

Just a thought, does this problem happen in other browsers as well? Check it with Chrome, I.E.. If the problem is still there let me know. I've got a feeling that the CSS styling is interfering with some HTML code that might be causing this. It could also be a rendering issue or some incorrect syntax somewhere.

Care to post a quick snapshot of the HTML as well?

 

[rexmakesbeats]

yep same problem in IE, chrome

here's a section of the HTML

Loading images...

			
[list][*][url=http://thoroprod.bandcamp.com]
						
[img]images/1.jpg[/img]
[h3]Dollar & A Dream: The Beat Tape[/h3]
								
Rex
[/url]
					[*][url=http://www.youtube.com/watch?v=5d66THHxKJE]
						
[img]images/2.jpg[/img]
[h3]This Feeling (The Weeknd sample)[/h3]
								
New beat!
[/url]
					[*][url=http://www.youtube.com/watch?v=x5Jbm_Zh_7o]
						
[img]images/3.jpg[/img]
[h3]Everthing (Justin Bieber sample)[/h3]
								
New beat!
[/url]
					[*][img]images/4.jpg[/img]
					[*][img]images/5.jpg[/img]
					[*][img]images/6.jpg[/img]
				[/list]
				[list][*][img]images/thumbs/1.jpg[/img]
					[*][img]images/thumbs/2.jpg[/img]
					[*][img]images/thumbs/3.jpg[/img]
					[*][img]images/thumbs/4.jpg[/img]
					[*][img]images/thumbs/5.jpg[/img]
					[*][img]images/thumbs/6.jpg[/img]
				[/list]

 

[rexmakesbeats]

Can't you put float middle or float relative? Mind you I suck at CSS so bare with me if I am even saying something that makes sense. I only use code when I adjust some stuff for my blog and that is only so many times in the year. Also if you want that image to position right in the middle all the time, it has to position according to the page size. I haven't read your code up top but maybe you have a side bar that is making all the numbering messed up. Some suggestions anyways.

tried float:middle for the .boxgrid but no difference. thanks anyway

and ur right i tried to have it adjust to the page size by using different properties: absolute, relative, etc

 

[rexmakesbeats]

bump

 

[mycoldyourdone]

its kind of hard to put a caption there.

the existing css has the LI the whole page width and makes the IMG in the LI left and right margins to auto, centering them. so if you add stuff to that LI, you might have to play around and mimic the css of the IMG to the divs you added so they center together.

i tried to make a caption from scratch but it took too long. sry, hah

and if you wrap stuff in one LI make sure you wrap every LI the same way even if its empty just to be consistent.

 

[rexmakesbeats]

its kind of hard to put a caption there.
the existing css has the LI the whole page width and makes the IMG in the LI left and right margins to auto, centering them. so if you add stuff to that LI, you might have to play around and mimic the css of the IMG to the divs you added so they center together.
i tried to make a caption from scratch but it took too long. sry, hah
and if you wrap stuff in one LI make sure you wrap every LI the same way even if its empty just to be consistent.

tried messing with the css for the img and caption still nada