CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| tapas64
{ Membre }
Messages : 3
| hello grands maîtres du CSS !, j'ai un probleme sur un menu que je n'arrive pas à solutionner... Le voici : j'ai 5 onglets ( A, B, C, D, E ). chaque onglet a plusieurs sous categories: ( A1,A2,A3,A4) ( B1,B2,B3,B4) ( C1,C2,C3,C4) ( D1,D2,D3,D4) ( E1,E2,E3,E4) Lorsque je survolle A, j'ai bien dessous ( A1,A2,A3,A4) qui apparait. Si je clique sur A1 et que je navigue sur la page, les sous menu ne restent pas et ( A1,A2,A3,A4)disparaissent (et réapparaissent bien sur si je survolle ABCD ou E )... Je souhaiterais que les sous-menu restent lorsque je navigue sur la page pour faciliter la navigation. Quelqu'un aurait une idée ?? merci beaucoup ! je rame depuis 3 jours !! voici ma feuille : - Code:
-
/* Header ================================================================================ */ .header-container {} .header { height:147px; } .header .logo { position:absolute; margin:32px 0 0 22px; text-decoration:none !important; } .header .logo strong { position:absolute; top:-999em; left:-999em; width:0; height:0; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; } .header .welcome-msg { float:right; clear:both; padding:7px 0 0 0; font-size:12px; font-weight:bold; color:#e30613; } .header .links { float:right; clear:both; padding:6px 0 0 0; } .header .links li { font-size:12px; padding:0 0 0 16px; } .header .links li a { color:#fff; text-decoration:none; } .header .links li a:hover { text-decoration:underline; } .header .form-search { float:right; clear:both; padding:10px 0 0 0; } .header .form-search label { display:none; } .header .form-search .input-box { float:left; width:185px; height:28px; background:url(../images/bg_search.gif) no-repeat; } .header .form-search .input-text { width:180px; height:24px; line-height:24px; background:none; border:0; color:#7D7D7D; } .header .form-search button { float:left; } .header .form-search button span { background:url(../images/btn_search.gif) no-repeat; width:61px; height:28px; padding:0; } .header .form-search button span span { display:none; } .header .form-search .search-autocomplete { z-index:999; } .header .form-search .search-autocomplete ul { border:1px solid #313131; background-color:#272727; } .header .form-search .search-autocomplete li { padding:3px; border-bottom:1px solid #313131; cursor:pointer; } .header .form-search .search-autocomplete li .amount { float:right; font-weight:bold; } .header .form-search .search-autocomplete li.selected {} .header .form-language { float:right; padding:4px 7px 0 0; } .header .quick-access { padding:23px 24px 0 0; } .header .currencies { float:right; } .header .currencies label { font-size:12px; color:#4B4B4B; padding:0 8px 0 0; } .header .currencies select { border:solid 1px #2F2F2F; background:#252525; width:76px; font-size:11px; color:#fff; }
/********** < Navigation */ .nav-container { min-height:122px; background:url(../images/submenu.jpg) no-repeat 0% 71px; } #nav { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px; position:relative; }
/* All Levels */ #nav li { text-align:left; } #nav li.over { z-index:998; } #nav li.parent {} #nav li a { display:BLOCK; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:BLOCK; white-space:nowrap; cursor:pointer; } #nav li ul a span {white-space:normal; }
/* 1st Level */ #nav li { float:left; height:72px; } #nav li a { float:left; padding:24px 0 26px 0; font-weight:bold; text-transform:uppercase; text-align:center; color:#fff; } #nav li a:hover { color:#fff; background-position:0 -72px; } #nav li.over a, #nav li.active a { color:#fff; background-position:0 -72px; } .nav-1 a { background:url(../images/m1.jpg) no-repeat; width:160px; } .nav-2 a { background:url(../images/m2.jpg) no-repeat; width:120px; } .nav-3 a { background:url(../images/m3.jpg) no-repeat; width:150px; } .nav-4 a { background:url(../images/m4.jpg) no-repeat; width:170px; } .nav-5 a { background:url(../images/m5.jpg) no-repeat; width:170px; } .nav-6 a { background:url(../images/m6.jpg) no-repeat; width:160px; } .nav-7 a { background:url(../images/m7.jpg) no-repeat; width:137px; }
/* 2nd Level */ #nav ul, #nav div { position:absolute; width:921px; top:72px; left:-10000px; background:#d20530 url(../images/submenu.jpg) no-repeat 0 -1px; padding:10px 0 0 9px; opacity:49% filter:alpha(opacity=49);} #nav ul ul { background:#d20530; opacity:0.49; filter:alpha(opacity=49);} #nav div ul { position:static; width:auto; border:none; }
/* 3rd+ leven */ #nav ul ul, #nav ul div { top:47px; }
#nav ul li { float:left; height:auto; } #nav ul li.last { } #nav ul li a { background:none; width:auto !important; padding:0 0 0 10px; font-weight:normal; font-size:13px; color:#fff !important; } #nav ul li a span { float:left; padding:6px 15px 0 0; height:31px; } #nav ul li a:hover { color:#fff !important; background:url(../images/mlink.png) no-repeat !important; } #nav ul li a:hover span { background:url(../images/mlink.png) no-repeat 100% 0%; } #nav ul li.active > a, #nav ul li.over > a { color:#fff !important; background:url(../images/mlink.png) no-repeat !important; } #nav ul li.active > a span, #nav ul li.over > a span { background:url(../images/mlink.png) no-repeat 100% 0%; }
/* Show menu */ #nav li ul.shown-sub, #nav li div.shown-sub { left:0; z-index:999; } #nav li .shown-sub ul.shown-sub, #nav li .shown-sub li div.shown-sub { left:0; } /********** Navigation > */ /* ======================================================================================= */
/* Sidebar =============================================================================== */ .block { } .block .block-title { background:url(../images/block_title.gif) no-repeat; padding:15px 0 17px 20px; } .block .block-title strong { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-transform:uppercase; color:#fff; } .block .block-title strong span {} .block .block-title a { text-decoration:none !important; } .block .block-subtitle { } .block .block-content { padding:20px; background:#252525 url(../images/block_bg.gif) repeat-x; } .block .block-content li.item { padding:5px 0; } .block .btn-remove { float:right; } .block .actions { text-align:right; } .block .actions a { float:left; } .block .empty {}
.block li.odd {} .block li.even { }
/* Mini Products List */ .mini-products-list li { padding:5px 0; } .mini-products-list .product-image { background:#fff; float:left; width:69px; height:62px; } .mini-products-list .product-details { margin-left:85px; } .mini-products-list .product-details .product-name { font-size:12px; line-height:17px; margin:0 0 20px 0; } .mini-products-list .product-details .product-name a { color:#fff; text-decoration:none; } .mini-products-list .product-details .product-name a:hover { text-decoration:underline; } .mini-products-list .price { color:#e30613; }
/* Block: Account */ .block-account {}
/* Block: Currency Switcher */ .block-currency {} .block-currency select { width:100%; border:1px solid #888; }
/* Block: Layered Navigation */ .block-layered-nav {} .block-layered-nav .block-subtitle { padding-bottom:11px; } .block-layered-nav dt { background:#212121; padding:4px 0 5px 6px; color:#545454; } .block-layered-nav dd { padding:12px 0; color:#e30613; } .block-layered-nav .currently {} .block-layered-nav .currently li { background:#212121; padding:4px 0 4px 6px; color:#e30613; margin:0 0 1px 0; } .block-layered-nav .currently li .label { color:#545454; } .block-layered-nav .btn-remove { margin:2px 3px 0 0; } .block-layered-nav .actions { padding:12px 0 40px 0; } .block-layered-nav .actions a { float:right; }
/* Block: Cart */ .block-cart {} .block-cart .block-title { background:url(../images/block_title_cart.gif) no-repeat; } .block-cart .summary {} .block-cart .amount { padding:0 0 12px 0; } .block-cart .amount a { color:#e30613; text-decoration:none; font-weight:bold; } .block-cart .amount a:hover { text-decoration:underline; } .block-cart .subtotal { background:#212121; padding:4px 0 4px 6px; color:#545454; margin-bottom:15px; } .block-cart .subtotal .price { font-size:12px !important; font-weight:normal !important; color:#e30613; padding-left:12px; } .block-cart .empty strong { color:#e30613; } .block-cart .actions { padding:0 0 7px 0; } .block-cart .block-subtitle { padding-bottom:13px; } .cms-index-index .block-cart .block-content { background:#252525 url(../images/index_bg_compare.gif) repeat-x; padding:20px 20px 22px 20px; margin-bottom:1px; }
/* Block: Wishlist */ .block-wishlist {}
/* Block: Related */ .block-related {} .block-related .block-subtitle { padding:0 0 18px 0; } .block-related li { padding:5px 0; } .block-related input.checkbox { float:left; margin-right:-33px; } .block-related .product { margin-left:33px; } .block-related .product .product-image { float:left; margin-right:-85px; } .block-related .product .product-details { margin-left:85px; } .block-related .price-box { margin-bottom:8px; } .block-related .price { font-weight:normal !important; } .block-related .link-wishlist { float:right; } .block-related .block-content li.item { padding:0 0 17px 0; } .block-related .block-content li.last { padding:0 !important; }
/* Block: Compare Products */ .block-compare {} .block-compare .btn-remove { margin:2px 0 0 0; } .block-compare .empty strong { color:#e30613; } .block-compare .block-content li.item { padding:0 0 16px 0; line-height:17px; } .block-compare .block-content li.item a { color:#fff; text-decoration:none; } .block-compare .block-content li.item a:hover { text-decoration:underline; } .block-compare .actions a { margin:3px 0 0 0; } .cms-index-index .block-compare .block-content { background:#252525 url(../images/index_bg_compare.gif) repeat-x; padding:18px 20px 35px 20px; margin-bottom:1px; }
/* Block: Recently Viewed */ .block-viewed {} .block-viewed .block-content li.item { padding:0 0 20px 0; line-height:17px; background:url(../images/mark.gif) no-repeat 0% 8px; text-indent:11px; } .block-viewed .block-content li.item a { color:#fff; text-decoration:none; } .block-viewed .block-content li.item a:hover { text-decoration:underline; }
/* Block: Recently Compared */ .block-compared {} .block-compared .block-content li.item { padding:0 0 20px 0; line-height:17px; background:url(../images/mark.gif) no-repeat 0% 8px; text-indent:11px; } .block-compared .block-content li.item a { color:#fff; text-decoration:none; } .block-compared .block-content li.item a:hover { text-decoration:underline; }
/* Block: Poll */ .block-poll label {} .block-poll .block-subtitle { padding-bottom:13px; } .block-poll input.radio { float:left; margin:1px -18px 0 0; } .block-poll .label { display:block; margin-left:18px; } .block-poll li { padding:0 0 10px 0; } .block-poll .actions { margin:5px 0 0; text-align:left; } .block-poll .answer { font-weight:bold; } .block-poll .votes { float:right; margin-left:10px; }
/* Block: Tags */ .block-tags ul, .block-tags li { display:inline; font-size:13px; } .block-tags li a { color:#fff; } .block-tags .actions { padding:10px 0 0 0; }
/* Block: Subscribe */ .block-subscribe {} .block-subscribe .block-content { background:#252525 url(../images/bg_newsletter.gif) repeat-x; overflow:hidden; } .block-subscribe label { display:none; } .block-subscribe .input-box { float:left; } .block-subscribe .input-text { float:left; background:#272727; border-left:solid 1px #1F1F1F; border-top:solid 1px #1E1E1E; border-bottom:solid 1px #2C2C2C; border-right:0; width:231px; height:17px; font-size:12px; color:#808080; margin:0; } .block-subscribe .actions { float:left; clear:none; padding:0; margin-right:-10px; margin-left:-2px; } .block-subscribe .actions button { height:23px; } .block-subscribe .actions button span { background:url(../images/btn_newsletter.gif) no-repeat; width:32px; height:23px; padding:0; } .block-subscribe .actions button span span { display:none; } /*.block-subscribe .validation-advice { position:absolute; }*/
/* Block: Reorder */ .block-reorder {} .block-reorder li { padding:5px 0; } .block-reorder input.checkbox { float:left; margin:3px -20px 0 0; } .block-reorder .product-name { margin-left:20px; }
/* Block: Banner */ .block-banner {} .block-banner .block-content { text-align:center; }
/* Block: Login */ .block-login label { font-weight:bold; color:#666; } .block-login input.input-text { display:block; width:167px; margin:3px 0; }
/* Paypal */ .sidebar .paypal-logo { display:block; margin:10px 0; text-align:center; } .sidebar .paypal-logo a { float:none; } /* ======================================================================================= */
/* Category Page ========================================================================= */ .category-title { } .category-image { width:100%; overflow:hidden; margin:0 0 10px; text-align:center; } .category-image img {} .category-description { margin:0 0 10px; } .category-products {}
/* View Type: Grid */ .products-grid { position:relative; margin-right:-2px; margin-bottom:1px; } .products-grid.last { } .products-grid li.item { float:left; width:206px; margin:0 1px 0 0; } .products-grid li.last { margin:0 !important; } .products-grid .product-image { background:#fff; display:block; width:206px; height:205px; } .products-grid .product-name { padding:0 18px 8px 20px; font-size:12px; line-height:20px; } .products-grid .product-name a { color:#fff; text-decoration:none; } .products-grid .product-name a:hover { text-decoration:underline; } .products-grid .price-box { margin:0; float:left; padding:3px 0 0 20px; } .products-grid .price { font-size:16px; font-weight:bold; color:#e30613; } .products-grid .availability { line-height:21px; } .products-grid .actions { float:right; padding:0 17px 0 0; } .products-grid .add-to-links { clear:both; text-align:center; padding:11px 0 0 0; } .products-grid .add-to-links li { display:inline; } .products-grid .add-to-links .separator { display:inline; margin:0 2px; } .products-grid .ratings { margin:0 auto 12px auto; width:95px; } .grid_bg { background:#252525 url(../images/grid_bg.gif) repeat-x; padding:18px 0 22px 0; min-height:105px; } .index_new { background:#252525 url(../images/index_new.gif) repeat-x; padding:18px 0 13px 0; min-height:76px; } .new_products_block .product-name { min-height:40px; }
/* View Type: List */ .products-list li.item { background:#252525 url(../images/list_bg.gif) repeat-x; padding:20px 17px 24px 20px; } .products-list li.item.last { } .products-list .product-image { float:left; width:206px; height:205px; background:#fff; } .products-list .product-shop { margin-left:235px; } .products-list .product-name { margin:0 0 20px; font-size:12px; line-height:20px; } .products-list .product-name a { color:#fff; text-decoration:none; } .products-list .product-name a:hover { text-decoration:underline; } .products-list .rating-links { padding:21px 0 0 0; clear:both; font-size:12px; } .products-list .ratings { margin:0 0 20px 0; } .products-list .price-box { margin:0 0 20px 0; } .products-list .price { font-size:16px; font-weight:bold; color:#e30613; } .products-list .availability { float:left; margin:3px 0 0; } .products-list .desc { clear:both; padding:18px 0 0; margin:0 0 15px; line-height:1.35; } .products-list .desc .link-more { } .products-list .add-to-links { clear:both; } .products-list .add-to-links li { display:inline; } .products-list .add-to-links .separator { display:inline; margin:0 2px; } .rev_link2 { color:#fff; } /* ======================================================================================= */
/* Product View ========================================================================== */ /* Rating */ .no-rating { margin:0; }
.ratings { font-size:11px; line-height:1.25; margin:7px 0; } .ratings strong { float:left; margin:1px 3px 0 0; } .ratings .rating-links { margin:0; } .ratings .rating-links .separator { margin:0 2px; } .ratings dt {} .ratings dd {} .rating-box { width:75px; height:14px; font-size:0; line-height:0; background:url(../images/bkg_rating.gif) 0 0 repeat-x; text-indent:-999em; overflow:hidden; } .rating-box .rating { float:left; height:14px; background:url(../images/bkg_rating.gif) 0 100% repeat-x; } .ratings .rating-box { float:left; margin-right:3px; } .ratings .amount {} .ratings .amount a { color:#fff; text-decoration:none; } .ratings .amount a:hover { text-decoration:underline; }
.ratings-table th, .ratings-table td { font-size:11px; line-height:1.15; padding:3px 0; } .ratings-table th { font-weight:bold; padding-right:8px; }
/* Availability */ .availability { margin:0; } .availability span { font-weight:bold; } .availability.in-stock span {} .availability.out-of-stock span { color:#d83820; }
.availability-only { margin:0 0 7px; } .availability-only span, .availability-only a { cursor:help; } .availability-only a { background:url(../images/i_availability_only_arrow.gif) 100% 0 no-repeat; cursor:pointer; padding-right:15px; } .availability-only .expanded { background-position:100% -15px; } .availability-only strong {}
.availability-only-details { margin:0 0 7px; } .availability-only-details th { background:#f2f2f2; font-size:10px; padding:0 8px; } .availability-only-details td { border-bottom:1px solid #ddd; font-size:11px; padding:2px 8px 1px; } .availability-only-details tr.odd td.last {}
/* Email to a Friend */ .email-friend { padding-bottom:13px; }
/* Alerts */ .alert-price {} .alert-stock {}
/********** < Product Prices */ .price { white-space:nowrap !important; }
.price-box {} .price-box .price { font-weight:bold; }
/* Regular price */ .regular-price {} .regular-price .price { font-weight:bold; }
/* Old price */ .old-price {} .old-price .price-label { white-space:nowrap; } .old-price .price { font-weight:bold; text-decoration:line-through; }
/* Special price */ .special-price {} .special-price .price-label { font-weight:bold; white-space:nowrap; } .special-price .price { font-weight:bold;color:#3bfd07 }
/* Minimal price (as low as) */ .minimal-price {} .minimal-price .price-label { font-weight:bold; white-space:nowrap; }
.minimal-price-link { display:block; } .minimal-price-link .label {} .minimal-price-link .price { font-weight:normal; }
/* Excluding tax */ .price-excluding-tax { display:block; } .price-excluding-tax .label { white-space:nowrap; } .price-excluding-tax .price { font-weight:normal; }
/* Including tax */ .price-including-tax { display:block; } .price-including-tax .label { white-space:nowrap; } .price-including-tax .price { font-weight:bold; }
/* FPT */ .weee { display:block; font-size:11px; color:#444; } .weee .price { font-size:11px; font-weight:normal; }
/* Excl tax (for order tables) */ .price-excl-tax { display:block; } .price-excl-tax .label { display:block; white-space:nowrap; } .price-excl-tax .price { display:block; }
/* Incl tax (for order tables) */ .price-incl-tax { display:block; } .price-incl-tax .label { display:block; white-space:nowrap; } .price-incl-tax .price { display:block; font-weight:bold; }
/* Price range */ .price-from {} .price-from .price-label { font-weight:bold; white-space:nowrap; }
.price-to {} .price-to .price-label { font-weight:bold; white-space:nowrap; }
/* Price notice next to the options */ .price-notice { padding-left:10px; } .price-notice .price { font-weight:bold; }
/* Price as configured */ .price-as-configured {} .price-as-configured .price-label { font-weight:bold; white-space:nowrap; }
.price-box-bundle {} /********** Product Prices > */
/* Tier Prices */ .product-view .product-shop .tier-prices .price { font-weight:normal !important; font-size:11px !important; } .tier-prices .benefit { font-weight:bold; color:#e30613; } .tier-prices li { background:#1D1D1D; padding:4px 0; width:215px; text-align:center; font-size:11px; color:#545454; margin-bottom:1px; } .tier-prices { margin-bottom:20px; }
.tier-prices-grouped {}
/* Add to Links */ .add-to-links .separator { display:none; }
/* Add to Cart */ .add-to-cart label { float:left; margin-right:5px; } .add-to-cart .qty { float:left; } .add-to-cart button.button { float:left; margin-left:5px; } .add-to-cart .paypal-logo { clear:left; }
/* Add to Links + Add to Cart */ .add-to-box {} .add-to-box .add-to-cart { float:left; } .add-to-box .or { float:left; margin:0 10px; } .add-to-box .add-to-links { float:left; }
.product-view {}
.product-essential { padding:0 0 20px 0; }
.product-collateral .box-collateral { margin:0 0 30px; } .product-collateral .box-collateral h2 { padding:26px 0 24px 0; border-top:solid 1px #2A2A2A; font-size:16px; font-weight:bold; text-transform:uppercase; color:#e30613; }
/* Product Images */ .product-view .product-img-box { float:left; width:263px; } .product-view .product-img-box .product-image { background:#fff; } .product-view .product-img-box .product-image-zoom { position:relative; width:263px; height:263px; overflow:hidden; z-index:9; } .product-view .product-img-box .product-image-zoom img { position:absolute; left:0; top:0; cursor:move; } .product-view .product-img-box .zoom-notice { padding:19px 0 16px 0; } .product-view .product-img-box .zoom { position:relative; z-index:9; height:18px; margin:0 auto 13px; padding:0 28px; background:url(../images/slider_bg.gif) 50% 50% no-repeat; cursor:pointer; } .product-view .product-img-box .zoom.disabled { -moz-opacity:.3; -webkit-opacity:.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";/*IE8*/ opacity:.3; } .product-view .product-img-box .zoom #track { position:relative; height:18px; } .product-view .product-img-box .zoom #handle { position:absolute; left:0; top:-1px; width:33px; height:22px; background:url(../images/magnifier_handle.gif) 0 0 no-repeat; } .product-view .product-img-box .zoom .btn-zoom-out { position:absolute; left:2px; top:0; } .product-view .product-img-box .zoom .btn-zoom-in { position:absolute; right:2px; top:0; } .product-view .product-img-box .more-views h2 { font-size:14px; font-weight:bold; color:#e30613; text-transform:uppercase; padding:16px 0 22px 0; } .product-view .product-img-box .more-views ul { margin-left:-23px } .product-view .product-img-box .more-views li { float:left; background:#fff; margin:0 0 8px 23px ; }
.product-image-popup { margin:0 auto; } .product-image-popup .nav { text-align:center; padding:15px 0; } .product-image-popup .nav a { margin:0 10px; } .product-image-popup .image { display:block; } .product-image-popup .image-label {}
/* Product Shop */ .product-view .product-shop { float:right; width:282px; } .product-view .product-shop .product-name h1 { font-size:12px; line-height:18px; color:#fff; padding:0 0 20px 0; } .product-view .product-shop .ratings { margin:0 0 17px 0; } .product-view .product-shop .rating-links { padding:0 0 0 103px; } .product-view .product-shop .rev_link1 { } .product-view .product-shop .no-rating { padding-bottom:13px; } .product-view .product-shop .price-box { float:left; padding:0 30px 0 0; } .product-view .product-shop .price { font-size:16px; font-weight:bold !important; color:#e30613; } .product-view .product-shop .availability { float:right; margin-top:3px; } .product-view .product-shop .availability span { font-weight:normal; } .product-view .product-shop .clear { height:17px !important; } .product-view .product-shop .add-to-cart label { margin:6px 7px 0 0; } .product-view .product-shop .add-to-cart .qty { width:25px !important; height:21px; background:#1E1E1E; border:solid 1px #2A2A2A; color:#fff; } .product-view .product-shop .add-to-cart button.button { margin-left:10px; } .product-view .product-shop .add-to-box {} .product-view .product-shop .add-to-box .add-to-cart { } .product-view .product-shop .add-to-box .or { margin:6px 9px 0 6px; float:left; font-size:11px; } .product-view .product-shop .add-to-box .add-to-links { margin:-4px -10px 0 0; line-height:16px; } .product-view .short-description { padding:26px 0 0 0; } .product-view .short-description h2 { padding:0 0 23px 0; font-size:14px; font-weight:bold; color:#e30613; text-transform:uppercase; }
/* Product Options */ .product-options { padding:10px; margin:10px 0 0; border:1px solid #2A2A2A; } .product-options dt label { font-weight:bold; } .product-options dt .qty-holder { float:right; } .product-options dt .qty-holder label { vertical-align:middle; } .product-options dt .qty-disabled { background:none; border:0; padding:3px; color:#000; } .product-options dd { margin:10px 0; } .product-options dl.last dd.last {} .product-options dd input.input-text { width:98%; } .product-options dd input.datetime-picker { width:150px; } .product-options dd .time-picker { display:-moz-inline-box; display:inline-block; padding:2px 0; vertical-align:middle; } .product-options dd textarea { width:98%; height:8em; } .product-options dd select { width:100%; } .product-options .options-list {} .product-options .options-list input.radio { float:left; margin:3px -18px 0 0; } .product-options .options-list input.checkbox { float:left; margin:3px -20px 0 0; } .product-options .options-list .label { display:block; margin-left:20px; } .product-options ul.validation-failed { padding:0 7px; } .product-options p.required { padding:15px 0 0; }
.product-options-bottom { padding:10px; border:1px solid #2A2A2A; border-top:0; } .product-options-bottom .price-box { margin:4px 0; }
/* Grouped Product */ .product-view .grouped-items-table { margin:13px 0 0 0; }
/* Block: Description */ .product-view .box-description {} .product-view .box-description .std p { padding-bottom:13px; }
/* Block: Additional */ .product-view .box-additional {} .product-view .box-additional .data-table th { font-weight:normal; }
/* Block: Upsell */ .product-view .box-up-sell {} .product-view .box-up-sell .products-grid { margin:0 -25px 0 -20px; } .product-view .box-up-sell .products-grid .product-name { padding-top:16px; }
/* Block: Tags */ .product-view .box-tags {} .product-view .box-tags h3 { font-size:12px; font-weight:normal; padding-bottom:17px; } .product-view .box-tags .product-tags { margin-bottom:17px; } .product-view .box-tags .product-tags li { display:inline; font-size:12px; padding:0 12px 0 0; margin:0 11px 0 0; background:url(../images/sp.gif) no-repeat 100% 3px; } .product-view .box-tags .product-tags li.last { background:none; } .product-view .box-tags .product-tags li a { color:#fff; text-decoration:none; } .product-view .box-tags .product-tags li a:hover { text-decoration:underline; } .product-view .box-tags .form-add label { display:block; padding:0 0 5px 0; font-size:12px; } .product-view .box-tags .form-add .input-box { float:left; width:502px; } .product-view .box-tags .form-add input.input-text { width:485px; height:21px; background:#1E1E1E; border:solid 1px #2A2A2A; color:#fff; } .product-view .box-tags .form-add button { margin-right:-15px; } .product-view .box-tags p { clear:both; padding:15px 0 0 0; }
/* Block: Reviews */ .product-view .box-reviews {} .product-view .box-reviews dd,.product-view .box-reviews h3,.product-view .box-reviews h4 { padding-bottom:13px; } .product-view .box-reviews .data-table { margin-bottom:13px; } .product-view .box-reviews .input-box { width:100%; } .product-view .box-reviews .input-text, .product-view .box-reviews textarea { width:99%; } .product-view .box-reviews .buttons-set button { float:left; } .product-view .box-reviews .form-add {}
/* Send a Friend */ .send-friend {} .send-friend .buttons-set button { margin-left:10px; } /* ======================================================================================= */
/* Content Styles ================================================================= */ .product-name { font-size:1em; font-weight:normal; } .product-name a {}
/* Product Tags */ .tags-list li { display:inline; font-size:13px; }
/* Advanced Search */ .advanced-search {} .advanced-search-amount { padding:20px 0 20px 20px; } .advanced-search-summary { padding:0 0 20px 20px; }
/* CMS Home Page */ .cms-home .subtitle {} .cms-index-index .subtitle {}
/* Sitemap */ .page-sitemap .links { text-align:right; margin:0 8px -22px 0; } .page-sitemap .links a { text-decoration:none; position:relative; } .page-sitemap .links a:hover { text-decoration:underline; } .page-sitemap .sitemap { margin:12px; } .page-sitemap .sitemap a {} .page-sitemap .sitemap li { margin:3px 0; } .page-sitemap .sitemap li.level-0 { margin:10px 0 0; font-weight:bold; } .page-sitemap .sitemap li.level-0 a {}
/* RSS */ .rss-title h1 { background:url(../images/i_rss-big.png) 0 4px no-repeat; padding-left:27px; } .rss-table .link-rss { display:block; line-height:1.35; background-position:0 2px; } /* ======================================================================================= */
/* Shopping Cart ========================================================================= */ .cart {}
/* Checkout Types */ .cart .checkout-types { text-align:right; padding:0 0 20px 0; } .cart .checkout-types li { } .cart .checkout-types li button { height:37px; } .cart .checkout-types li button span { background:url(../images/proceed.png) no-repeat; height:37px; line-height:37px; font:bold 17px/37px "Trebuchet MS", Arial; text-transform:uppercase; padding:0 0 0 27px; color:#fff; } .cart .checkout-types li button span span { background-position:100% 0%; padding:0 28px 0 0; }
/* Shopping Cart Table */ .cart-table .item-msg { font-size:10px; }
/* Shopping Cart Collateral boxes */ .cart .cart-collaterals { padding:28px 0 0; } .cart .cart-collaterals .col2-set { float:left; width:554px; } .cart .cart-collaterals .col-1 { float:left; width:223px; } .cart .cart-collaterals .col-2 { float:right; width:311px; }
.cart .crosssell { border:solid 1px #383838; padding:13px 15px 2px 15px; } .cart .crosssell h2 { font-size:12px; font-weight:normal; line-height:16px; padding-bottom:15px; } .cart .crosssell .product-image { float:left; width:88px; height:133px; background:#fff; } .cart .crosssell .product-details { margin-left:99px; } .cart .crosssell .product-name { padding-bottom:11px; } .cart .crosssell .product-name a { color:#fff; text-decoration:none; } .cart .crosssell .product-name a:hover { text-decoration:underline; } .cart .crosssell .price-box { margin:0 0 13px 0; } .cart .crosssell .price { font-size:12px; font-weight:normal; color:#e30613; } .cart .crosssell button { margin-bottom:10px; } .cart .crosssell li.item { border-bottom:solid 1px #373737; padding:0 0 19px 0; margin:0 0 19px 0; } .cart .crosssell li.last { border-bottom:0; margin:0; } .cart .crosssell button.button span { background:transparent url(../images/pink.png) 0 0 no-repeat; color:#fff; padding:0 0 0 13px; } .cart .crosssell button.button span span { background-position:100% 0; padding:0 15px 0 0; }
/* Discount Codes & Estimate Shipping and Tax Boxes */ .cart .discount, .cart .shipping { border:solid 1px #383838; padding:12px 0 14px 16px; overflow:hidden; margin-bottom:20px; } .cart .discount h2, .cart .shipping h2 { font-size:14px; font-weight:bold; color:#e30613; padding-bottom:12px; text-transform:uppercase; }
.cart .discount label { display:block; padding-bottom:4px; } .cart .discount .input-box { float:left; width:179px; } .cart .discount .input-text { background:#2A2A2A; border:solid 1px #4D4D4D; width:160px; height:20px; font-size:11px; color:#8F8E8E; } .cart .discount .buttons-set { float:left; clear:none; padding:0; }
.cart .shipping p { padding-bottom:9px; } .cart .shipping label { font-weight:normal; color:#fff; } .cart .shipping .form-list select { background:#2A2A2A; border:solid 1px #4D4D4D; width:278px; font-size:11px; color:#8F8E8E; } .cart .shipping .form-list input.input-text { background:#2A2A2A; border:solid 1px #4D4D4D; width:272px; font-size:11px; color:#8F8E8E; } .cart .shipping .buttons-set button { float:left; }
/* Shopping Cart Totals */ .cart .totals { float:right; width:316px; border:solid 1px #323232; background:#2A2A2A; padding:18px 0 0 0; } .cart .totals table { width:100%; } .cart .totals table th, .cart .totals table td { padding:5px 0; vertical-align:middle !important; } .cart .totals table td strong { font-weight:normal; } .cart .totals table tfoot th {} .cart .totals .checkout-types { padding:7px 0 14px 0; text-align:center; } .cart .totals .checkout-types li { padding-bottom:13px; } .grndttl { width:136px; padding-left:19px !important; } .grndttl .price { font-size:12px; font-weight:normal; color:#e30613; }
/* Options Tool Tip */ .item-options dt { font-weight:bold; font-style:italic; } .item-options dd { padding-left:10px; } .truncated { cursor:help; } .truncated a.dots { cursor:help; } .truncated a.details { cursor:help; } .truncated .truncated_full_value { position:relative; z-index:999; } .truncated .truncated_full_value dl { position:absolute; top:-99999em; left:-99999em; z-index:999; width:250px; padding:8px; border:1px solid #080808; background-color:#202020; } .truncated .show dl { top:-20px; left:50%; } .col-left .truncated .show dl { left:30px; top:7px; } .col-right .truncated .show dl { left:-240px; top:7px; } /* ======================================================================================= */
/* Checkout ============================================================================== */ /********** < Common Checkout Styles */ /* Shipping and Payment methods */ .sp-methods dt { font-weight:bold; } .sp-methods .price { font-weight:bold; } .sp-methods .form-list { padding-left:20px; } .sp-methods select.month { width:150px; margin-right:10px; } .sp-methods select.year { width:96px; } .sp-methods input.cvv { width:3em !important; }
.sp-methods .checkmo-list li { margin:0 0 5px; } .sp-methods .checkmo-list label { width:135px; padding-right:10px; text-align:right; } .sp-methods .checkmo-list address { float:left; }
.sp-methods .centinel-logos a { margin-right:3px; } .sp-methods .centinel-logos img { vertical-align:middle; }
.please-wait { float:right; margin-right:5px; font-size:12px; font-weight:bold; color:#fff; } .please-wait img { vertical-align:middle; } .cvv-what-is-this { cursor:help; margin-left:5px; }
/* Tooltip */ .tool-tip { border:1px solid #ddd; background-color:#f6f6f6; padding:5px; position:absolute; z-index:9999; } .tool-tip .btn-close { text-align:right; } .tool-tip .btn-close a { display:block; margin:0 0 0 auto; width:15px; height:15px; background:url(../images/btn_window_close.gif) 100% 0 no-repeat; text-align:left; text-indent:-999em; overflow:hidden; } .tool-tip .tool-tip-content { padding:5px; }
/* Gift Messages */ .gift-messages { padding:13px 0; } .gift-messages-form { } .gift-messages-form { position:relative; } .gift-messages-form label { float:none !important; position:static !important; } .gift-messages-form h4 {} .gift-messages-form .whole-order {} .gift-messages-form .item { margin:0 0 10px; } .gift-messages-form .item .product-img-box { float:left; width:75px; } .gift-messages-form .item .product-image { margin:0 0 7px; } .gift-messages-form .item .number { margin:0; font-weight:bold; text-align:center; } .gift-messages-form .item .details { margin-left:90px; } .gift-messages-form .item .details .product-name {}
.gift-message-link { display:block; background:url(../images/bkg_collapse.gif) 0 4px no-repeat; padding-left:20px; } .gift-message-link.expanded { background-position:0 -53px; } .gift-message-row {} .gift-message-row .btn-close { float:right; } .gift-message dt strong { font-weight:bold; }
/* Checkout Agreements */ .checkout-agreements {} .checkout-agreements li { margin:10px 0; } .checkout-agreements .agreement-content { border:1px solid #ddd; background-color:#f6f6f6; padding:5px; height:10em; overflow:auto; } .checkout-agreements .agree { padding:6px; }
/* Centinel */ .centinel {} .centinel .authentication { border:1px solid #ddd; background:#fff; } .centinel .authentication iframe { width:99%; height:400px; background:transparent !important; margin:0 !important; padding:0 !important; border:0 !important; }
/* Generic Info Set */ .info-set {} /********** Common Checkout Styles > */
/* One Page Checkout */ .block-progress {} .block-progress dt { font-size:11px; text-transform:uppercase; padding:13px 0 16px 0; border-bottom:solid 1px #3E3E3E; } .block-progress dt.last { border:0; } .block-progress dd { font-size:12px; padding:13px 0 13px 0; border-bottom:solid 1px #3E3E3E; } .block-progress dt.complete, .block-progress dd.complete { }
.opc { border-bottom:1px solid #3E3E3E; position:relative; } .opc li.section { border:1px solid #3E3E3E; border-bottom:0; }
.opc .buttons-set.disabled button.button { display:none; } .opc .buttons-set .please-wait { height:21px; line-height:21px; }
.opc .step-title { padding:16px 0 14px 27px; text-align:right; } .opc .step-title .number { float:left; width:18px; height:18px; border:solid 1px #fff; font-size:12px; font-weight:bold; text-align:center; line-height:18px; margin-right:10px; } .opc .step-title h2 { float:left; font-size:12px; font-weight:bold; color:#fff; padding:3px 0 0 0; } .opc .step-title a { display:none; float:right; }
.opc .allow .step-title { cursor:pointer; } /*.opc .allow .step-title a { display:block; }*/
.opc .active {} .opc .active .step-title { cursor:default; } .opc .active .step-title .number { background:#fff; color:#000; } /*.opc .active .step-title a { display:none; }*/
.opc .step { border-top:1px solid #3E3E3E; padding:20px 25px; position:relative; } .opc .step .tool-tip { right:10px; }
.opc .order-review {}
.opc button.button span { background:transparent url(../images/pink.png) 0 0 no-repeat; color:#fff; padding:0 0 0 13px; } .opc button.button span span { background-position:100% 0; padding:0 15px 0 0; }
/* Multiple Addresses Checkout */ .checkout-progress { padding:0 50px; margin:10px 0; } .checkout-progress li { float:left; width:20%; border-top:5px solid #ccc; text-align:center; color:#ccc; } .checkout-progress li.active { border-top-color:#000; color:#000; }
.multiple-checkout { position:relative; } .multiple-checkout .tool-tip { top:50%; margin-top:-120px; right:10px; } .multiple-checkout .grand-total { font-size:1.5em; text-align:right; } .multiple-checkout .grand-total big {} .multiple-checkout .grand-total .price {} /* ======================================================================================= */
/* Account Login/Create Pages ============================================================ */ .account-login {} .account-login h2, .account-login p { padding-bottom:13px; } .account-login .new-users {} .account-login .registered-users {}
.account-create {} /* Account Login/Create Pages ============================================================ */
/* My Account ============================================================================= */ .my-account .title-buttons .link-rss { float:none; margin:0; } .my-account h2,.my-account h3,.my-account h4,.my-account .col2-set { padding-bottom:13px; }
/********** < Dashboard */ .dashboard {} .dashboard .welcome-msg { padding-bottom:13px; }
/* Block: Recent Orders */ .dashboard .box-recent { margin:10px 0; }
/* Block: Account Information */ .dashboard .box-info {}
/* Block: Reviews */ .dashboard .box-reviews .number { float:left; font-size:10px; font-weight:bold; line-height:1; color:#fff; margin:3px -20px 0 0; padding:2px 3px; background:#ddd; } .dashboard .box-reviews .details { margin-left:20px; }
/* Block: Tags */ .dashboard .box-tags .number { float:left; font-size:10px; font-weight:bold; line-height:1; color:#fff; margin:3px -20px 0 0; padding:2px 3px; background:#ddd; } .dashboard .box-tags .details { margin-left:20px; } /********** Dashboard > */
/* Address Book */ .addresses-list {} .addresses-list-additional li.item {}
/* Order View */ .order-info { border:1px solid #ddd; padding:5px; } .order-info dt, .order-info dd, .order-info ul, .order-info li { display:inline; } .order-info dt { font-weight:bold; }
.order-date { margin:10px 0; }
.order-info-box {}
.order-items { width:100%; overflow-x:auto; }
.order-gift-message { margin:15px 0; } .gift-message dt strong { color:#666; } .gift-message dd { margin:5px 0 0; font-size:13px; }
.order-about { margin:15px 0; } .order-about dt { font-weight:bold; } .order-about dd { font-size:13px; margin:0 0 7px; }
.tracking-table { margin:0 0 15px; } .tracking-table th { font-weight:bold; white-space:nowrap; } .tracking-table th, .tracking-table td { padding:1px 5px 0 0; }
.tracking-table-popup { width:100%; } .tracking-table-popup th { font-weight:bold; white-space:nowrap; } .tracking-table-popup th, .tracking-table-popup td { padding:1px 8px; }
/* Order Print Pages */ .page-print .print-head {} .page-print .print-head img { float:left; } .page-print .print-head address { float:left; margin-left:15px; } /* Price Rewrites */ .page-print .gift-message-link { display:none; } .page-print .price-excl-tax, .page-print .price-incl-tax { display:block; white-space:nowrap; } .page-print .cart-price, .page-print .price-excl-tax .label, .page-print .price-incl-tax .label, .page-print .price-excl-tax .price, .page-print .price-incl-tax .price { display:inline; }
/* My Reviews */ .product-review .product-img-box { float:left; width:140px; } .product-review .product-img-box .product-image { display:block; width:125px; height:125px; } .product-review .product-img-box .label { font-size:11px; margin:0 0 3px; } .product-review .product-img-box .ratings .rating-box { float:none; display:block; margin:0 0 3px; } .product-review .product-details { margin-left:150px; } .product-review .product-name { font-size:16px; font-weight:bold; margin:0 0 10px; } .product-review h3 {} .product-review .ratings-table { margin:0 0 10px; } .product-review dt { font-weight:bold; } .product-review dd { font-size:13px; margin:5px 0 0; } /* ======================================================================================= */
/* Footer ================================================================================ */ .footer-container { background:url(../images/content.png); padding:0 25px 30px 24px; } .footer { background:url(../images/footer.gif) no-repeat; padding:18px 0 0 21px; height:57px; } .footer address { display:block; padding:2px 0 0 0; font-size:12px; color:#5A5A5A; } .footer ul { float:left; } .footer ul li { display:inline; font-size:12px; padding:0 1
|
Dernière édition par tapas64 le Sam 24 Nov 2012, 16:04, édité 1 fois | |
| | | Mzelle Machin
{ Spécialiste }
Messages : 3809
| Bonsoir, Oula Oo Attention tu as posté 3 fois le même sujet et ton post est illisible il faudrait l'éditer Pour mettre tes codes, merci d'utiliser les balises codes [ code]toncode[/ code] (bien sûr en enlevant les espaces que j'ai ajouté pour que tu puisses lire) | | |
| | | tapas64
{ Membre }
Messages : 3
| | | | Mzelle Machin
{ Spécialiste }
Messages : 3809
| Pas de soucis maintenant ce sera quand même plus facile pour un codeur de te venir en aide | | |
| | | Psycho
Psychopathe
Messages : 3407
| Bonjour (: Dans un premier temps, merci Mzelle Machin pour la prise en charge très pro ^^ Effectivement dès qu'un bout de code est posté, il doit être encadré de ses balises, c'est obligatoire pour éviter que le forum soit éventuellement déformé. Ensuite, peux-tu nous fournir le site de ton site ? Je ne suis pas sûre qu'il s'agisse d'un forum forumactif, or comme le titre du forum l'indique, nous sommes orienté pour le CSS de forumactif (: J'espère que les codeurs pourront quand même te venir en aide, mais sache qu'il est possible que personne ne puisse t'aider ici (: Voilà, merci de ta compréhension | | |
| | | Espeon
Administrateur
Messages : 1819
| Bonjour Tapas64 ! Comme le dis Psycho, il nous faudrait a minima le code HTML qui correspond à ton menu si l'on veut reproduire l'effet et voir ce qui ne vas pas. Egalement, il est vrai que le forum est orienté HTML/CSS pour les forums hébergés sous ForumActif. Cela dit je vais quand même voir ce que je peux faire pour te dépanner A noter qu'après analyse du début de ton CSS (je me suis arrêté à Category Page car la suite ne concerne pas la navigation il me semble), j'ai trouvé quelques améliorations à apporter, mais surtout 1 erreur majeure. En effet, il manque un ; à la ligne 58 qui ne doit pas faire se comporter l'élément comme attendu : - Code:
-
... 56 /* 2nd Level */ 57 #nav ul, 58 #nav div { position:absolute; width:921px; top:72px; left:-10000px; background:#d20530 url(../images/submenu.jpg) no-repeat 0 -1px; padding:10px 0 0 9px; opacity:49% filter:alpha(opacity=49);} 59 #nav ul ul { background:#d20530; opacity:0.49; 60 filter:alpha(opacity=49);} ... Voilà pour le détail. Bon sinon y'aurait pas mal d'optimisations à apporter (qui se généralisent à l'ensemble du CSS) pour des gains de performances et/ou de maintenabilité à savoir, pour les plus courrantes dans ton CSS : - Supprimer les règles vides (en tout cas pour la production), c'est autant de code qui ne sert à rien et il y en a plein du genre
#nav li.parent {}
- Des doublons de backrgound-image un peu partout
- Beaucoup de float qui pourraient être évités en utilisant a minima une grille CSS (il y en a plein sur le web et c'est pertinent si tu fais effectivement un site web et non un forum ForumActif)
- Beaucoup de font-size qui doivent être difficiles à gérer à la longue. Un petit peu d'abstraction pour centraliser les quelques tailles existantes dans 3/4 classes (genre
.small , .medium et .large ) devrait te donner plus de contrôle sur la taille de tes polices sur ton site
| | |
| | | pamina
{ Membre actif }
Messages : 1170
| Hello Tapas64 ! Ton sujet est-il toujours d'actualité ? La réponse d' Espeon t'a-t-elle aidé ? Si nous n'avons pas de réponse dans 4 jours, le problème sera considéré comme résolu et archivé. Merci de ta compréhension. | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello ! N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu ! Merci de ta compréhension | | |
| | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|