Accordion help

jibber4568 · April 19, 2008

Hey there, i am pretty new to CSS and AJAX/javascript etc.

I have managed to build myself an accodion using images but am having problems positioning the content. As you can see in the image below my content is ever so slightly out of line. What would be the best way for me to correct this? Cheers for the help.

Jibber4568

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="contents">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
            <cc1:Accordion ID="Accordion1" runat="server"
                            SelectedIndex="0"
                            FadeTransistion="true"
                            FramePerSecond="40"
                            TransitionDuration="250"
                            AutoSize="None"
                            HeaderCssClass="accordianheader"
                            ContentCssClass="accordiancontent">
            <Panes>
            <cc1:AccordionPane ID="Pane1" runat="server" Enabled="False" EnableViewState="True">
            <Header>
            <a href="" onclick=" return false";><img src="Waxheds_btn.png" border="0" /></a>
            </Header>
            <Content>
             <img src="waxdates2.png" border="0" />
            </Content>
            </cc1:AccordionPane>
            
            <cc1:AccordionPane ID="Pane2" runat="server">
            <Header>
            <a href="" onclick=" return false";><img src="Koaste_btn.png" border="0" /></a>
            </Header>
            
            <Content>
            <img src="waxdates2.png" border="0" />
            
                
            </Content>
            
            </cc1:AccordionPane>
            
            
            <cc1:AccordionPane ID="Pane3" runat="server">
            <Header>
            
            <a href="" onclick=" return false";><img src="Phil_btn.png" border="0" /></a>
            </Header>
            <Content>
            <img src="waxdates2.png" border="0" />
            </Content>
            
            </cc1:AccordionPane>
            
            
            <cc1:AccordionPane ID="Pane4" runat="server">
            <Header>
            
            <a href="" onclick=" return false";><img src="Ollie_btn.png" border="0" /></a>
            </Header>
            <Content>
            <img src="waxdates2.png" border="0" />
            </content>
            
            </cc1:AccordionPane>
            
            
            
              <cc1:AccordionPane ID="Pane5" runat="server">
            <Header>
            
            <a href="" onclick=" return false";><img src="Smash_btn.png" border="0" /></a>
            </Header>
            <Content>
            </Content>
            
            </cc1:AccordionPane>
            
            </Panes> 
            </cc1:Accordion>
              
   </div>
    </form>
</body>
</html>

CSS . although none of this is acually being used.

body {
}
.accordionheader
{
    border:1px solid #213f1f;
    color:White;
    background-color:Blue;
    font-family:Arial;
    font-size:large;
    font-weight:bold;
    padding:5px;
    margin-top:5px;
    cursor:pointer;
}

.accordiancontent
{
    background-color:Green;
    border:1px;
    border-top:none;
    padding:5px;
    padding-top:10px;
    
}

.accordianlink
{
    background-color:Blue;
    color:Lime;
}

Sign In

Accordion help

Recommended Posts

jibber4568

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information