jQuery Cycle Plugin

[Woody]

Hello again oh Wizards of the Web!

 

I'm trying to use the jQuery Cycle Plugin on a new page of my website (view at www.todaystruth.com/NewBSPage.html). I haven't yet linked the rest of the site to this page. The plugin functions as advertised. My problem is that the paragraphs I am cycling are not picking up the CSS I assigned to their respective classes. Am I missing something here? I admit I am a bit new to jQuery. Thanks for any help/advice.

[virtual]

Firebug is not showing the class for your p tags at all, so declare them as p.1stBox instead of just .1stBox.

[falkencreative]

I don't believe you can use a number as the first character in a class name. Validate your document -- I'm pretty sure that will be an error that the validator will point out. You'll need to change your class names in such a way that a number is not the first character of the class.

[virtual]

Quite right, I forgot about that as I never use numbers to identify tags.

http://www.w3schools.com/css/css_id_class.asp

Edited October 19, 2010 by virtual

[BeeDev]

I don't believe you can use a number as the first character in a class name. Validate your document -- I'm pretty sure that will be an error that the validator will point out. You'll need to change your class names in such a way that a number is not the first character of the class.

 

Correct. Instead of class 1stBox, use Box1, that should do the trick

[Woody]

Thanks Ya'll! Actually I remember that I can't use a number as the first character in the classname...but now I remember it MORE!

 

Now the paragraphs are properly formatted, but not positioned as the CSS calls for. They won't center in the div. I'll try a few more things...but if anyone has a suggestion...??

 

Thanks again.

[virtual]

Because they are position: absolute; top: 0; left: 0;

So they are showing where they have been placed. The text-align: center; is only making the text align in the center of the paragraph it does not place the paragraph within the center of the div.

[Woody]

Where are the paragraphs positioned top:0;left:0;? The position:absolute; applies to the div bSRotaBox, but that positions the DIV, not it's contents, right? And it is positioned at top:510;left:82; I haven't had this problem before. The text-align:center; has always centered the text in the div. What am I missing here? Sorry to be so dense, but I AM just learning. And I AM enrolled in KillerSites Univ. Does the jQuery Cycle Plugin affect the placement?

[virtual]

Give each box a width of say 560px.

[Woody]

Thanks virtual! That last one did it! the width:560px; worked...now could you tell me why? The paragraphs center perfectly in DW CS4...even without the added width attribute.

[virtual]

I think the size of the p tag was being generated by the JS as it was showing 316px and you had not specified a width in the CSS. However I am no JS genius. Glad you got it fixed though.

[virtual]

Missed you other post. I looked in the JS and there is a section which calculates the width and height of images if none is specified. So it would place the image in the top left hand corner. The position absolute for BsRotabox is for the slide container not for the contents.

[virtual]

You need to add some padding to your boxes too, and maybe adjust the width a little. The text is jammed up at the top and is a little off center.

[Woody]

Thanks again virtual! I'll adjust accordingly. Just as soon as I bring in some more firewood!