Problem mit "theme.css"

[ponsel21]

Hallöchen,

folgendes "Problem" habe ich mit der Darstellung meiner Artikelseite wenn ich die CSS mit meinen Slideshow-Daten fülle:

So sieht die Artikelseite normalerweise aus:
http://www.beauty-service-sandmann.de/slide/richtig.jpg

Wenn ich nun die CSS (mit Slideshow CSS Daten) verwende passiert folgendes:
http://www.beauty-service-sandmann.de/slide/falsch.jpg

Hier noch der verwendete Code meiner CSS, die den ganzen Spaß verursacht:

/*    JTL-Shop3 Tiny Theme "Dark"
 *
 *    @author JTL-Software.de
 *
 *    Dieses Theme basiert auf dem Theme "Lucid". Die Themes sind im Layout sehr ähnlich, haben aber grundsätzlich verschiedene Farben.
 *    Die folgenden CSS-Regeln werden nach den CSS-Regeln vom Lucid-Theme geladen.
*/


/*         JTL-Shop3 Tiny Theme "Lucid"
**
**         @author JTL-Software.de
**
*/

body { color: #444; background: #babbbf url(images/body_bg.png) repeat-x top center; }
a, a:visited, a:link { color: #585c5f; }
a:hover, a:focus { color: #a03a3a; }
#content { border: none; padding: 10px; }
#contentmid { border: none; }
h1, h2 { text-transform: inherit; }

/* Tiny-Styles zuruecksetzen */
#headlinks, #headlinks.active { background: transparent url(images/main_backgrounds.png) no-repeat top left; height: 48px; border: none; }
#headlinks ul li > a, #headlinks ul li > a:hover, #headlinks li.basket > a, #headlinks li.basket > a:hover { background-color: transparent;  margin: 0; padding: 0 0 0 10px; -moz-border-radius: 0; border-radius: 0; }
#headlinks li { padding: 0; }
#speciallinks { display: none; }
#headlinks_wrapper { margin-left: 0; }
.form fieldset select, .form fieldset textarea, .form fieldset input[type="text"], .form fieldset input[type="password"] { font-size: 1em; }
#styled_view li.gallery { width: 32.9%; }

/* Base Styles */
.page_width { width: 980px; }
#page { background: transparent none; }
#content { background: #fff; border: 1px solid #ccc; padding: 10px; -moz-border-radius:5px 5px 5px 5px; }
.sidebox { background: #fff; }
#breadcrumb, #breadcrumb a { color: #999; }
#logo a { position:relative; display: block; margin-top: 10px; z-index: 999; }
#logo img { position: inherit; top: 0; }
#headlinks ul li > a, .sidebox h3 { font: 12px "Trebuchet MS", sans-serif; font-weight: bold;  color: #000 !important; text-transform:uppercase; text-shadow:0 0 2px #AC5F24; }

/* Eigene Header-Styles */

#header, #header_wrapper { height: 180px; position: relative; }
#style, #settings { top: 15px; right: 300px;  }

/* Suche */
#search { background:none repeat scroll 0 0 transparent; padding:0; position:relative; text-align:right; top:-100%; }
#search-form { width:300px; padding-right:10px; position:absolute; right:0; top:0; height: 40px; padding: 15px 0 0 0; }
#search input[type="text"], #submit_search { vertical-align: top; }
#search input[type="text"] { width:180px; border: none; background: transparent url(images/search_input_bg.png) top left no-repeat; height: 25px; line-height: 25px; padding: 0 10px; }
#submit_search { width: 76px; border: none; background: transparent url(images/search_button_bg.png) top left no-repeat; height: 25px; line-height: 25px; padding: 0 20px 0 0px; font-size: 12px; }
#submit_search:hover span, #submit_search:focus span { text-decoration: underline; }

/* Headlinks */
#headlinks ul li > a, #headlinks ul li > a > span { line-height: 48px; height: 48px; display: block; }
#headlinks ul li > a, #headlinks ul li.basket { background: transparent url(images/main_backgrounds.png) repeat-y 0 144px; padding-right: 0; }
#headlinks ul li > a:hover, #headlinks ul li > a:focus, #headlinks ul li.current > a { background-position: 0 96px !important; }

#headlinks ul li.first > a { background-position: top left; }
#headlinks ul li.first > a:hover, #headlinks ul li.first > a:focus, #headlinks ul li.first.current > a { background-position: 0 192px !important; }
#headlinks ul li > a > span { padding-right: 10px; }

#headlinks ul li.basket { position: relative; left: -10px; background-position: 9px 144px; }
#headlinks ul li.basket > a, #headlinks ul li.basket > a:hover { padding-left: 10px; position: relative; left: 10px; background: transparent url(images/main_backgrounds.png) top right !important; }
#headlinks li.basket.items > a { padding-right: 0; }
#headlinks ul li.basket > a > span { padding-left: 20px; background: transparent url(images/cart.png) no-repeat 0px 15px; }
#headlinks ul li.basket > a:hover, #headlinks ul li.basket > a:focus, #headlinks ul li.basket.current > a { background-position: right 192px !important; }

#headlinks li.basket div { top: 48px; }
#headlinks li.basket div.articles { border-color: #ccc; right: -10px; -moz-border-radius:5px 5px 5px 5px; }

/* Sidepanels */
.panel_left #sidepanel_left { width: 200px; }
.panel_left #content { margin-left: 210px; }
.panel_right #content { margin-right:210px; }

.sidebox { border: none; }
.sidebox h3 { background: transparent url(images/main_backgrounds.png) 0 288px repeat-y; border: none; }
.sidebox .sidebox_content { border: 1px solid #ccc; border-top: none; }


#submit_search { background-image: url(images/search_button_bg.png); }

#headlinks ul li > a, .sidebox h3 { text-shadow:0 0 2px #000; }
#headlinks, #headlinks.active, #headlinks ul li > a, #headlinks ul li.basket, #headlinks ul li.basket > a, #headlinks ul li.basket > a:hover { background-image: url(images/main_backgrounds.png) !important; }

#footer_wrapper { background: transparent none; }
#footer { background: #585c5f; color: #ccc; }
#footer > ul {  padding: 10px; }
#footer a { color: #ccc; }

#settings > ul > li > a { color: #ccc; }
#content, .sidebox, #footer { -moz-border-radius:5px 5px 5px 5px; border-radius: 5px; }
.sidebox { padding-top: 1px; border: 5px solid #fff; width: 190px; }
.sidebox h3 { background: transparent url(images/box.png); padding: 0 0 2px 0; margin-bottom: 5px; border-bottom: 1px solid #eee; }
.sidebox div.sidebox_content { border: none; }

#headlinks ul li > a, .sidebox h3, .submit { text-shadow: none; text-transform:none; font:bold 14px "Trebuchet MS",sans-serif !important; }

#headlinks ul li > a:hover, #headlinks ul li > a:focus, #headlinks ul li.current > a, .sidebox h3 { color: #bc1313 !important; }

.submit { background: url(images/main_backgrounds.png) -15px -10px repeat-y; border-color: #bc1313; color: #fff; }
a.submit, a.submit:visited { color: #000 !important; }
.submit:hover, a.submit:hover { background-position: -10px 96px !important; color: #bc1313 !important;}

/* SLIDESHOW FÜR STARTSEITE */

#slider1 {
    width: 720px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
        overflow: hidden; /* important */
}

#slider1Content {
    width: 720px; /* important to be same as image width or wider */
    position: absolute;
        top: 0;
        margin-left: 0;
}
.slider1Image {
    float: left;
    position: relative;
        display: none;
}
.slider1Image span {
    position: absolute;
        font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
        clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
        top: 0;
    left: 0;
        width: 110px !important;
        height: 280px;
}
.right {
        right: 0;
        bottom: 0;
        width: 90px !important;
        height: 290px;
}
ul { list-style-type: none;}

Den Slideshow CSS Teil findet man ganz unten.

Eventuell hat ja jemand einen Tip was die Templateverschebung in der Artikelansicht verursacht.

Danke und Gruß

Torsten

 

[ag-websolutions.de]

AW: Problem mit "theme.css"

.left .rigzt und ul werden auch vom restlichen Shop verwendet und durch die css der Slideshow neu (und für den Rest fehlerhaft) definiert

Am besten für die slideshow andere css-Namen verwenden

 

[ponsel21]

AW: Problem mit "theme.css"

.left .rigzt und ul werden auch vom restlichen Shop verwendet und durch die css der Slideshow neu (und für den Rest fehlerhaft) definiert

Am besten für die slideshow andere css-Namen verwenden

DANKE. Das hat geklappt! SMILE - da hätte man auch selbst drauf kommen können....

Thanks und Gruß

Torsten