School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 300,443 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,537 people online right now. Registration is fast and FREE... Join Now!




Alignment goes wrong

 

Alignment goes wrong

Stofke

29 Jun, 2009 - 11:43 AM
Post #1

D.I.C Head
**

Joined: 7 Jan, 2009
Posts: 50



Thanked: 1 times
My Contributions
Hi

i'm building a website for a real estate company and i have a problem.

I use an ajax carousel to diplay images on the frontpage

Website

Now as you can see, my fading border does not align properly , can anyone help me out please?

Thank in advance !

Kristof


stylesheet from site :
CODE


body {
margin : 0;
background-color : #000000;
text-align:center;
border:0
}

#main
{
    width:1164px;
    height:865px;
    text-align:center;
    margin:0 auto;
}

#links
{
    /*position:absolute;*/
    float: left;
    top: 0px;
    width: 189px;
    height: 865px;
    background-image: url(../images/index_01.gif);
}

#banner {
    /*position:absolute;
    left:189px;*/
    float:left;
    top:0px;
    width:800px;
    height:126px;
    background-image:url(../images/index_02.gif);
}

#rechts
{
    /*
    position:absolute;
    left:989px;*/
    float:right;
    top:0px;
    width:175px;
    height:865px;
    background-image:url(../images/index_03.gif);
}

#homeknop
{
    /*
    position:absolute;
    left:189px;*/
    float:left;
    top:126px;
    width:91px;
    height:29px;
    background-image:url(../images/index_04.gif);
}

#missieknop
{
    /*
    position:absolute;
    left:280px;*/
    float:left;
    top:126px;
    width:94px;
    height:29px;
    background-image:url(../images/index_05.gif);
}

#aanbodknop
{
    /*
    position:absolute;
    left:374px;*/
    float:left;
    top:126px;
    width:108px;
    height:29px;
    background-image:url(../images/index_06.gif);
}

#zoekknop {
    /*position:absolute;
    left:482px;*/
    float:left;
    top:126px;
    width:96px;
    height:29px;
    background-image:url(../images/index_07.gif);
}

#menubalk
{
    /*
    position:absolute;
    left:578px;*/
    float:left;
    top:126px;
    width:303px;
    height:29px;
    background-image:url(../images/index_08.gif);
}

#contactknop
{
    /*
    position:absolute;
    left:881px;*/
    float:left;
    top:126px;
    width:108px;
    height:29px;
    background-image:url(../images/index_09.gif);
}

#middenstuk
{
    /*
    position:absolute;
    left:189px;*/
    float:left;
    top:155px;
    width:800px;
    height:555px;
    background-image:url(../images/index_10.gif);
}

#footer
{
    /*
    position:absolute;
    left:189px;*/
    float:left;
    top:710px;
    width:800px;
    height:30px;
    background-image:url(../images/index_11.gif);
}

#onder
{
    /*
    position:absolute;
    left:189px;*/
    float:left;
    top:740px;
    width:800px;
    height:125px;
    background-image:url(../images/index_12.gif);
}
.center
{
text-align:center;
margin : 0;
text-align:center;
border:0;
margin:0 auto;
    }
a
{
display:block;
height:29px;
color:white;
}
#footertekst
{
color:white;
      
}
      
.middleFrame
{

    width:700px;
    height:555px;
    text-align:center;
}


and from carousel

CODE
/* js-disabled class - set image sizes so they all fit in the viewer */
.js-disabled img { width:100px; height:100px; display:block; float:left; margin:0px 0 0; }

#outerContainer { width:800px; height:555px; margin:0; position:absolute; background-image: url(../images/Untitled-1.png); float:left; }
#imageScroller { width:800px; height:555px; position:relative; z-index:-1}
#viewer { width:800px; height:555px; overflow:hidden; position:relative; top:0px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:url(images/controlsBG.png) no-repeat; position:absolute; top:4px; left:4px; z-index:10;    }
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl { background:url(images/rtl.png) no-repeat; left:100px; }
#rtl:hover { background:url(images/rtl_over.png) no-repeat; left:99px; }
#ltr { background:url(images/ltr.png) no-repeat; right:100px; }
#ltr:hover { background:url(images/ltr_over.png) no-repeat; }


User is offlineProfile CardPM
+Quote Post


crazyjugglerdrummer

RE: Alignment Goes Wrong

29 Jun, 2009 - 03:40 PM
Post #2

YOUR AD HERE
Group Icon

Joined: 7 Jan, 2009
Posts: 677



Thanked: 94 times
Dream Kudos: 425
My Contributions
you want the carosel to extend all the way to the right? use width: 100%. I can't just normally change it in firebug, so your ajax code must be updating it with the value 680px.
User is offlineProfile CardPM
+Quote Post

Stofke

RE: Alignment Goes Wrong

30 Jun, 2009 - 12:29 AM
Post #3

D.I.C Head
**

Joined: 7 Jan, 2009
Posts: 50



Thanked: 1 times
My Contributions
QUOTE(crazyjugglerdrummer @ 29 Jun, 2009 - 03:40 PM) *

you want the carosel to extend all the way to the right? use width: 100%. I can't just normally change it in firebug, so your ajax code must be updating it with the value 680px.


Hi ,

Thanks for the reply

The meaning of this is that the carousel fades on the left and the right. So i made a border witht the fade but he won't align it perfectly (as you can see the white space on the left for example)
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 01:30AM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month