Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Hover-Effekt im C_List Modul

    sound_3000

    • Neu im Forum
    • Beiträge: 22
    Hover-Effekt im C_List Modul
    am: 04. Februar 2013, 16:52:59
    Komme nicht mehr weiter, darum bitte ich um Hilfe durch ein CSS-Experte.
    Hier die URL um die's geht: http://sound3000.freeunix.net
    Ich möchte gerne in der Kategorienübersicht auf der Startseite einen Rollover-Effekt haben, wenn man mit der Maus über die Buttons drüberfährt.
    Ich denke da an folgenden Effekt: Die gepunktete Kontur sollte normal 1px solid sein in einer anderen Farbe, das reicht mir völlig. Wie kriege ich das hin?

    Ich meinte, dass man was in der #cat_show2 rumbasteln muss, kriegs aber nicht hin

    Hier mein CSS-Code:
    Code: CSS  [Auswählen]
    /* -----------------------------------------------------------------------------------------
       $Id: stylesheet.css 1262 2005-09-30 10:00:32Z mz $  

       XT-Commerce - community made shopping
       http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))

       Copyright (c) 2004 XT-Commerce
       -----------------------------------------------------------------------------------------
       based on:
       (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
       (c) 2002-2003 osCommerce(stylesheet.css,v 1.54 2003/05/27); www.oscommerce.com
       (c) 2003      nextcommerce (stylesheet.css,v 1.7 2003/08/13); www.nextcommerce.org

       Released under the GNU General Public License
       -----------------------------------------------------------------------------------------
       
       XTC5 Template & Stylesheets
       -----------------------------------------------------------------------------------------
       (c) 2007 Ing. Michael Fuerst
           bluegate communications
               http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))
       ---------------------------------------------------------------------------------------*/


    #cat_show1 {  width:100%px;
    min-height:200px;
    background-color:#FFFFFF; /* Farbe ganzer Hintergrund */
    border:solid #ccc;
    border-width:0px 0px 0px 0px;
    padding:10px 0px 0px 0px;
    }
    #cat_show2 { width:115px;
    height:150px;
    color:#000000;
    background-color:#FFFFFF;
    border:dotted #ccc;
    border-width:1px 1px 1px 1px; /* Konturstärke */
    margin:5px 12px 8px 0px; /* Abstände Boxen */
    float:left;
    }
    #cat_show_name { width:115px;
    height:22px;
    background: #868686 url(img/bg_boxheader.gif); /* Farbe Textbalken */
    /* Zentrieren */
    line-height:22px;
    text-align:center;
    }
    #cat_show_name a, #cat_show_name a:link, #cat_show_name a:visited, #cat_show_name a:hover, #cat_show_name a:active { text-decoration:none;
    font-size:12px;
    color:#ffffff;
    font-weight:normal;
    cursor:pointer;
    }
    #cat_show_text { width:115px;
    height:30px;
    background-color:#FFFFFF;
    /* Zentrieren */
    line-height:30px;
    text-align:center;
    }
    #cat_show_text p { margin:0px 0px 0px 0px;
    }
    #cat_show_image { width:115px;
    height:120px; /* Position Produktbild */
    background-color:#FFFFFF;
    /* Zentrieren */
    line-height:120px;
    text-align:center;
    }
    .cat_image { height:100px;
    max-width:100px;
    border:solid #ffffff;
    padding-top: 11px;
    }
    #cat_clear { clear:both;
    height:0;
    margin:0;
    padding:0;
    font-size:0;
    }
    /* THE BIG GUYS */
    * {
            margin:0;
            padding:0
    }
    body {
            font-family:Arial, Sans-serif;
            font-size:12px;
            margin:0px 0;
            padding:0;
            background:#E9E7F2;
            color:#333;
            line-height:17px;
    }
    /* HEADINGS */
    h1 {
            color:#000000;
            background-color:#ededed;
            font-weight:bold;
            font-size:13px;
            margin:0px 0px 15px 0px;
            padding:2px;
            padding-left:4px;
            width:auto;
            border: #A80872 solid;
            border-width:1px 0px 1px 0px;
            padding-bottom:2px;
    }
    h2 {
            color:#000000;
            font-weight:bold;
            font-size:14px;
            margin:50px 0px 8px 0px;
            padding:0px;
    }
    h3 {
            color:#A80872;
            font-weight:bold;
            font-size:13px;
    }
    /* LINKS GLOBAL */
    a, a:link, a:link, a:link, a:hover {
            background:transparent;
            text-decoration:none;
            outline: none;
            cursor:pointer;
    }
    a:link {
            color:#A80872;
            outline: none;
    }
    a:visited {
            color:#A80872;
            outline: none;
    }
    a:hover, a:active {
            color:#A80872;
            outline: none;
    }
    a:hover {
            color:#555;
            text-decoration:underline;
            outline: none;
    }
    a img {
            border:none;
            outline: none;
    }
    /* INPUT ELEMENTS GLOBAL (CSS 1 compatible) */
    input {
            font-family:Arial, Sans-serif;
            font-size:12px;
    }
    textarea {
            font-family:Arial, Sans-serif;
            font-size:12px;
            border:1px solid #666;
            padding:10px;
            background:url(img/input_bg.gif) no-repeat;
    }
    select {
            font-family:Arial, Sans-serif;
            font-size:12px;
            border:1px solid #666;
    }
    /* INPUT ELEMENTS DETAILED (CSS 2 compatible - works only in new browsers (FF 2.0, IE 7...) */
    input[type=text], input[type=password] {
            border:1px solid #666;
            padding:2px;
            background:url(img/input_bg.gif) no-repeat;
    }
    /* PARAGRAPH GLOBAL */
    p {
            margin:8px 0px;
    }
    /* FAKE HR DIV CAUSE OF IE TROUBLES */
    div.hr {
            padding-top:1px;
            height:0;
            overflow:hidden;
            margin:0;
            line-height:0px;
            background-color:#4E4E4F;
    }
    div.hrlightgrey {
            padding-top:1px;
            height:0;
            overflow:hidden;
            margin:0;
            line-height:0px;
            background-color:#333;
    }
    div.hrproductpreview {
            padding-top:1px;
            height:0;
            overflow:hidden;
            margin:12px 0px;
            display:inline;
            height:0px;
            line-height:0px;
            display:block;
            background-image:url(img/hr_productpreview.gif);
    }
    /* TABLE GLOBAL */
    table td {
            padding:3px;
    }
    /* WHOLE SITE WRAPPER */
    #wrap {
            margin: 0 auto;
            width:980px;
            background-color:#fff;
            border: #fff solid;
            border-width:0px 10px 10px 10px;
            margin-bottom:10px;
    }
    /* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
    #header {
            height:140px;
            background: #A80872 url(img/top_logo.jpg) no-repeat;
            border-top: 10px solid #fff;
            border-bottom:1px solid #fff;
    }
    #header #logo {
            float:left
    }
    #header #search {
            width: 230px;
            height:75px;
            float:right;
            color:#fff;
            padding:30px 0px 0px 60px
    }
    #header #search a {
            color:#fff;
            font-size:11px;
    }
    #header td {
            padding-top:1px;
            padding-right:4px;
    }
    /* BREADCRUMB PATH AS LIST */
    #breadcrumb {
            clear:both;
            color:#c64934;
            padding:1px 0px 10px 15px;
            list-style-type:none;
            outline: none;
            height:22px;
            background: #fff url(img/bg_breadcrumb.gif) repeat-x;
            font-size:11px;
    }
    #breadcrumb a, #breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:hover, #breadcrumb a:active {
            line-height:23px;
            text-decoration:none;
            outline: none;
            font-weight:normal;
            cursor:pointer;
            color:#333333;
            margin:0;
            padding:0;
    }
    /* TOPMENU AS LIST */
    #topmenuwrap {
            background: #333 url(img/bg_topmenu.gif) repeat-x;
            height: 30px;
            position:relative;
            zoom:1;
    }
    #topmenuwrap #search {
            text-align:right;
            height:26px;
            color: white;
            font-size:12px;
            padding: 2px 4px 2px 0px;
            margin:0;
            float: right;
    }
    #topmenu {
            float:left;
            padding:0;
            margin:0;
            list-style-type:none;
            height:30px;
            font-size:13px;
            background: url(img/bg_topmenu.gif) repeat-x;
    }
    #topmenu li {
            height:30px;
            float:left;
            padding: 0px 15px;
            margin:0;
            background: url(img/bg_topmenu_breakline.gif) no-repeat;
            background-position:right;
    }
    #topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
            line-height:30px;
            vertical-align:middle;
            text-decoration:none;
            outline: none;
            font-size: 12px;
            font-weight:normal;
            cursor:pointer;
            color:#fff;
            margin:0;
            padding:0;
    }
    #topmenu a:hover {
            color:#F6CDE2;
    }
    /* LANGUAGE SELECTION IN TOPMENU LIST */
    #languages {
            text-align:right;
            height:26px;
            font-size:13px;
            background: url(img/bg_topmenu.gif) repeat-x;
            padding: 0px 0px 0px 0px;
            margin:0;
            float: right;
    }
    /* CONTENT WRAPPER */
    #contentwrap {
            clear:both;
            width:980px;
            padding:0;
    }
    /* LEFT COLUMN */
    #leftcol {
            float:left;
            width:200px;
            padding:0px 0px 15px 0px;
    }
    /* RIGHT COLUMN */
    #rightcol {
            float:right;
            width:200px;
            padding:0px 0px 15px 0px;
    }
    /* MAIN CONTENT */
    #content {
            float:left;
            width:525px;
            padding:0px 25px;
            margin-bottom:15px;
    }
    #contentfull {
            width:920px;
            padding:0px 30px;
            margin-bottom:15px;
    }
    /* CATEGORY MENU */

    h2.categoryheader {
            background: #868686 url(img/bg_boxheader.gif);
            height:22px;
            font-size:12px;
            color:#fff;
            padding:0px 8px 0px 8px;
            margin:0;
            line-height:22px;
            vertical-align:middle;
    }
    h2.categoryheader a {
            text-decoration:none;
            outline: none;
            color:#fff;
    }
    ul#categorymenu {
            background-color:#EDEDED;
            margin-bottom:15px;
            border: solid #ccc;
            border-width:0px 1px 1px 1px;
    }
    /* 1st TIER */
    ul#categorymenu li.level1 {
            list-style-type:none;
            border: solid #fff;
            border-width:1px 0px 0px 0px;
    }
    ul#categorymenu li.level1 a {
            text-decoration:none;
            outline: none;
            color:#333;
            background:#eee;
            font-weight:normal;
            padding:3px 0px 2px 6px;
            display:block;
    }
    ul#categorymenu li.level1 a:hover {
            text-decoration:none;
            color:#FFF;
            background-color:#A80872 ;
            font-weight:bold;
    }
    /* 2nd TIER */
    ul#categorymenu li.level2 {
            list-style-type:none;
            border: solid #fff;
            border-width:1px 0px 0px 0px;
    }
    ul#categorymenu li.level2 a {
            text-decoration:none;
            outline: none;
            color:#333;
            background: url(img/dotted1.gif) no-repeat 8px 9px #F3E5ED;
            font-weight:normal;
            padding:4px 0px 4px 18px;
            display:block;
    }
    ul#categorymenu li.level2 a:hover {
            text-decoration:none;
            color:#333;
            background-color:#F6CDE2;
            font-weight:bold;
    }
    /* 3rd TIER */
    ul#categorymenu li.level3 {
            list-style-type:none;
            border: solid #fff;
            border-width:1px 0px 0px 0px;
    }
    ul#categorymenu li.level3 a {
            text-decoration:none;
            outline: none;
            color:#333;
            background: url(img/dotted1.gif) no-repeat 16px 9px #F6CDE2;
            font-weight:bold;
            padding:4px 0px 4px 26px;
            display:block;
    }
    ul#categorymenu li.level3 a:hover {
            text-decoration:none;
            color:#333;
            background-color:#F0B4DD;
            font-weight:bold;
    }
    /* 4th TIER */
    ul#categorymenu li.level4 {
            list-style-type:none;
            border: solid #fff;
            border-width:1px 0px 0px 0px;
    }
    ul#categorymenu li.level4 a {
            text-decoration:none;
            outline: none;
            color:#333;
            background: url(img/dotted1.gif) no-repeat 22px 9px #F0B4DD;
            font-weight:bold;
            padding:4px 0px 4px 34px;
            display:block;
    }
    ul#categorymenu li.level4 a:hover {
            text-decoration:none;
            color:#333;
            background-color:#333;
            font-weight:bold;
    }
    /* 5th TIER */
    ul#categorymenu li.level5 {
            list-style-type:none;
            border: solid #fff;
            border-width:1px 0px 0px 0px;
    }
    ul#categorymenu li.level5 a {
            text-decoration:none;
            outline: none;
            color:#333;
            background: url(img/dotted1.gif) no-repeat 32px 9px #a2a2a2;
            font-weight:bold;
            padding:4px 0px 4px 42px;
            display:block;
    }
    ul#categorymenu li.level5 a:hover {
            text-decoration:none;
            color:#333;
            background-color:#7e7e7e;
            font-weight:bold;
    }
    /* CATEGORY IMAGE DEFINITION */
    img.imgLeft {
            float: left;
            margin: 2px 10px 2px 0px;
            position: relative;
    }
    /* TITEL DER BOXEN */
    h2.boxheader {
            background: #868686 url(img/bg_boxheader.gif);
            height:22px;
            font-size:12px;
            color:#fff;
            padding:0px 8px 0px 8px;
            margin:0;
            line-height:22px;
            vertical-align:middle;
    }
    h2.boxheader a:link, h2.boxheader a:hover, h2.boxheader a:active, h2.boxheader a:visited {
            text-decoration:none;
            outline: none;
            color:#fff;
    }
    .boxbody {
            background-color:#ededed;
            border: solid #ccc;
            border-width:0px 1px 1px 1px;
            padding:3px;
            padding-left:2px;
            padding-right:8px;
            margin-bottom:15px
    }
    .boxbody h3, .boxbody h3 a {
            font-size:11px
    }
    .boxbody h3.center, .boxbody h3.center a {
            font-size:11px;
            text-align:center;
            outline: none;
    }
    .boxbody p {
            color:#000000;
            font-size:11px;
            margin:6px 0px;
            padding-left:4px;
    }
    .boxbody p.center {
            color:#000000;
            font-size:11px;
            text-align:center;
            margin:6px 0px;
    }
    .boxbody td {
            color:#000000;
            font-size:11px;
            margin:6px 0px;
    }
    .boxbody .productOldPrice {
            font-size:11px;
            color:#FF0000
    }
    .boxbody div.hr {
            margin: 5px 0px;
    }
    .boxbody div.hrlightgrey {
            margin: 5px 0px;
    }
    .boxbody a {
            font-size:12px;
            color:#333333;
            outline: none;
    }
    .boxbody .productboximage {
            border: solid 1px #333;
            padding:5px;
            background:#fff;
    }
    .boxbody ul.contentlist {
            margin-left:5px;
            margin-right:0;
            padding:0;
    }
    .boxbody ul.contentlist li {
            margin-left:0px;
            padding:0;
            list-style-type:none;
    }
    .contentlist a {
            border-bottom:0px solid #ccc;
            display:block;
            padding:2px 0;
            outline: none;
    }
    /* WARENKORB - CART BOX */
    h2.boxcartheader {
            background: #A80872 url(img/bg_boxheader_cart.gif);
            height:22px;
            font-size:12px;
            color:#fff;
            padding:0px 8px 0px 8px;
            margin:0;
            line-height:22px;
            vertical-align:middle;
    }
    h2.boxcartheader a {
            text-decoration:none;
            color:#fff;
            outline: none;
    }
    .boxcartbody {
            padding:4px 8px 4px 8px;
            margin-bottom:15px;
            background-color:#EDEDED;
            border: solid #ccc;
            border-width:0px 1px 1px 1px;
    }
    .boxcartbody p {
            font-size:11px;
    }
    /* PRODUCT PREVIEW */
    .productPreview {
            padding:0;
            margin:0;
    }
    .productPreviewContent {
            vertical-align:top;
    }
    .productPreviewContent h2 {
            padding: 0;
            margin:0px 0px 5px 0px;
    }
    .productPreviewContent h2 a {
            font-size:13px;
            font-weight:bold;
            outline: none;
    }
    .productPreviewImage {
            vertical-align:top;
            padding:5px 0px 0px 0px;
    }
    .productPreviewImage img {
            border: solid 0px #333;
    }
    .productPreviewContent .price {
            font-size:16px;
            font-weight:bold;
            padding:0;
            margin:0;
    }
    .productPreviewContent .taxandshippinginfo {
            font-size:11px;
            font-weight:normal;
            color:#333;
            padding:0;
            margin:0;
    }
    .productPreviewContent .vpe {
            font-size:11px;
            font-weight:normal;
            color:#333;
            padding:0;
            margin:0;
    }
    .productPreviewContent .shippingtime {
            font-size:11px;
            font-weight:normal;
            color:#333;
            padding:0;
            margin:0;
    }
    .productPreviewContent .stockimage {
            margin:0;
            padding:0;
    }
    .productPreviewContent .stockimagetext {
            margin:0;
            padding:0;
            font-size:11px;
            font-weight:normal;
            color:#333;
    }
    .productPreviewContent .productOldPrice {
            font-size:12px;
            font-weight:bold;
            color:#ff0000;
    }
    .productPreviewContent .taxandshippinginfo a {
            font-size:11px;
            font-weight:bold;
            color:#333;
            text-decoration:underline;
            outline: none;
    }
    /* PRODUCT INFO / PRODUCT DETAILS */
    #productinfowrap {
            display:table;
            width:100%;
    }
    #productinfoimages {
            float:left;
            background-color:#EDEDED;
            text-align:center;
            width:140px;
            padding:10px;
            margin:0px 10px 10px 0px;
            border: solid 1px #333;
    }
    #productinfoimages .productimage {
            border: solid 1px #333;
    }
    #productinfoimages .hrlightgrey {
            margin: 6px 0px;
    }
    #productinfoprice {
            padding:5px;
    }
    #productinfoprice img {
            cursor:pointer;
    }
    #productinfoprice .hrlightgrey {
            margin: 6px 0px;
    }
    #productinfoprice .productprice {
            margin:0;
            padding:0;
            color:#A80872;
            font-size:16px;
            font-weight:bold;
    }
    #productinfoprice .productOldPrice {
            color:#FF0000;
            margin:0;
            padding:0;
            font-size:12px;
            font-weight:bold;
    }
    #productinfoprice .taxandshippinginfo {
            margin:0;
            padding:0;
            font-size:11px;
            font-weight:normal;
            color:#333;
    }
    #productinfoprice .taxandshippinginfo a {
            margin:0;
            padding:0;
            font-size:11px;
            font-weight:bold;
            color:#333;
            text-decoration:underline;
            outline: none;
    }
    #productinfoprice .shippingtime {
            margin:0;
            padding:0;
            font-size:11px;
            font-weight:normal;
            color:#333;
    }
    #productinfoprice .stockimage {
            margin:0;
            padding:0;
    }
    #productinfoprice .stockimagetext {
            margin:0;
            padding:0;
            font-size:11px;
            font-weight:normal;
            color:#333;
    }
    p.productinfoproductadded {
            font-size:11px;
    }
    .productoptions {
            background-color:#EDEDED;
            padding:6px;
            border: solid #A80872;
            border-width:1px 0px 0px 0px;
    }
    .addtobasket {
            background-color:#F5F5F5;
            padding:6px;
            padding-top:5px;
            text-align:right;
            border: #A80872 solid;
            border-width:1px 0px 0px 0px;
    }
    /* POPUPS PRODUCTINFO */
    body.popupproductinfo {
            padding:15px;
            background: #fff none;
    }
    /* POPUP print_order.html */
    body.popupprintorder {
            font-family:Arial, Sans-serif;
            font-size:13px;
            padding:15px;
            background: #fff none;
    }
    body.popupprintorder .products tr.header td {
            font-weight:bold;
            background-color:#EDEDED;
    }
    body.popupprintorder .products .total {
            text-align:right;
    }
    body.popupprintorder .products .quantity {
            vertical-align:top;
    }
    body.popupprintorder .productname {
            vertical-align:top;
    }
    body.popupprintorder .model {
            vertical-align:top;
    }
    body.popupprintorder .singleprice {
            vertical-align:top;
    }
    body.popupprintorder .totalprice {
            vertical-align:top;
    }
    /* HIGHLIGHTBOX (BACKGROUND) */
    div.highlightbox {
            padding: 15px;
            background-color:#f8f8f8;
            border: solid #d9d9d9 1px;
            overflow:auto;
    }
    div.highlightbox ul {
            margin-left:15px;
            padding:0;
            display:block;
            list-style-type:square;
            line-height:20px;
    }
    div.highlightbox h1 {
            color: #A80872;
            padding:5px 5px 5px 5px;
            margin:0;
            border:none;
            font-size:14px;
    }
    div.highlightbox div.hr {
            height:1px;
            line-height:1px;
            margin:0;
            padding:0;
            display:block;
            border-bottom: solid 1px #eee;
    }
    /* PAYMENT TYPE SELECTION */
    table.paymentblock {
            background-color:#f8f8f8;
            border: #eee solid;
            border-width:0px 1px 1px 1px;
            margin-bottom:15px;
    }
    table.paymentblock tr td.header {
            background-color:#A80872;
            padding:2px;
            padding-left:5px;
            color:#fff;
            font-weight:bold;
    }
    /* SHIPPING TYPE SELECTION */
    table.shippingblock {
            background-color:#f8f8f8;
            border: #eee solid;
            border-width:0px 1px 1px 1px;
            margin-bottom:15px;
    }
    table.shippingblock tr td.header {
            background-color:#A80872;
            padding:2px 2px 2px 5px;
            color:#fff;
            font-weight:bold;
    }
    table.shippingblock tr td {
            vertical-align:top;
    }
    table.shippingblock tr td.description {
            width:100%;
            vertical-align:top;
            padding-left:6px;
    }
    table.shippingblock tr td.radiobutton {
            vertical-align:top;
            white-space:nowrap;
            padding:4px;
    }
    table.shippingblock tr td.radiobutton input {
            margin:0;
            padding:0;
    }
    table.shippingblock tr td.price {
            vertical-align:top;
            white-space:nowrap;
    }
    /* ORDER DETAILS IN ACCOUNT HISTORY */
    table.accounthistoryinfoorderdetails tr td {
            vertical-align:top;
    }
    table.accounthistoryinfoorderdetails tr.header td {
            font-weight:bold;
    }
    /* MESSAGEBOX ON CONTACT SITE */
    textarea.message_body {
            width:130px;
    }
    /* DOWNLOAD BOX FOR USER DOWNLOADS */
    table.downloadbox {
            padding: 5px;
            background-color:#f8f8f8;
            border: solid #d9d9d9 1px;
            margin-bottom:8px;
    }
    table.downloadbox tr td.icon {
            padding-right: 15px;
    }
    table.downloadbox tr td.downloadlink {
            width:100%;
    }
    /* TABLE WICH SHOWS GRADUATED PRICES */
    table.graduatedprice {
            font-size:11px;
            text-align:left;
            margin-top:5px;
    }
    table.graduatedprice tr td.header {
            font-size:12px;
            font-weight:bold;
            text-align:left;
    }
    /* ORDER DETAILS */
    table.orderdetails {
            font-size:11px;
            background-color:#f8f8f8;
            border: #ccc solid;
            border-width:0px 1px 1px 1px;
    }
    table.orderdetails tr td {
            padding:4px;
    }
    table.orderdetails tr.headerrow td {
            background-color:#A80872;
            color:#FFF;
            font-weight:bold;
    }
    table.orderdetails tr.headerrow td.left {
            text-align:left;
    }
    table.orderdetails tr.headerrow td.center {
            text-align:center;
    }
    table.orderdetails tr.headerrow td.right {
            text-align:right
    }
    /* ORDER DETAILS CONTENT ROW 1 */
    table.orderdetails tr.contentrow1 td {
            background-color:#f8f8f8;
            vertical-align:top;
    }
    table.orderdetails tr.contentrow1 td.quantity {
            text-align:center;
    }
    table.orderdetails tr.contentrow1 td.quantity input {
            font-size:11px;
            padding:2px;
            border:solid #ccc 1px;
    }
    table.orderdetails tr.contentrow1 td.productname {
            text-align:left;
    }
    /* ORDER DETAILS CONTENT ROW 2 */
    table.orderdetails tr.contentrow2 td {
            background-color:#f8f8f8;
            vertical-align:top;
    }
    table.orderdetails tr.contentrow2 td.quantity {
            text-align:center;
    }
    table.orderdetails tr.contentrow2 td.quantity input {
            font-size:11px;
            padding:2px;
            border:solid #ccc 1px;
    }
    table.orderdetails tr.contentrow2 td.productname {
            text-align:left;
    }
    /* ORDER DETAILS SINGLE PRICE */
    table.orderdetails tr td.singleprice {
            text-align:right;
            white-space:nowrap;
    }
    /* ORDER DETAILS TOTAL PRICE PER ITEM */
    table.orderdetails tr td.totalprice {
            text-align:right;
            white-space:nowrap;
    }
    /* ORDER DETAILS DELETE CHECKBOX */
    table.orderdetails tr td.delete {
            text-align:center;
            white-space:nowrap;
    }
    /* ORDER DETAILS PRODUCT ATTRIBUTES */
    table.orderdetails tr td.productname table.productattributes {
            margin-top:3px;
    }
    table.orderdetails tr td.productname table.productattributes tr td {
            padding:0px;
    }
    table.orderdetails tr td.productname table.productattributes tr td.attribute {
            padding-right:4px;
            width: 200px;
            white-space:nowrap;
    }
    table.orderdetails tr td.productname table.productattributes tr td.value {
            width:100%;
    }
    /* ORDER DETAILS SUBTOTAL */
    table.orderdetails tr td.subtotal {
            background-color:#f8f8f8;
            text-align:right;
            border: #ccc solid;
            border-width:1px 0px 0px 0px;
    }
    /* PRODUCT NAVIGATOR */
    div.productnavigator {
            background-color:#EDEDED;
            padding:8px;
            border:#333 1px solid;
    }
    /* REVIEW LIST */
    table.reviewlist {
            background-color:#f8f8f8;
            border: #ccc solid;
            border-width:0px 1px 1px 1px;
    }
    table.reviewlist tr td {
            padding:4px;
            white-space:nowrap;
    }
    table.reviewlist tr.header td {
            background-color:#ccc;
            color:#fff;
            font-weight:bold;
    }
    table.reviewlist tr.contentrow1 td {
            background-color:#f8f8f8;
    }
    table.reviewlist tr.contentrow2 td {
            background-color:#f8f8f8;
    }
    textarea#review {
            width:95%;
    }
    /* MEDIA LIST */
    table.medialist {
            background-color:#f8f8f8;
            border: #ccc 1px solid;
    }
    table.medialist tr td {
            padding:6px;
            white-space:nowrap;
            vertical-align:top;
    }
    table.medialist tr.contentrow1 td {
            background-color:#f8f8f8;
    }
    table.medialist tr.contentrow2 td {
            background-color:#f8f8f8;
    }
    /* SITEMAP */
    .sitemapwrap {
    }
    .sitemapwrap .sitemapleft {
            background-color:#f8f8f8;
            border: #ccc 1px solid;
            display:table;
            float:left;
            width:235px;
            margin-bottom:15px;
    }
    .sitemapwrap .sitemapright {
            background-color:#f8f8f8;
            border: #ccc 1px solid;
            display:table;
            float:right;
            width:235px;
            margin-bottom:15px;
    }
    .sitemapheader {
            padding:3px;
            background-color:#ccc;
            color:#fff;
            font-weight:bold;
    }
    .sitemapheader a:link, .sitemapheader a:visited, .sitemapheader a:hover {
            color:#fff;
            text-decoration:none;
            outline: none;
    }
    .sitemapcontent {
            padding:6px;
    }
    .sitemapcontent li {
            list-style-type:none;
    }
    /* COMMENTS ON CHECKOUT CONFIRMATION SITE */
    p.checkoutcomment textarea {
            width:100%;
    }
    /* ORDER DETAILS ON CHECKOUT SITE */
    table.checkoutconfirmationorderdetails {
            padding:0;
            margin:0px 0px 10px 0px;
            border:none;
    }
    table.checkoutconfirmationorderdetails tr td.productname {
            width:100%;
            font-weight:bold;
    }
    table.checkoutconfirmationorderdetails tr td.shippingtime {
            padding:0px 0px 0px 30px;
            color:#666;
            font-size:11px;
            font-weight:normal;
            white-space:nowrap;
    }
    table.checkoutconfirmationorderdetails tr td.productattributes {
            padding:0px 0px 0px 30px;
            color:#666;
            font-size:11px;
            font-weight:normal;
    }
    table.checkoutconfirmationorderdetails tr td.productprice {
            white-space:nowrap;
            text-align:right;
    }
    table.checkoutconfirmationorderdetailstotal {
            padding:0;
            margin:10px 0px 0px 0px;
            border:none;
    }
    table.checkoutconfirmationorderdetailstotal tr td.name {
            width:100%;
            text-align:right;
    }
    table.checkoutconfirmationorderdetailstotal tr td.value {
            white-space:nowrap;
            text-align:right;
    }
    /* AGB ON CHECKOUT SITE */
    p.checkoutagb textarea {
            width:100%;
    }
    /* CHECKOUT NAVIGATION */
    ul#checkoutnavigation {
            margin:0;
            padding:0;
            margin-top:15px;
    }
    ul#checkoutnavigation li {
            height: 70px;
            list-style-type:none;
            float:left;
            width:195px;
            margin-right:15px;
            border: solid 1px;
            padding:8px;
    }
    ul#checkoutnavigation li.active {
            background-color: #f8f8f8;
    }
    ul#checkoutnavigation li.active .number {
            font-size:20px;
            font-weight:bold;
    }
    ul#checkoutnavigation li.active .title {
            font-size:14px;
            font-weight:bold;
    }
    ul#checkoutnavigation li.active .description {
            font-size:11px;
    }
    ul#checkoutnavigation li.inactive {
            color:#333;
            background-color: #EDEDED;
            border-color:#333;
    }
    ul#checkoutnavigation li.inactive .number {
            font-size:20px;
            font-weight:bold;
    }
    ul#checkoutnavigation li.inactive .title {
            font-size:14px;
            font-weight:bold;
    }
    ul#checkoutnavigation li.inactive .description {
            font-size:11px;
    }
    /* ERROR MESSAGES */
    .errormessage {
            border: solid #ff0000 2px;
            padding:15px;
            background-color:#FFD6D6;
            margin-bottom:10px;
    }
    /* SUCCESS MESSAGE */
    .messageStackSuccess {
            padding:4px;
            background-color:#66FF66;
    }
    /* FOOTER */
    .footer {
            clear:both;
            text-align:center;
            font-size:11px;
            color:#666;
            background-color:#E2E2E2;
            padding: 8px;
            margin-bottom:5px;
            border-bottom:2px solid #ccc;
    }
    .footer a {
            color:#666;
            text-decoration:underline;
            outline: none;
    }
    /* XTC COPYRIGHT */
    .copyright {
            margin: 0 auto;
            width:970px;
            text-align:center;
            color:#666;
            font-size:11px;
            padding:0px 0px 10px 0px;
    }
    /* XTC ParseTime */
    .parseTime {
            margin: 0 auto;
            width:970px;
            text-align:center;
            color:#666;
            font-size:11px;
            padding:0px 0px 10px 0px;
    }
    /* UPDATE CHANGES 17.10.2008 */
    /* Mehr Bilder unterhalb der Beschreibung */
    .morepics {
            background-color:#EDEDED;
            padding:6px;
            text-align:right;
            border: #333 solid;
            border-width:1px 0px 0px 0px;
            display:block;
            height:auto;
            width:512px;
            float:left;
            margin-bottom:10px;
    }
    .morepics img {
            border: #333 1px solid;
            padding:4px;
            margin-right:8px;
            background:#fff;
            height:100px;
            width:auto;
            float:left;
    }
    /* BESTELLER BOX mit Bilder in DL DT Liste -- JUNG GESTALTEN.com */
    dt {
            float:left;
            width:40px;
    }
    dt img {
            border:1px solid #ccc;
            padding:2px;
            background:#fff;
            max-width:40px;
    }
    dd {
            float:right;
            width:125px
    }
    /* Vorschaubilder TD mit gleichem Abstand */
    /* BOF - dokuman - 2009-06-06 - Fix new products display in firefox - picture size is 120px by default */
    /*.productPreviewImage { width:100px; display:block } */
    .productPreviewImage {
            width:120px;
            display:block;
    }
    /* EOF - dokuman - 2009-06-06 - Fix new products display in firefox size is 120px by default */
    td.productPreviewContent {
            width:400px;
            text-align:left;
    }
    /* BOF - Tomcraft - 2009-09-22 - FIX DER AUFZÄHLUNGEN IM CONTENT */
    #content ol, #content ul {
            margin:10px 0 10px 14px;
    }
    /* EOF - Tomcraft - 2009-09-22 - FIX DER AUFZÄHLUNGEN IM CONTENT */
    /* BOF - Tomcraft - 2009-09-22 - FIX DER AUFZÄHLUNGEN IN DER DRUCKANSICHT */
    .popupproductinfo #productinfowrap ol, .popupproductinfo #productinfowrap ul {
            margin:10px 0 10px 186px;
    }
    /* EOF - Tomcraft - 2009-09-22 - FIX DER AUFZÄHLUNGEN IN DER DRUCKANSICHT */
    /* SEARCHBOX */
    .search_header {
            line-height:normal;
    }
    /* BOF - Dokuman - 2009-08-21 - Better layout on multiple shipping/billing addresses */
    ol#address_block {
            margin-left:30px;
    }
    /* EOF - Dokuman - 2009-08-21 - Better layout on multiple shipping/billing addresses */
    /* BOF - Tomcraft - 2009-10-02 - Include "Single Price" in checkout_confirmation */
    td.main_row {
            border-top: 1px solid #ccc;
    }
    /* EOF - Tomcraft - 2009-10-02 - Include "Single Price" in checkout_confirmation */
    /* BOF - Hetfield - 2010-01-20 - Remove agb-textarea from checkout_payment */
    div.agbframe {
            width:100%;
            height:200px;
            overflow:auto;
            padding:10px;
            background:url(img/input_bg.gif) no-repeat;
            border:1px solid #666;
    }
    /* EOF - Hetfield - 2010-01-20 - Remove agb-textarea from checkout_payment */
    /* BOF - web28 - 2010-04-29 - fix ol and ul Tag  in checkout_payment agbframe */
    div.agbframe ol, div.agbframe ul  {
            margin-left:30px;      
    }
    /* EOF - web28 - 2010-04-29 - fix ol and ul Tag  in checkout_payment agbframe */

    /*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin --------------------------*/
    ul#imageslider {
            margin:0 auto;
            padding:0;
            list-style:none;
            list-style-position:outside;
            overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
            width: 525px; /* Breite des Slideshowcontainers */
    }
    ul#imageslider #slidercontent {
            display: none;  /* Textanzeige deaktiviert durch display:none; */
            z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
            position: relative;
            top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
            width: 525px; /* Breite des Slideshowcontainers */
            overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
            text-align: justify;
            font-size: 0.9em;
            background: #ccc;
            /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
            -moz-opacity: 0.7;
            opacity: 0.70;
            filter:alpha(opacity=70);
    }
    /*---------------------------- Imageslider (c) 2008 by Hetfield - www.MerZ-IT-SerVice.de - End ----------------------------*/
     

    Vielen Dank für eure Hilfe!

    Linkback: https://www.modified-shop.org/forum/index.php?topic=24603.0

    mrt

    • Fördermitglied
    • Beiträge: 31
    • Geschlecht:
    Re: Hover-Effekt im C_List Modul
    Antwort #1 am: 04. Februar 2013, 17:27:46
    Hallo,

    wenn du ein
    Code: CSS  [Auswählen]
    #cat_show2:hover{border: 1px solid #000;}
    in deine CSS einfügst, sollte sich der Rahmen ändern

    Viele Grüße
    Martin

    Matt

    • Experte
    • Beiträge: 4.241
    Re: Hover-Effekt im C_List Modul
    Antwort #2 am: 04. Februar 2013, 19:22:32
    Das kommt ein bisschen auf den Effekt an, den du haben willst. Ein Rahmen dürfte funktionieren, wie von mrt vorgeschlagen, Hintergrund eher nicht.

    Aber mach doch bitte mal die Fehler da aus dem HTML raus, eine ID muss pro Seite eindeutig sein. Also am besten alles in Klassen umwandeln. Das reduziert auch Spezifitätsprobleme.

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.988
    • Geschlecht:
    Re: Hover-Effekt im C_List Modul
    Antwort #3 am: 04. Februar 2013, 20:36:43
    Vor allem solltest du den a-tags ein display:block; geben damit man nicht die kleine Schrift genau mit der Maus anzielen muß.
    Die Bilder könntest du als Hintergrundbilder implementieren und somit bei hover ein anders Bild laden (Stichwort für die Suchmaschine deines Vertrauens: Sprites)
    Für einen simplen Effekt kann man auch auf hover die opacity leicht verändern.

    Wie Matt schon sagt, Klassen vegeben.
    IDs sind sinnvoll wo sie wirklich unique sind und da sollte man sie auch benutzen da IDs um ein vielfaches schneller geparst werden was CSS sowie Javascript betrifft.

    Gruß,
    noRiddle

    sound_3000

    • Neu im Forum
    • Beiträge: 22
    Re: Hover-Effekt im C_List Modul
    Antwort #4 am: 05. Februar 2013, 11:42:51
    Vielen Dank für die Antworten.
    Der Code von mrt funktioniert perfekt für meinen Gebrauch. Bin leider nicht der CSS-Hirsch, darum weiss ich auch nicht genau was ich besser mit den ID's im CSS machen muss.

    Matt

    • Experte
    • Beiträge: 4.241
    Re: Hover-Effekt im C_List Modul
    Antwort #5 am: 05. Februar 2013, 12:12:51
    Bin leider nicht der CSS-Hirsch, darum weiss ich auch nicht genau was ich besser mit den ID's im CSS machen muss.

    Einfach Klassen statt IDs nehmen. Alternativ jemanden fragen, der sich damit auskennt.
    Managed Server
    18 Antworten
    6589 Aufrufe
    20. Mai 2022, 18:25:40 von noRiddle (revilonetz)
    2 Antworten
    2594 Aufrufe
    02. August 2012, 16:15:24 von malinka
    24 Antworten
    9625 Aufrufe
    23. Mai 2022, 15:36:02 von Timm
    2 Antworten
    540 Aufrufe
    15. Mai 2023, 22:07:37 von Frank71
               
    anything