Forum Moderators: not2easy

Message Too Old, No Replies

Css box size and positioning problem, imho

the box won't position correctly

         

matun

9:02 am on Jan 7, 2008 (gmt 0)

10+ Year Member



Hello all,

Since I'm not allowed to post any links, I'll try to describe my problem. I made a site in pure css (at least I'm trying :)) and everything works fins except on small bit of code.
The thing is, I have a kind of showcase box where I intend to feature the works of my studio. It is supposed to go a pic-by-pic one at a time inside a 208x129px box defined by css.
The structure of html in a file is this:


<div id="predstavljamo">
<h4>PREDSTAVLJAMO</h4>
<div id="predstavljamo_slike">
<div id="wrap">
<div style="display: block;" class="jcarousel-skin-tango jcarousel-container jcarousel-container-horizontal">
<div style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal"></div>
<div style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div>
<div class="jcarousel-clip jcarousel-clip-horizontal">
<ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="width: 208px; left: -8.23089px;" name="mycarousel">
<li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"><img src="images/vistabar_ref1.gif" alt="" height="129" width="208"></li>
<li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"><img src="images/zadar2006.gif" height="129" width="208"></li>
<li jcarouselindex="10" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal"><img src="images/sitestudio.gif" alt="" height="129" width="208"></li></ul></div></div></div></div></div>

As you can see, it has this structure:

<div id="predstavljamo">
<div id="predstavljamo_slike">
<div id="wrap">

The css is this:


#predstavljamo {
padding-top: 30px;
padding-left: 16px;
width: 208px;
height: 176px;}

#predstavljamo_slike {
width: 208px;
}

#wrap {
color: #9900CC;
margin-left: 0px;
}

In fact, in this div I am using a jCarousel, which is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

The problem I am having is that it won't display correctly. It does go back and fort, sliding works too, but the picture items are not positioned correctly; they are starting a bit under the top margin where they SHOULD begin. Also, the items are not centered in a box but kind of divided to a half and then they go one by one but half-by-half each of them. Can anyone try to figure out the problem, it drives me crazy.

Tnx,

Mislav, Croatia

matun

12:28 pm on Jan 7, 2008 (gmt 0)

10+ Year Member



It turned out that the css rule for .jcarousel-skin-tango .jcarousel-item-horizontal needed the "margin: 0px" added in itself, which wasn't defined in a generic css for jcarousel at all (nor documented anywhere). Maybe someone finds this helpful.

matun

12:28 pm on Jan 7, 2008 (gmt 0)

10+ Year Member



It turned out that the css rule for .jcarousel-skin-tango .jcarousel-item-horizontal needed the "margin: 0px" added in itself, which wasn't defined in a generic css for jcarousel at all (nor documented anywhere). Maybe someone finds this helpful.