Results 1 to 8 of 8

Thread: Hello, the dynamic content script

  1. #1
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Hello, the dynamic content script

    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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Last edited by Snookerman; 02-01-2009 at 02:41 PM.

  3. #3
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Snookerman; 05-08-2009 at 06:44 PM. Reason: added [code] tags

  7. #7
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •