1-spaltige Artikel Anzeige anpassen

[derJan]

Hallo zusammen,

ich bin so langsam am Verzweifeln.
Es hat sich nun doch echt viel in den letzten Jahren am Shopsystem geändert. die paar Kenntnisse, die ich mir zu Zeiten xt:Commerce v3.0.4 angeeignet hatte kann ich ja voll in die Tonne hauen. Alleine schon durch die stylesheet.css steige ich nicht mehr richtig durch ... wo wird was verändert, welcher Wert steht für welchen Bereich im Shop! Echt anstrengend.

Und so kommt es nun, dass ich vor DEM "Spaltenproblem" stehe. Ich habe mir ein Template gekauft und hätte jedoch gerne die "productlisting" einspaltig (im Ursprung ist die Anzeige 3-spaltig). Nun habe ich schon kräftig daran rumgestellt BEKOMME ES ABER NICHT HIN *heul*

Kann mir vielleicht jemand einen Tipp geben?

So soll die Productlisting auch im neuen Shop aussehen (mein aktueller Shop):
http://www.haubendesign.de/Modellfliegerbrillen/ModelGlasses:::99_100.html

Und das ist die Productlisting im neuen Shop, an dem es noch viel zu basteln gibt:
http://newshop.haubendesign.de/index.php?cPath=99_100

Ichhabe mal meine stylesheed.css und die product_listing_v1.html angehängt

Vielen Dank schon jetzt für Eure Unterstützung

[EDIT jannemann - 13.07.2012: Betreff angepasst]

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

[jannemann]

Hallo back@me,

wenn du mit dem Firefox Browser surfst, dann solltest du dir mal das Plugin "Firebug" installieren.
Damit kannst du benötigte Stellen in deinem Shop untersuchen und anpassen.
Oder du schreibst mal den Ersteller des Template an.

Schöne Grüße,
Jan

[derJan]

Hallo back@me,
wenn du mit dem Firefox Browser surfst, dann solltest du dir mal das Plugin "Firebug" installieren.
Damit kannst du benötigte Stellen in deinem Shop untersuchen und anpassen.
Oder du schreibst mal den Ersteller des Template an.
Schöne Grüße,
Jan

Hallo Jan,

danke für Deinen Beitrag. Schade, ich hatte mir eine etwas hilfreichere Antwort gewünscht. Leider kann ich Firebug nicht installieren.
Ich hoffe, dass Deine Antwort nichts damit zu tun hat, dass ich mich dann doch nicht für eines Deiner Templates entschieden hatte.

Na ja, vielleicht hat ja noch jemand anderes einen Tipp zum Layout für mich.

Vielen Dank und viele Grüße

Jan

PS.: Was hast Du eigentlich im Betreff dieses Beitrags angepasst, weil da steht "[EDIT jannemann - 13.07.2012: Betreff angepasst]"?

[cannewitz]

Hallo back@me.

Wenn du das Templ. gekauft hast, so liegt es doch nah, den Macher zu fragen wie und wo die Einstellungen vorzunehmen sind. Oder gibt es da keinen kostenlosen Support?
Manchmal reicht es "alt" und "neu" zu vergleichen und dann die Neue auf ALT zurückschreiben ??
Nur so ein Gedanke ... kenn mich mit dem Hersteller nicht so aus.
Gruß.

[jannemann]

Hallo back@me,

dein Betreff sah so aus, bevor ich ihn editiert und geändert habe:

1-spaltig1-spaltig1-spaltig1-spaltig1-spaltig1-spaltig1-spaltig1-spaltig1-spaltig

Warum kannst du Firebug nicht installieren? 
Bitte mich nicht mit dem Templatersteller verwechseln Das bin ich nicht.

Schöne Grüße,
Jan

[derJan]

Hi Jan,

ups ... dann habe ich Dich wohl tatsächlich verwechselt  !
Aber danke, dass Du es ansprichst 
Und was für ein komischer Betreff ist das denn gewesen? Sorry, stammt der aus meiner Tastatur?

Ich kann den Firebug nicht installieren, da ich eine Fehlermeldung bekomme, dass ein "unbekannter Fehler" aufgetaucht wäre (Fehler 203). Ich finde sehr viele Beiträge zu diesem Fehler im Netz, doch habe ich bis heute keine Lösung dazu gefunden ... also habe ich es nie installieren können und mich damit auch noch nicht weiter beschäftigt.
Ich nutze schon seit vielen, vielen Jahren Adobe GoLive (noch in der Version 7.0) aber da fehlt halt die Fehleranalyse und was das css angeht ist dieses Programm noch ganz am Anfang und unterstützt praktisch nicht wirklich viel. Mit der "Internet Explorer Developer Toolbar" hatte ich es mal versucht ... finde ich aber nicht wirklich ansprechend.

Den Anbieter des Template ansprechen? Istr natürlich eine Möglichkeit (weiß aber nicht ob das zum "Service" gehören würde), doch würde ich dann selber immer noch nicht wissen, wie ich im stylesheet an welchen Stellen die Seite verändern kann. Ich muss es für mich selber herausfinden ... das ist ja das Schlimme an mir ... ich will so viel es geht selber machen um halt zu verstehen, wie es funktioniert ... damit ich im "Notfall" auch mal selber Hand anlegen kann.
Leider ist das stylesheet in meinem gekauften Template irgendwie total anders aufgebaut, als das aus dem standard Template. Was auch merkwürdig ist, es gibt eine "stylesheet.css" und eine "stylesheet_lesbar.css" die sich beide wiederum total vom Inhalt unterscheiden. Auf alle Fälle ist die "stylesheet.css" die maßgebende Datei.
Ich muss halt mal schauen! Das krige ich schon irgendwie hin. Habe mir gerade mal die folgende Passage aus der stylesheet angesehen (da diese scheinbar für die Spalten und für die Produktvorschau zuständig zu sein scheint) und bin am experimentieren, welche Veränderungen ich damit anstellen kann:

Code: CSS  [Auswählen]

.proprelist_first{height:100%;overflow:hidden;padding-top:5px}
.proprelist_middle{height:100%;overflow:hidden;background:url(img/botack.gif) no-repeat top;padding-top:5px}
.proprelist_last_1{height:1px;width:225px;overflow:hidden;background:url(img/botack.gif) no-repeat left top;margin-left:5px}
.proprelist_last_2{height:1px;width:455px;overflow:hidden;background:url(img/botack.gif) no-repeat left top;margin-left:5px}
.proprelist_last_3{height:1px;overflow:hidden;background:url(img/botack.gif) no-repeat left top;margin-left:5px}
.productPreview{float:left;width:198px;border:1px solid #adadad;text-align:center;height:100%;margin:5px 5px -395px;padding:10px 10px 400px}
.categoriesPreview{float:left;background:url(img/listbox.gif) repeat-y center;width:204px;text-align:center;height:100%;padding-bottom:400px;margin:0 5px -395px}
.proPreview{float:left;width:210px;text-align:center;height:100%;padding-bottom:200px;margin:0 5px -195px}
.productPreviewImage{vertical-align:top;margin-left:auto;margin-right:auto;width:200px;display:block}
.productPreviewImage img{border:solid 0 #999}

Wenn ich den Wert

Code: CSS  [Auswählen]

.productPreview{float:left;width:198px; ...

auf 660 abändere

Code: CSS  [Auswählen]

.productPreview{float:left;width:660px;...

bekomme ich auf alle Fälle schon mal eine einzige, breite Spalte ... und keine drei Spalten nebeneinander mehr ... nur dass ich nun noch den Rest ordnen muss, der sich nun total auf der Seite verteilt  

Vielen Dank und Grüße

der Jan

[jannemann]

Hallo Jan,

es gibt den Firebug auch für den Chrome Browser.
Vielleicht installierst du dir den mal und das Plugin Firebug.

Schöne Grüße,
Jan

[derJan]

Hi,

ich bin gerade dran und habe alles und sämtlichen alten Sch*** deinstalliert und gerade eben Firefox 13 installliert ... und siehe da nun läuft Firebug. Jetzt muss ich mich damit nur noch zurecht finden.
Ich bleibe dran

Wie zum Teufel bekomme ich den Text rechts neben die Produktbilder ... verdammt noch mal!
http://newshop.haubendesign.de/index.php?cPath=99_100

Danke Dir

[jannemann]

 

Schon mal der richtige Schritt in die richtige Richtung
Versuch mal die Produktbeschreibung vor dem schließenden div productPreviewImage einzusetzen.

Schöne Grüße,
Jan

[derJan]

so meinst Du es?:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{if $CATEGORIES_HEADING_TITLE}<h1>{$CATEGORIES_HEADING_TITLE}</h1>{else}<h1>{$CATEGORIES_NAME}</h1>{/if}
{if $CATEGORIES_DESCRIPTION || $CATEGORIES_IMAGE || $MANUFACTURER_DROPDOWN}
                {if $CATEGORIES_IMAGE}<img src="{$CATEGORIES_IMAGE}" alt="{$CATEGORIES_NAME}" class="imgLeft" /><br />{/if}
                {if $CATEGORIES_DESCRIPTION}{$CATEGORIES_DESCRIPTION}<br />{/if}
                {if $MANUFACTURER_DROPDOWN}{$MANUFACTURER_DROPDOWN}<br />{/if}
{/if}
{$NAVIGATION}
<div class="hrproductpreview"></div>
<div class="proprelist_first">{php}$aid=0;{/php}
{foreach name=aussen item=module_data from=$module_content} {php}$aid++;{/php}
<div class="productPreview">
                <h2><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></h2>
        <div class="productPreviewImage"><a href="{$module_data.PRODUCTS_LINK}">{if $module_data.PRODUCTS_IMAGE!=''}<img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" class="productImageBorder" />{else}&nbsp;{/if}</a>
                <p>{$module_data.PRODUCTS_SHORT_DESCRIPTION}</p></div>
                <p class="price">{$module_data.PRODUCTS_PRICE}</p><p class="taxandshippinginfo">( {$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK|replace:'kosten':''} )</p>
                {if $module_data.PRODUCTS_VPE}<p class="vpe">{$module_data.PRODUCTS_VPE}</p>{/if}
                {if $module_data.PRODUCTS_SHIPPING_NAME}<p class="shippingtime">{#text_shippingtime#}{if $module_data.PRODUCTS_SHIPPING_IMAGE}<img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" />{/if}
                        {$module_data.PRODUCTS_SHIPPING_NAME}</p>
                {/if}
</div>
{if $smarty.foreach.aussen.iteration is div by 3 and !$smarty.foreach.aussen.last}</div><div class="proprelist_middle">{php}$aid=0;{/php}{/if}
{/foreach}
</div><div class="proprelist_last_{php}echo $aid;{/php}">
</div>
{$NAVIGATION}
 

klappt aber irgendwie nicht ... der Text wird immmer unter dem Produktbild angezeigt. *grrrr*

[derJan]

Ich habe es!!!!!!!!!!!
Habe in der stylesheet zum .productPreviewImage noch ein float:left; hinzu gepackt und die product_listing_V1.html wieder in den Urzustand versetzt.

Code: CSS  [Auswählen]

.productPreviewImage{vertical-align:top;float:left;margin-left:5px;margin-right:auto;width:200px;display:block}

Nun mal schauen, was ich mit den verstreuten Elementen (z.B. Linien, die mitten auf der Seite stehen) so anstellen kann.

happyness