CSS Kleine Layoutanpassung in Magento Shop

[Tuempelkoenig]

Hallo zusammen,

Bei der Umsetzung eines Onlineshops (Magento Basis) haben meine Produkte einige Konfigurationsmöglichkeiten (Produktoptionen/Attribute). Diese werden zur Zeit in Dropdowns untereinander mit voller Breite angezeigt. Ich würde diese der Übersichtlichekit halber aber gerne in mehreren Spalten darstellen.
Siehe dazu :



Ich habe rausgefunden, dass dies in der styles.css zu ändern sein müsste, diese enthält diesbezüglich folgenden Code:

/* Product options 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.product-options { position:relative; }
.product-options dt { font-weight:normal; }
.product-options dt label { display:inline-block; font-weight:bold; }
.product-options dt label.required em { float:right; margin-left:3px; }
.product-options dd .qty-holder { display:block; padding:5px 0 0; }
.product-options dd .qty-holder label { vertical-align:middle; }
.product-options dt .qty-disabled { background:none; border:0; padding:3px; }
.product-options dd { margin:3px 0 10px; }
.product-options dl.last dd.last { border-bottom:0; }
.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 dd .multiselect option { border-bottom:1px dotted #d9e5ee; padding:2px 4px; }
.product-options ul.options-list { margin-right:5px; }
.product-options ul.options-list li { line-height:1.5; padding:2px 0; }
.product-options ul.options-list input.radio { float:left; }
.product-options ul.options-list input.checkbox { float:left; }
.product-options ul.options-list .label { display:block; margin-left:18px; }
.product-options ul.options-list label { font-weight:normal; }
.product-options ul.validation-failed { padding:0 7px; }
.product-options p.note { margin:0; font-size:11px; }
.product-options p.required { position:absolute; right:0; top:-15px; }

Jetzt kenne ich mich aber nicht mit CSS aus und beim rumprobieren erscheinen die Dropdowns versetzt oder ähnliches. Daher meine Frage: Welche Änderungen muss ich vornehmen?

Danke im Voraus!

 

[Daaron]

gib mal den passenden auszug aus dem html-code dazu

 

[Tuempelkoenig]

Das Beispiel findest du hier:
http://schumagshop.de/normteile/prismatische-zentriereinheit.html
Ich weiß leider nicht genau wo ich den passenden Code finde, aber mit Firebug o.Ä. sollte es nachvollziehbar sein...

 

[Daaron]

Ohne Template-Anpassung wird das nix. Die verwendete <dl> ist dafür nicht wirklich nutzbar.

 

[Tuempelkoenig]

Danke schonmal!
Hast du denn n Tipp wie ich da vorgehe? Ich habe mal die beiden (wie ich vermute) passenden Dateien angehängt.....

 

[Daaron]

Ma grob aus der Kalten:

configurable.phtml so hier abhändern.

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <ul>
    <?php foreach($_attributes as $_attribute): ?>
        <li class="input-box<?php echo ($_attribute->decoratedIsLast)? " last" : ""?>">
			<label for="attribute<?php echo $_attribute->getAttributeId() ?>" class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label>        
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
		</li>
    <?php endforeach; ?>
    </ul>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Und bei den Styles in etwa:

li.input-box{display: inline-block; width: 29%; margin: 2px 2% 5px;}
.input-box label{display: block;}

3 nebeinander, viele viele untereinander.

 

[Tuempelkoenig]

Du bist genial!
Vielen vielen vielen Dank!!

 

[Daaron]

Ne... Wenn ich wirklich genial wäre, dann würde unser größter Magento-Shop auf unserem neuen Server (schöner dicker i7, 24GB RAM, SSD) rennen wie Atze. Tatsächlich sieht es aber so aus, dass es jetzt eben 15 Sekunden statt wie bisher 20-24 dauert, um eine Katalogseite mit 48 Artikeln anzuzeigen (Time to First Byte). Dafür dauert jeder einzelne Artikel nur noch 5-600ms statt 1-1,2s und die Suche ist merklich flotter. Das reißts aber nicht...

Meine Genialität wird da kräftig auf die Probe gestellt. Gott, hab ich jetzt schon einen Hass auf den Rest der Woche. Query Logs wälzen und gucken, was da so lange dauert....