Adding a slideshow using apDivs - Will not center / clashes with images.

Hey guys,
I'll be as quick and to the point as possible. I'm new to Dreamweaver and am having some problems in my attempts to create a simple portfolio website.
I'm trying to add in a basic image slide-show while making use of apDivs. I've had a look online and found some fantastic JQuery slide-shows, and I ended up adapting this one for use on my website;
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
I have images as the base of my website and I wanted to add the slide-show on top of them (and the same goes for a couple of embeded YouTube videos too.) I added in an apDiv and placed the code for the slide-show inside it. This created a layer that goes on top of the image, and I am able to put the code for the slide-show inside it with no problems (providing the position of the apDiv is set to absolute.)
#apDiv1 {
    position:absolute;
    top:419px;
    left:400px;
    width:555px;
    height:480px;
    z-index:1;
The problem I'm having is aligning the cursed thing. Obviously, setting the apDiv's positioning to absolute is a bad idea, as while it looked fine in one resolution, it doesn't in another. I've tried changing the position of the apDiv to relative, and then adding in some changes to my code;
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
     margin-right:auto;
    z-index:1;
This centers my slideshow (which is wonderful), however it is no longer layered on-top of the image (since this seems to only work when the position is set to absolute.) Instead, the slideshow appears underneath the image rather than on top.
Is there any possible way I can keep the apDiv (which contains the slide-show) centered whilst remaining on-top of the image? Like I say, it'll layer on top of it fine when set to absolute, but wont center. When set to relative, it'll center but not layer on top. It's one or the other and I'm pulling my hair out over it at the moment.
If anyone can give any help at all, please please let me know. I've included a notepad document including the whole of my code for the page (including my goofy comments) at the address below if it helps in any way;
http://www.box.net/shared/5nufqc78jbg0mfkb00n5

Of course mate. Like I mentioned before, I still don't have any of my web-pages online (since I've been trying to get it all fixed and working first.) I'm hoping to host with 1-2-3 Reg, so I'm waiting for pay day before I buy a years worth from them.
The folder at the link below though contains the HTML document for the page along with all its images and CSS scripts;
http://www.box.net/shared/lgqltz3i90ya8k3nyui9
Despite them being in the folder, if you'd rather, I'll paste the main bodies HTML code below (and also the accoumpanying CSS document. If there's any problems, please let me know. Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Info || Lee Sparkes BSc Games Design Graduate</title>
<link href="styles/website_main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<script>
$(document).ready(function() {
    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});
    //if user clicked on prev button
    $('#prev').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){
            //move the last item and put it as first item
            $('#slides li:first').before($('#slides li:last'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if user clicked on next button
    $('#next').click(function() {
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        //cancel the link behavior
        return false;
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
        function() {
            clearInterval(run);
        function() {
            run = setInterval('rotate()', speed);
//a simple function to click next link
//a timer will call this function, and the rotation will begin.
function rotate() {
    $('#next').click();
</script>

<link href="styles/website_menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #003d6a;
#carousel {
    width:555px;
    height:480px;
    margin:0 auto;
#slides {
    overflow:hidden;
    position:relative;
    width:550px;
    height:440px;
    border:1px solid #ccc;
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;
    width:2200px;
#slides li {
    width:550px;
    height:440px;
    float:left;
#slides li img {
    padding:0px;
#buttons {
    padding:0 0 5px 0;
    float:right;
#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
a#prev {
    background:url(arrow.gif) 0 -31px no-repeat;
a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
a#next {
    background:url(arrow.gif) -32px -31px no-repeat;
a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
.clear {clear:both}
#apDiv1 {
    position:relative;
    width:555px;
    height:480px;
    margin-left: auto;
    margin-right:auto;
    z-index:100;
</style>
</head>

<body>
<div id="container">
<div id="banner"><img src="images/banner.gif" width="1163" height="109" alt="Lee Sparkes || BSc Games Design Graduate" />
    <ul id="website_menu" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="info.html">Info</a></li>
      <li><a href="portfolio.html">Portfolio</a>      </li>
      <li><a href="downloads.html">Downloads</a></li>
    </ul>
</div>

<img src="images/info01.jpg" alt="" width="1163" height="270" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="778,18,877,115" href="http://uk.linkedin.com/in/leesparkes" alt="Linkedin Profile" />
<area shape="rect" coords="903,15,998,113" href="http://checkeredknight.tumblr.com/" alt="Tumblr Profile" />
<area shape="rect" coords="1022,16,1121,113" href="http://www.youtube.com/lightning89" alt="YouTube Profile" />
</map>
<img src="images/info02.jpg" alt="" width="1163" height="522" border="0"/>

<div id="apDiv1"><div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="slides">
        <ul>
            <li><img src="infoslide1.jpg" width="550" height="440" alt="Slide 1"/></li>
            <li><img src="infoslide2.jpg" width="550" height="440" alt="Slide 2"/></li>
            <li><img src="infoslide3.jpg" width="550" height="440" alt="Slide 3"/></li>
            <li><img src="infoslide4.jpg" width="550" height="440" alt="Slide 4"/></li>
        </ul>
        <div class="clear"></div>
    </div>
</div></div>

<img src="images/info03.jpg" alt="" width="1163" height="416" /><img src="images/info04.jpg" alt="" width="1163" height="380" border="0" usemap="#Map4" />
<map name="Map4" id="Map4">
<area shape="rect" coords="374,122,561,149" href="mailto:[email protected]" alt="" />
<area shape="rect" coords="374,152,572,181" href="mailto:[email protected]" alt="" />
</map>
<img src="images/info05.jpg" alt="" width="1163" height="282" /><img src="images/info06.jpg" alt="" width="1163" height="418" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="736,202,940,228" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info07.jpg" alt="" width="1163" height="362" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
<area shape="rect" coords="234,12,548,45" href="http://dyingfordaylight.com/" alt="Dying for Daylight Website" />
<area shape="rect" coords="733,272,941,304" href="http://www.iplay.com/" alt="iplay Website" />
</map>
<img src="images/info08.jpg" alt="" width="1163" height="234" /><img src="images/info09.jpg" alt="" width="1163" height="56" /></div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("website_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#container {
    width: 1163px;
    background: #001524;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}#banner {
    position: relative;
#website_menu {
    position: absolute;
    top: 65px;
    right: 0px;
#main_image {
    background-color: #001524;

Similar Messages

Adobe Reader will not center the printable area on the page

Hi there,
I have posted a few times about this issue already but have still not gotten an answer so I'm trying again. Adobe Reader will not center PDF files on the page if the printable area is less than 8.5" X 11". I make sewing patterns for a living and have always drafted them on 7.5" X 10" artboards (printable areas)....the art boards are centered on the page when they are drafted. Up until a few months ago there has never been an issue for me or my customers to print the patterns in either landscape, portrait (depending on the particuar PDF's orientation) or autoportrait/landscape orientation. Then about 2 or so months ago I started getting complaints about the top left hand side of the page getting cut off. When I tried printing one of the PDF's myself that was drafted in landscape orientation, and I printed it in "landscape" orientation, the top left side of the pdf did indeed get cut off. When I printed in autoportrait/landscape orientation the pdf printed fine, and for many of my customers this seems to fix the problem. But for many of them it doesn't fix the problem and the pdf still prints with part of it getting cut off regardless of which box is checked for orientation. I've found that if I go to the "pages to print" box and click "other options" then select "current view" this often solves the problem...but then the user does not seem to be able to select which pages to print. This is becoming a major problem for my business (lots of complaints) and would really like to know if anyone has looked at this issue and if the problem will be solved anytime soon. It is not just me but many of my colleagues and 100's of customers. Help! Thank you:)

iMac G4, Mac OS X (10.4.9)
Make sure you have the latest Adobe Reader installed for your OS.
http://www.adobe.com/support/downloads/product.jsp?platform=macintosh&product=10
Did you try using Preview. If you control click on the PDF on your desktop you can use the "open with" option.

Itunes stops working after say half hour of use and will not play next song, the only way to get it working again is to close and reopen, then it works fine till next time, but the problem keeps returning

itunes stops working after say half hour of use and will not play next song, I have to close and reopen, it works fine till next time, it keeps happening on a regular basis, HP pavilion laptop, g6 series,
Window 7 64 bit

Hello davewood26,
The following article provides steps that can help get iTunes stabilized.
iTunes for Windows Vista, Windows 7, or Windows 8: Fix unexpected quits or launch issues
http://support.apple.com/kb/TS1717
Cheers,
Allen

TS1702 downloaded app using computer will not load on to phone just says waiting

downloaded app using computer will not load on to phone just says waiting

Hello there Hotley808,
I would recommend deleting the app, and then redownloading it from the iOS App store.
Downloading past purchases from the App Store, iBookstore, and iTunes Store
http://support.apple.com/kb/ht2519
Apps on iOS
Open the App Store on your device.
Make sure you are signed in with the same Apple ID used for the original purchase.
Tap Updates from the bottom navigation bar.
Tap Purchased on the resulting screen.
Locate the app in your Purchased tab.
Tap the download button.
All the very best,
Sterling

HT4528 I have an IPhone 5 and the bluetooth will not stay connected with my 2011 Chrysler 200. I was told by Chrysler service department that it is a problem with the IPhone 5. Is there an update or a fix so i can use the bluetooth in my vehicle?

I have an IPhone 5 and the bluetooth will not stay connected with my 2011 Chrysler 200. I was told by Chrysler service department that it is a problem with the IPhone 5. Is there an update or a fix so i can use the bluetooth in my vehicle?

Iran uses GSM, so the iPhone 5 will work. It is already unlocked. Just put local Iranian SIM in phone.

I have had my iphone 4 for less than 3 months and i always have it in a protective case, recently my bluetooth that i use daily will not stay connected, my alarm clock will not ring, any suggestions on whats going on??

i have had my iphone 4s for less than 3 months and i always have it in a protective case, recently my bluetooth that i use daily will not stay connected, my alarm clock will not ring, any suggestions on whats going on??

Basic troubleshooting from the User's Guide is reset, restart, restore (first from backup then as new). Try each of these in order until the issue is resolved.

Imac 27" Intel Core 7 CPU. Screen goes black and will not respond except with a push of power button. Second monitor connected via displayport continues to display fine. Apply Store did full hardware scan and all is fine. Did clean wipe from Mavrick back

Imac 27" Intel Core7 CPU 16 Gig RAM. Screen goes black and will not respond except with a push of power button. Second monitor connected via displayport continues to display fine. Apply Store did full hardware diagnostic and all is fine. Did clean wipe from Mavrick back to Mountain Lion but problem remains. Apple Store can do no more.

I did some more digging, it appears to be a backlight problem only. I can see the screen very dimly if I use a bright flashlight in a very dark room. It also seems to run ok if the brightness is turned down a LOT.
So I'm thinking this is a LED driver board issue or the display itself. I'll open it up and check the connection between the two and see if I can get any more clues. At least I can use it somewhat now by dimming the display significantly...

I updated our iPad a week ago to 8.1 (12B410) and since then most apps will not close down with the 4 fingers swiping in.

I updated our iPad a week ago to 8.1 (12B410) and since then most apps will not close down with the 4 fingers swiping in. The only way to close them down is to hit the middle bottom button twice then swipe upwards. Is anyone else having this problem and how do I fix it?

This has been happening to me as well with an iPad 3 running iOS 8.1. This is what I do and it works for me. Toggle the setting for Multitasking Gestures off and then on again, Settings>General>Multitasking Gestures>Off. Then toggle it on again.
I have to repeat the sequence from time to time as I have not found a permanent fix. I think that iOS 8 is by far the buggiest iOS release that I have used since I have owned an iOS device.

Verizon Media Manager will not start automatically with Windows, even though it is set to do so.

Verizon Media Manager will not start automatically with Windows, even though it is set to do so. This started with the latest update. I see that the desktop icon for Media Manager now has a security shield on it, and it requires UAC confirmation when you start it, which I don't remember the old version doing.
One thing I noticed, msconfig.exe shows that "C:\Program Files\Verizon\McciTrayApp.exe" is set to start at Windows startup, but the desktop icon used to start Media Manager manually has a target of ""C:\Program Files\Verizon\Verizon Media Manager\Release\Verizon Media Manager.exe" Verizon Media Manager".
I don't remember what the previous version was, but this one is 9.4.86. It asked me if I wanted to update it a few days ago, and I said yes.
I am running Windows 7 Home Premium.
Solved!
Go to Solution.

Try setting the startup option to off and then to on again. It looks to be pointing to a wrong location.
Attached is a partial screen shot of my msconfig setting.
Attachments:
media manager startup cmd line.jpg ‏18 KB

New MBP will not log on with Apple ID

Trying to set up my new MBP Retina for the first time (using WiFi), but it will not log on with my Apple ID due to some server error.
This is certainly not the first time I've set up a new Mac, but it's certainly the very first time I have encountered a problem while doing so.
Suggestions greatly appreciated.

Just skip this step. It is most likely due to an issue on Apple's end, not yours. You can set up iCloud and iTunes later by following these steps:
https://www.apple.com/icloud/setup/mac.html
I hope I helped.

Iphone 4 will not turn on with or without charger. Lock/sleep button is broke. Itunes will not identify phone.

My Iphone 4 shut off randomly last night while charging. It will not turn on with or without charger (I have tried multiple working outlets and usb ports. Didn't work)
The lock/sleep button is broke (I tried pushing it down on multiple surfaces as hard as I could while holding the home button. Didn't work.)
My Itunes will not identify the phone is hooked up to the computer (my itunes is completely up to date. I tried all the methods of pressing down the home button and pluuging in the usb chord while Itunes is running.Tested my roomates Iphone 4 with my chord and it charged and Itunes identified it. Tried his chord as well. Didn't work.)
All the advise I can find in these communities involves using the phone. The screen is black completely black no matter what I do. It makes no noise either (called it several times) I have read about 15 different posts on here and tried every method I found more than once. Do I just need to take it in?

Slugsworth wrote:
Do I just need to take it in?
Apple won't repair it, they just offer you an out of warranty replacement, cost is US $149. Me? I wouldn't spend that kind of money on a discontinued model. I'd sell it for parts on eBay or go to a third-party repair shop. Be aware, if you go the third-party repair shop route, you forfeit all support from Apple, including the right to an out of warranty replacement.

HT204053 iPad will not pair up with wth my Samsung S3 mobile, can you help?

iPad will not pair up with wth my Samsung S3 mobile, can you help?

File transfer via Bluetooth is not supported without a third party app on both devices.
Forget Bluetooth (which is quite slow anyway) and use a cloud service like Dropbox.

Lightroom 4.1 will not import files with a backslash in the name

Lightroom 4.1 will not import files with a name containing a backslash "\" I am using a Mac running OSX 10.6.8 (Snow Leopard). Under Preferences I have checked and "Treat the following characters as illegal" is set to "/:"

Your preferences and configurations will not be deleted. Of course, I'd advice you to back it up anyway and then completely remove LR.
You find all the files here: http://kb2.adobe.com/cps/929/cpsid_92954.html

My garage band will not work properly with new lion upgrade..HELP

My garage band will not work properly with new lion upgrade..HELP
I have tried to open old session i have done in garage band and many of the effects and instruments I have used will not show up. The system seems to have a bug.

If the graphical user interface looks broken, that is quite often a problem of corrupted user preferences - have you tried to remove the preferences file, as described in the FAQ
http://www.bulletsandbones.com/GB/FAQPages/OddBallProbs.html
Here is again the short version:
Quit GarageBand, if it is running.
Open your User Library in the Finder. It is hidden in MacOS X Lion, so use the Finder's "Go" menu:
Finder > GO hold down the "Options" key, until the library appears in the menu, select it.
In the window that opens, open the folder "Preferences" and remove the file:com.apple.garageband.plist and com.apple.garageband.plist.lockfile
Then try again to run GarageBand and download the loops.
The preferences file stores all you user settings that you set using the "Preferences" panel in GarageBand, also the layout of the GarageBand window and the location of your recent projects. You will have to enter these settings again after removing the file.
Regards
Léonie

IPhone 4 will not face time with my i pad it said it is busy.

iPhone 4 will not face time with my I pad it said it is busy.

Do both devices use/have the same calling email address? The can't.
MacMost Now 653: Setting Up Multiple iOS Devices For Messages and FaceTime

Adding a slideshow using apDivs - Will not center / clashes with images.

Similar Messages

Maybe you are looking for