Carousel hell

[dopetek]

Hi,

I have been using alloyui http://alloyui.com/examples/carousel/ to make a carousel. I have got it working at last but I would like to link the images to pages. How do I do that?

Here is my site http://fib.x10.mx/index.php and my carousel is on the first page.


Here is a line of the code with an image.

<div class="aui-carousel-item" style="background: url(/img/ii1.jpg);"></div>

I read that links can not be added to css so I am confused as to what to do. I am not a coder but I am slowly figuring it out.

My site is not open yet or finished so don't laugh at it pleaseeeee.

Feel free to use the code for your own site but obviously change the images.

I can't add the code as I keep getting a security warning when inserting it. Maybe something to do with me being a new user. Here is a link to a text file with all the code.

 

[essellar]

I'm seeing a working carousel (for some value of "working", since the images are just colour swatches at the moment, which led me to check the actual image files because it's not immediately clear that you weren't using a separate background that may have been rotating fine while the images were missing). I'm not sure I understand where you're going with the "links cannot be added to CSS" part; was that the inline background image you were talking about, or something else you're trying to do?

 

[dopetek]

I am still building the site. Each coloured image is a png file used as a placeholder until I actually add site content.

It works extremely well apart from one thing. Clicking the coloured images does not send you to another page. I would like to know how to add a link to each image.

And thanks for the reply.

 

[dopetek]

Apparently It can't be done using CSS. Changing the aui-carousel-item divs to anchors should work but I have no idea how to do that.

 

[dopetek]

I got it solved. The link to the file named hell now has the working code in it if anyone wants to use it.

 

[essellar]

Yeah. The one thing missing from the CSS manual (you know, the thing that nobody actually makes, like you're supposed to intuitively know the basics) is that just about anything can be made to look and act like just about anything else if you know the right properties to set. The display property's values (none, block, inline-block, table, table-cell, etc.) are probably the things you want to keep closest to the front of your head most of the time; display has an awful lot of other properties hanging from it, so to speak, and it's usually the key to getting things to be where you want them.

(By the way, this is all a lot easier with a time machine. If you start learning in, say, 1998, when there were fewer useful HTML elements, almost no useful CSS properties and values, and JavaScript didn't really work, then add a little to your knowledge base as things were added to the browsers and the standards, it's pretty easy to keep track of the three new tricks you have to learn every year or so.)