Hello, the dynamic content script

**alwaysme** · 02-01-2009, 08:08 AM

1) Script Title: Dynamic Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pdownpanel.htm

3) Describe problem: I love this place, thanks to the founder and contributors. The issue is that this spans accross the whole page, my website is centered with a width of 750.....where do i control this width instead of having it accross the whole page?

THank you
regards

**Snookerman** · 02-01-2009, 08:17 AM

Add this to your css code:

Edit: I see I missed the toggle button before, use this new code instead, credits to John, thanks.

Code:

#mypanel { width: 750px; margin: 0 auto; }

Good luck!

**alwaysme** · 02-01-2009, 09:32 AM

Thanks for your speedy response,

but are you sure that is the name i need to add "mypanelcontent"

this is the css, its kinda confusing to where i should add that part

Code:

.ddpanel .ddpanelcontent{ /*CSS for "content" DIV of Drop Down Panel*/
color: white;
background: black; /*background of Drop Down Panel*/
/*Do NOT add any "padding" or "margin" properties here! Any padding/margin should be added to your content's container within this DIV instead */
}

.ddpanel .ddpaneltab{ /*CSS for "toggle" tab DIV of Drop Down Panel*/
margin-right: 20px;
font: normal 12px Arial;
}

.ddpanel .ddpaneltab a{ /*"toggle" tab related CSS*/
float: right;
color: white;
background: black url(toggleleft.gif) no-repeat left bottom; /*background of toggle tab*/
text-decoration: none;
letter-spacing: 1px;
}

.ddpanel .ddpaneltab a span{ /*"toggle" tab related CSS*/
float: left;
display: block;
background: transparent url(toggleright.gif) no-repeat right bottom;
padding: 1px 12px 4px 13px;
cursor: pointer;
}

.ddpanel .ddpaneltab a span img.pointerimage{ /*CSS for pointer image within toggle tab*/
margin-top: 2px;
margin-left: 5px;
}

.ddpanel .ddpaneltab a:hover{ /*"toggle" tab related CSS*/
background-color: navy; /*background of toggle tab onMouseover*/
}

.ddpanel .ddpaneltab a:active, .ddpanel .ddpaneltab a:focus{ /*"toggle" tab related CSS*/
outline: 0;
}



.ddpanel .ddpaneltab a:hover span{ /*"toggle" tab related CSS*/
background-color: transparent;
}

Thank you and hope you are not offended by my amatuer request

**Snookerman** · 02-01-2009, 11:51 AM

Oh, I realize I was a bit unclear since I highlighted only a part of the code. Just copy the entire piece of code and add it to your css code.

Good luck!

**jscheuer1** · 02-01-2009, 02:36 PM

If you want the toggle button to also move in, use:

Code:

#mypanel {
width: 750px;
margin: 0 auto;
}

instead.

Also, by way of further explanation, this assumes a DD Drop Down Panel setup using the mypanel id as shown on the demo page for this script.

**alwaysme** · 02-02-2009, 05:52 AM

hello there,

i tried it and it worked but it would not center

i am using this

Code:

#mypanel {
width: 750px;
margin: 0 auto;
align:center; 
}

thanks

**alwaysme** · 02-02-2009, 06:58 AM

Hello again,

There is no use, i tried everything but it would not center

Code:

#mypanel {


margin-left: auto; 	
margin-right: auto; 	
width: 760px;
}

I am using the exact demo on that page

**jscheuer1** · 02-02-2009, 07:44 AM

If you are using IE, you will need a valid URL DOCTYPE like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

for your page. There could be other issues. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Thread: Hello, the dynamic content script

Thread Tools

Search Thread

Hello, the dynamic content script

Bookmarks

Bookmarks

Posting Permissions