[Rotstift]

Guten Tag,
Ich habe ein Problem, an welchem ich schon tagelang versuche eine Lösung zu finden.
Ich habe eine Slideshow mit Javascript, CSS und etwas html im Header eingefügt. Diese besitzt ein Menü, mit dem man die Bilderanzeige steuern kann. Leider sind davon auch das Standartmenü und einige andere Elemente des MyBB betroffen.

Eine zweite extern eingebundene CSS-Datei definiert das #menu und li und ul Elemente neu, sodass davon auch, wie gesagt das Menü und die Bewertungsfunktion falsch dargestellt werden.

Ich habe schon alles erdenkliche Versucht. VOn umbenennen der ID's bis zum neudefinieren der Stylesheets. Hat bisher allerdings nicht funktioniert.

Habt ihr eine Lösung?
Hier mal ein Bild:
   

Das ist die Extern eingebundene CSS. Sie wird an jedes Template im Header angehangen:

Code:

/* Gallery styles */

#gallery{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    
    /* CSS3 Rounded Corners */
    
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;
    
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    

    background:url(js/panel.jpg) repeat-x bottom center #ffffff;
    
    /* The width of the gallery */
    width:900px;
    overflow:hidden;
}

#slides{
    /* This is the slide area */
    height:150px;
    
    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:900px;
    overflow:hidden;
}

.slide{
    float:left;
}

#menu{
    /* This is the container for the thumbnails */
    height:45px;
    text-align:center;
}

ul{
    margin:0px;
    padding:0px;
}

li{
    /* Every thumbnail is a li element */
    width:60px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
}

li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    background:url(js/pic_bg.png) repeat;
}

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(js/active_bg.png) no-repeat;
}

li.act a{
    cursor:default;
}

.fbar{
    /* The left-most vertical bar, next to the first thumbnail */
    width:2px;
    background:url(js/divider.png) no-repeat right;
    text-align: center;
}
                
li a{
    display:block;
    background:url(js/divider.png) no-repeat right;
    height:35px;
    padding-top:10px;
}

a img{
    border:none;
}


/* The styles below are only necessary for the demo page */

h1{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
    font-size:36px;
    font-weight:normal;
    margin-bottom:15px;
}

h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:normal;
    position:absolute;
    right:0;
    text-transform:uppercase;
    top:15px;
}

#main{
    /* The main container */
    margin:15px auto;
    text-align:center;
    width:900px;
    position:relative;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

p{
    padding:10px;
    text-align:center;
}