Modifying 'moving boxes' stylesheet to display different size images/video

[ja_blackburn]

Hi,

 

I am taking this example:

 

http://css-tricks.com/examples/MovingBoxes/

 

And trying to add content that is: 480 wide x 315 high. Basically, I am planning to use this to display some videos from action sports site Mpora.

 

My problem is that when I start tweaking the CSS everything goes out of alignment.

 

Can someone help me with the stylesheet? Thanks a lot...learning CSS!

 

----------------------------------------------------

 

* {

margin: 0;

padding: 0;

}

 

body {

    font: 11px Helvetica, Arial, sans-serif;

}

 

#wrapper {

    width: 800px;

    margin: 25px auto;

}

 

#intro {

    padding-bottom: 10px;

}

 

#slider {

    width: 800px;

    margin: 0 auto;

    position: relative;

border: 10px solid #ccc;

}

 

.scroll {

overflow: hidden;

width: 800px;

    margin: 0 auto;

    position: relative;

}

 

.scrollContainer {

position: relative;

}

 

.scrollContainer div.panel {

    padding: 10px;

    width: 274px;

height: 318px;

}

 

#left-shadow {

position: absolute;

top: 0;

left: 0;

width: 12px;

bottom: 0;

background: url(../images/leftshadow.png) repeat-y;

}

 

#right-shadow {

position: absolute;

top: 0;

right: 0;

width: 12px;

bottom: 0;

background: url(../images/rightshadow.png) repeat-y;

}

 

.inside {

padding: 10px;

border: 1px solid #999;

}

 

.inside img {

display: block;

border: 1px solid #666;

margin: 0 0 10px 0;

width: 250px;

}

 

.inside h2 {

font-weight: normal;

color: #111;

font-size: 16px;

margin: 0 0 8px 0;

}

 

.inside p {

font-size: 11px;

color: #ccc;

}

 

a {

color: #999;

text-decoration: none;

border-bottom: 1px dotted #ccc;

}

 

a:hover {

border-bottom: 1px solid #999;

}

 

.scrollButtons {

    position: absolute;

    top: 127px;

    cursor: pointer;

}

 

.scrollButtons.left {

    left: -45px;

}

 

.scrollButtons.right {

    right: -45px;

}

 

.hide {

    display: none;

}

[vinpkl]

without seeing the html nothing can be said.

 

can u post an online link of the page

 

vineet

[ja_blackburn]

If you scroll down on this page, it is under Mpora title

 

http://www.spartanwetsuits.com/gallery/

 

I have tweaked it a bit, but because it was designed for narrower content im struggling with making the slide effect look good. For example, if you click to the right nothing happens.

 

My stylesheet is currently like this:

 

If you need to see the markup use the link i orginally provided for the example. While I am developing it i have just added it to an iframe.

 

Thanks

 

* {

margin: 0;

padding: 0;

}

 

body {

    font: 11px Helvetica, Arial, sans-serif;

color:#FFFFFF;

}

 

#wrapper {

    width: 1000px;

    margin: 10px auto;

}

 

#intro {

    padding-bottom: 10px;

}

 

#slider {

    width: 900px;

    margin: 0 auto;

    position: relative;

border: 10px solid #ccc;

}

 

.scroll {

overflow: hidden;

width: 900px;

    margin: 0 auto;

    position: relative;

}

 

.scrollContainer {

position: relative;

}

 

.scrollContainer div.panel {

    padding: 10px;

    width: 480px;

height: 375px;

}

 

#left-shadow {

position: absolute;

top: 0;

left: 0;

width: 12px;

bottom: 0;

background: url(../images/leftshadow.png) repeat-y;

}

 

#right-shadow {

position: absolute;

top: 0;

right: 0;

width: 12px;

bottom: 0;

background: url(../images/rightshadow.png) repeat-y;

}

 

.inside {

padding: 0px;

border: 1px solid #999;

}

 

.inside img {

display: block;

border: 1px solid #666;

margin: 0 0 10px 0;

width: 480px;

}

 

.inside h2 {

font-weight: normal;

color: #fff;

font-size: 16px;

margin: 0 0 8px 0;

}

 

.inside p {

font-size: 11px;

color: #ccc;

}

 

a {

color: #999;

text-decoration: none;

border-bottom: 1px dotted #ccc;

}

 

a:hover {

border-bottom: 1px solid #999;

}

 

.scrollButtons {

    position: absolute;

    top: 127px;

    cursor: pointer;

}

 

.scrollButtons.left {

    left: -45px;

}

 

.scrollButtons.right {

    right: -45px;

}

 

.hide {

    display: none;

}

 

#mpora_logo{

margin-left: 25px;

}

 

#mpora_footer{

margin: 10px 0px 0px 100px;

 

 

[vinpkl]

did you tried making your thumbnails of the same size like they are in the example of css tricks.

 

did you tried posting the problem on the authors website means css tricks example page.

 

vineet