Log in

View Full Version : Simple Controls Gallery


sfoster09
03-31-2009, 09:18 PM
1) Script Title: Simple Controls Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem: Please excuse my ignorance, i am completely new to any form of coding as i normally use frontpage which does the work for me. I am trying to use Simple Controls gallery which is awesome ad have managed to get it working well - save for one thing..

I cant centre the damn thing on the page

I have read and re-read the code to try and interpret what it means, but no luck. The site is not live as of yet, but i can post the code of the page if needed.
ddadmin
04-01-2009, 04:20 AM
The outermost DIV for the gallery is relatively positioned, which can be difficult to center in some browsers. First, ensure your page contains a valid doctype at the top, such as:


<!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" lang="en" xml:lang="en">

Then, use CSS's margin property in your CSS and applied to the outermost DIV of the gallery to center it, for example:


/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
margin: 0 auto;
}
sfoster09
04-02-2009, 07:57 PM
The outermost DIV for the gallery is relatively positioned, which can be difficult to center in some browsers. First, ensure your page contains a valid doctype at the top, such as:


<!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" lang="en" xml:lang="en">

Then, use CSS's margin property in your CSS and applied to the outermost DIV of the gallery to center it, for example:


/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
margin: 0 auto;
}

Thanks for the help. However the "auto" function didnt work on my page. I experimented and found a value works fine but takes some playing around. For me about 400, or more specifically 25% that replaced the "auto" value worked beautifully. Just incase anyone else struggles with this.