Cant center slideshow |
Cant center slideshow |
Cobra |
Aug 29 2014, 08:37 PM
Post
#1
|
Group: Members Posts: 3 Joined: 29-August 14 Member No.: 21,479 |
Hello all, im a newbie here. Im having some difficulty getting my slide show to center on my page. When I do get it to center, the slide show actually stops I was hoping someone would be able to tell me why this is happening. Thank you for your time. Here is the code.
<html> <head> <script language="JavaScript1.1"> <!-- var slideimages=new Array() var slidelinks=new Array() function slideshowimages() { for (i=0;i<slideshowimages.arguments.length;i++) { slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks() { for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow() { if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> </head> <body> <a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"--> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg") slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com") //configure the speed of the slideshow, in miliseconds var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit() { if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> </body> </html> |
Frederiek |
Aug 30 2014, 04:18 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
All images in the slideshow are of all kind of different sizes, in width and height. Usually, for a slideshow, they should be the same size.
For a start, set up a good structure for the page, meaning add the necessary and required elements, such as a DOCTYPE and a TITLE. The language attribute on the SCRIPT tag is obsolete, use type="text/javascript". I don't see, how you tried to center the slideshow here. Links and images are inline elements. To center, I'd wrap a DIV around the A link, give it a width and set margin left and right to auto in CSS. Also adding a CLASS to the image tag. See the necessary snippets below: HTML CODE <div class="slides"> <a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" class="slide" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"--> </div> CSS CODE <style type="text/css"> .slides { width: 960px; margin: 20px auto; outline: 1px solid red; } .slides a { display: block; text-align: center; } .slide { text-align: center; } </style> And use a HTML validator regularly to check the correct structure of your page. |
Christian J |
Aug 30 2014, 04:23 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
What have you done to center it?
|
Frederiek |
Aug 30 2014, 08:26 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Yeah, I already wondered about that too.
BTW, you can delete the outline property I set on .slides. I only added that to better see what happened upon testing. |
Cobra |
Aug 30 2014, 02:39 PM
Post
#5
|
Group: Members Posts: 3 Joined: 29-August 14 Member No.: 21,479 |
Fredrick & Christian I forgot to add that I am relatively new to making web pages also. I actually look at someone else s code and made my changes. As far as centering I tried putting the <center></center> both at the very begining and the end as well as in front of and behind where the pictures actually start. I am in the process of trying to get all of the pictures the same size as I know it currently looks horrible lol. Just have some difficulty finding a good free program to resize the mall the same. As far as DOCTYPE and a TITLE please forgive me but I'm clueless
<body><center> <a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"--> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg") slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com")</center> |
Christian J |
Aug 30 2014, 02:55 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
<body><center> <a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"--> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg") slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com")</center> The <center> start tag seems OK, but you can't put the </center> end tag in the middle of the script. I'd put it after the link's </a> end tag, or after the </script> end tag. |
Cobra |
Aug 30 2014, 03:10 PM
Post
#7
|
Group: Members Posts: 3 Joined: 29-August 14 Member No.: 21,479 |
|
Christian J |
Aug 30 2014, 04:28 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
As far as DOCTYPE and a TITLE please forgive me but I'm clueless The purpose of Doctypes (there are many different ones) is explained here: http://htmlhelp.com/faq/html/basics.html#doctype . For a beginner I suggest starting with this one: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Here's a sample HTML document that shows where to put both the Doctype (the example uses another one, with terser HTML syntax rules) and TITLE: http://www.htmlhelp.com/reference/html40/structure.html#doc |
Frederiek |
Aug 31 2014, 03:19 AM
Post
#9
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You could download Gimp, a free graphic editor, to resize your images. Get it at http://www.gimp.org .
BTW, the <center> tag is deprecated in favour of stylesheets. See http://htmlhelp.com/reference/html40/block/center.html . |
Lo-Fi Version | Time is now: 26th April 2024 - 07:57 AM |