TEMPLATE: Artikelansicht zweispaltig & dreispaltig

[JoergKurz]

hi ho, header und so werden noch gemacht also nicht wundern das er nur schwarz ist.

Hier der link: www.wirbellosenstore.de

Gruß jörg

[Tomcraft]

Du hast im Content 508px zur Verfügung, deines DIVS haben aber in der "new_products_default.html" eine Breite von 173px. Das mal drei ergibt 519px.

Grüße

Torsten

[JoergKurz]

Guten Morgen, habe jetzt mal in der stylesheet datei den content angepasst, leider verschiebt er mir die boxen rechts nach unten...

In der new_products_default.html habe ich es auch versucht zu ändern leider komplett ohne erfolg...

gruß jörg

[bkabel]

Hi Jörg,

schau mal bitte in deine stylesheet.css in Zeile 310. Da steht "padding: 0 18px;"
Kannst du das mal auskommentieren und dann nochmal schauen ob dir die Spaltenansicht so besser gefällt?!
Besser noch: du gibst jedem <table> Tag im <div> Container der Produkte ein "padding 0;" mit! Dann brauchst du nichts in der stylesheet ändern.
Man kann den table´s aber auch Klassen oder Id´s zuordnen und die dann in der stylesheet anpassen! Probier aber erstmal das mit dem "padding 0;" direkt im table!

Beispiel:

Code: PHP  [Auswählen]

<table cellspacing="2" cellpadding="0" border="0" bgcolor="#FFFFFF" align="center" width="164px" style="border:1px solid #DDDDDD; padding:0">

Code: PHP  [Auswählen]

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding:0">

Gruß
Björn

[JoergKurz]

Hallo, ich habe jetzt mal die stylesheet geändert es klappt auch alles wunderbar nur werden die boxen bei mir jetzt alle grau...

geändert habe ich diesen abschnitt

Code: CSS  [Auswählen]

/* CONTENT WRAPPER */
#contentwrap {
        clear:both;
        width:944px;
        padding:18px;
        background:#ffffff url(../img/btn_bg.png) repeat-x bottom left;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #d3d3d3;
        float:left
}
/* LEFT COLUMN */
#leftcol {
        float:left;
        width:200px;
        padding:0px 0px 18px 0px;
}
/* RIGHT COLUMN */
#rightcol {
        float:right;
        width:200px;
        padding:0px 0px 18px 0px;
}
/* MAIN CONTENT */
#content {
        float:left;
        width:525px;   <----------------------------------------------------------
        padding:0px 0 18px 0;
        border:1px solid #d3d3d3;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        background: #ffffff url(../img/btn_bg.png) repeat-x bottom left;
        margin-left:8px; <---------------------------------------------------------
}
#content p, #content h4, #content table, #content h2 {
        padding:0 9px; <-----------------------------------------------------------
}
#contentfull {
        width:920px;
        padding:0px 30px;
        margin-bottom:15px;
}
 

Gruß Jörg

[bkabel]

hey Jörg,

was hattest du denn ursprünglich vor? Du wolltest doch nur die Spaltenansicht anpassen oder? Stell mal die stylesheet wieder her so wie sie vorhin noch war!
Dann stell uns mal die "new_products_default.html" zur Verfügung oder du versucht mal diesen Ausschnitt hier in die "new_products_default.html" einzubauen: ( ich hoffe du erkennst wo das hingehört)

Code: CSS  [Auswählen]

<div style="float: left; padding-top: 5px; padding-left: 2px; background-color: rgb(255, 255, 255); width: 166px;">
<table cellspacing="2" cellpadding="0" border="0" bgcolor="#FFFFFF" align="center" width="100%" style="border:1px solid #DDDDDD; padding:0">
  <tbody>
    <tr valign="middle">
      <td height="300px" valign="top" style="border-bottom:5px solid #000000;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding:0">
 

das sollte dann in etwa so aussehen:

  [ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß
Björn

[JoergKurz]

Habe es einfach bis in Zeile 6 ersetzt und es hat wunderbar geklappt.

Der alte Code sah so aus:

Code: CSS  [Auswählen]

<div style="float:left; width:173px; padding-top:5px; padding-left:2px; background-color:#FFFFFF;">
  <table width="170" style="border:1px solid #DDDDDD;" bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="2">
    <tr valign="middle">
      <td valign="top" height="300px" style="border-bottom:5px solid #000000;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
 

Vielen vielen dank an euch. Ihr habt mir sehr geholfen. Ich hab noch 7 Wochen deadline bis dahin muss der Shop fertig sein.

gruß jörg

[PinkLight]

hey leute, ich suche und probiere nun seit einigen stunden die "new_products_default.html" anzupassen, leider ohne erfolg!

die datei sieht so aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="new_products"}
<h1>{#heading_text#}</h1>
{foreach name=aussen item=module_data from=$module_content}
<div style="float:left; width:249px; padding-top:5px; padding-left:5px; background-color:#FFFFFF;">
  <table width="248" style="border:1px solid #DDDDDD;" bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="2">
    <tr valign="middle">
      <td valign="top" height="240px">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" height="40" style="color:#333" bgcolor="#f4f4f4"><strong><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></strong></td>
            </tr>
            <tr>
                <td height="115" align="center" valign="middle" bgcolor="#FFFFFF" style="padding-right:0px;">
                    {if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}
                </td>
            </tr>
            <tr>
                <td height="75" class="productPreviewContent">
                    <p class="price" align="center">{$module_data.PRODUCTS_PRICE}</p>
                    <p class="taxandshippinginfo" align="center">({$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK})
                    {if $module_data.PRODUCTS_VPE}<p class="vpe" align="center">{$module_data.PRODUCTS_VPE}</p>{/if}
                    {if $module_data.PRODUCTS_SHIPPING_NAME}
                        <p class="shippingtime" align="center">{#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}
                    {/if}
                    {if $module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}
                        <p class="stockimage"><img src="{$module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}" alt="{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}" /></p>
                        <p class="stockimagetext">{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}</p>
                    {/if}
                </td>
            </tr>
            <tr>
                <td height="20" valign="middle" align="center" bgcolor="#f4f4f4">
                    <p>{$module_data.PRODUCTS_BUTTON_BUY_NOW}  <a href="{$module_data.PRODUCTS_LINK}"><img src="{$tpl_path}buttons/{$language}/button_product_more.gif" alt="Details" border="0" /></a></p>
                </td>
            </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
{/foreach}

auf der startseite sieht's so aus:

  [ Für Gäste sind keine Dateianhänge sichtbar ]

die grauen pfeile zeigen den abstand zu dem rahmen und die blauen pfeile stellen mein wunsch dar!

nur wie?

[Tomcraft]

Installiere dir bitte Firebug für Firefox und untersuche die Elemente damit. Dann siehst du die zugeordneten Styles und kannst die "paddings" entsprechend anpassen. Anleitungen für Firebug findest du bei YouTube. Firebug bekommst du hier: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Wenn dir das alles zu viel ist, dann brauchen wir hier zumindest einen Link zu deinem Shop.

Grüße

Torsten

[kukki]

Bei der ganzen Sache (ich benutze die zweispaltige Anzeige) ist ein kleiner Denkfehler dabei, der unter Umstanden zu unschönen Ansichten führt. Ich habe heute Sonderpreise eingeführt und dann erscheint eine zusätzliche Zeile wie: "Sie sparen 30%/ xxEur". Das ist ja ganz nett und durch dem Kommentar auch gut für die Kunden zum Anlocken, aber ... diese Zeile ist einfach zu breit, so dass die berechneten Breiten nicht mehr hinhausen.

Nun habe ich in der "german.php" in Zeile ca. 459 dort anstatt "Sie Sparen " einfach ein Minuszeichen eingesetzt, damit die ganze Sache erst einmal online wieder ordentlich aussieht. Für dieses Modul sollte aber dieser Fall mit berücksichtigt werden, denn bei dieser schmalen Platzeinteilung - vor allem bei drei Spalten- kommt man mit CSS nicht sehr weit. Wo und an welcher Stelle kann mann diese Part im Core oder im Modul ändern?

[koshiro]

Hallo kukki,
dann must Du einfach den Tabellen eine feste Höhe geben und dann passt das wieder. Und wenn Du die Version hiervon benutzt, die auf CSS basiert, funktioniert es, dass man das alles anpassen kann ohne Probleme.

Aber sag uns doch erstmal welche Version Du genau nutzt, die auf Tabellen Basis oder die auf CSS, und hast Du eventuell mal ein Link wo man sich das anschauen kann.

Gruß
Micha

[Tomcraft]

Er meint das Thema hier: TEMPLATE: Artikelansicht zweispaltig & dreispaltig auf CSS Basis

Grüße

Torsten

[koshiro]

Hallo Torsten,
achso okay dann weiss ich Bescheid.

@Kukki,
da Du ja die Spaltenansicht auf CSS Basis nutzt schau mal hier: Ausblenden vom Text der Sonderangebote
Da hat h-h-h mir einen Smarty Hack gezeigt das auch die Ansicht mit den Sonderangeboten hinhaut. So brauchst Du dann nur noch ein wenig in der CSS spielen bis es so passt wie Du es haben willst.
Gruß
Micha

[JoergKurz]

hallo, bei mir auch mal wieder ein "problem".

ich habe ja schon mal hier in diesem thread gepostet das bei mir die artikelspalten nicht sichtbar wurden, darauf hin hat mir bkabel den richtigen anstaz gesendet was ich super fand. die artikelspalten sind jetzt auf der startseite sogar 4 zeilig. jetzt möchte ich auch bei den artikeln in den kategorien kategorien/neue artikeldie 4 spalten ansicht haben, weiss leider nur nicht wo ich diesen code einsetzen soll bzw. ob es der gleiche ist weil ich ansatzweise nicht das gleiche in den dateien finde. wäre super wenn mir zu diesem punkt nochmal jemand helfen würde. ansonsten hat ja bisher alles auf eigener basis geklappt.

gruß jörg

[Tomcraft]

In Beitrag 1 des Themas hier ist doch bereits der Link zur Erweiterung für die "product_listing.html" enthalten.

Folge dem Link, lade dir die Datei in dein Template und passe folgende Stelle an:

Code: PHP  [Auswählen]

...
<div style="float:left; width:173px; padding-top:5px; padding-left:2px; background-color:#FFFFFF;">
  <table width="170" style="border:1px solid #DDDDDD;" bgcolor="#FFFFFF" align="center" border="0"
...
 

Die Werte 173 und 170 verringerst du so lange in gleichen Schritten, bis die Anzeige 4-spaltig ist.

Grüße

Torsten