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/dynamici...plegallery.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:

Code:

<!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:

Code:

/*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

Originally Posted by ddadmin

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:

Code:

<!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:

Code:

/*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.

Thread: Simple Controls Gallery

Thread Tools

Search Thread

Simple Controls Gallery

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions