jQuery & CSS Help...

[toddart65]

Here's the testing site im referencing: toddyoungart.elementfx.com

3 questions all towards my jQuery slideshow:
[NOTE: I am viewing this page in all browsers (i.e. firefox, safari, IE, Opera, Chrome, etc.)]

1) I attempted to add rounded corners via CSS3 and nothing happens, what's wrong?
2) How would i go about layering the slideshow so that my command/caption bar [which is now currently behind my pictures] is in front?
3) How do i align my captions within my command bar so that it's centered inside the bar? [I have tried vertical-align, text-align, and just plain margins but it moves out of center...]

 

[LifelessCorpse]

In your CSS, you're using "moz-border"... and "webkit-border"... where it should be "-moz" and "-webkit". Those dashes in the front make all the difference in CSS3.

And that's the only one I can fix with my lack of sleep.

 

[as4s1n]

You could change the z-index of that.

CSS:

.slideshow {
/* ... */
position:fixed;
z-index:1;
/* ... */
}

.slideshowCaption {
/* ... */
position:fixed;
z-index:100;
/* ... */
}

You could try align in the

<div align="center">

 

[essellar]

Vertical alignment outside of a table cell isn't really defined in CSS (apart from setting elements relative to a baseline). If you can be sure that the element will always fit on one line, then setting the line-height to the overall height of the container will vertically center the text. If it may be multiline, but never exceed the bounds of a known-sized box, you can set a padding-top value for the container and use negative margin-top values to place the picture and the overlay -- it won't necessarily be centred, but will live in a bounding-box that is centred.

 

[toddart65]

okay, that all fixed now except for one thing.

when i changed the "moz-border" & "webkit-border" its now making the image overlap the border, i've tried doing pads and margins, and shrinking the px width and height but it doesnt seem to cooperate... it's almost like the same problem i had with the command bar just staying behind the slideshow... how do i fix it?

 

[misson]

According to the W3C box model (actually, § 9.9 "Layered presentation" of the visual formatting model), content is in front of the border (some illustrations have it backwards). Rather than using an <img> tag to display the images (keep the <img> for structural purposes and to shape the slide; just set its visibilty to "hidden"), you can either set the slide's background and keep changing it or set the background of the .thumb elements (however, since they don't appear to be link anchors, you should change them to some element type other than <a>). The latter option works better with the fade effect but, depending on how the other elements are styled, may still display in front of the ancestor's border. You might need to put a border on the .thumbs.

<style type="text/css">
  .slides {
      position: relative;
      width: 450px;
      height: 250px;
      /* set a border on .slides so we have a non-opaque border 
       * during the cross-fade */
      border: 3px solid black;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
  }
  .slides .thumb {
      position: absolute;
      /* so .thumb's border overlaps .slides's */
      top: -3px;
      left: -3px;
      border: 3px solid black;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      opacity: 0;
  }

  .slides #slide1 {
    background: url(img/slideshow/1.png);
  }
  .slides #slide2 {
    background: url(img/slideshow/2.png);
  }
  .slides #slide3 {
    background: url(img/slideshow/3.png);
  }
  .slides .default-slide {
    opacity: 1;
  }
</style>
<div id="slides">
  <div id="slide1" class="thumb default-slide">
	<img src="./img/slideshow/1.png" alt="Lily pads on a clam lake" class="slideshow-image" />
  </div>
  <div id="slide2" class="thumb">
	<img src="./img/slideshow/2.png" alt="Field of grass" class="slideshow-image" />
  </div>
  <div id="slide3" class="thumb">
	<img src="./img/slideshow/3.png" alt="Blue sky delight" class="slideshow-image" />
  </div>
</div>

If you only fade-in/out the front slide during a cross-fade, you can skip the border on .slides

 

[toddart65]

I see where you're getting at...

but since i have majority of my page assigned to float, after i applied the code you supplied me with, my footer went up to the top of my content box, all my text and block divs along with the whole border and command bar for my slideshow disappeared... so how do i apply the supplied code so that way i dont unbalance the floats and have peace on my page?

 

[misson]

As it says in the sig,

Any posted code is intended as illustrative example, rather than a solution to your problem to be copied without alteration. Study it to learn how to write your own solution.

The positioning is less important than the background, opacity, visibility & borders. If you already have positioning worked out, all you need to integrate are the other parts.