Dropdownfelder Formatieren?

[h-h-h]

Guten Morgen Stefan,
da du wirklich vorbildlich fragst (abgesehen von der Mail nach einem Tag:), werde ich dir helfen.
Ein Beispiel ist vorhanden, das verwendete Template ist angegeben, du hast es vorher selbst versucht und hast einen Link zum Shop bereitgestellt.
Ich müsste wissen, was du versucht hast und wo du genau nicht weiter gekommen bist.

Im Grunde benötigst du nur im jeweiligem Options-Template:

Code: XML  [Auswählen]

{math assign='textlength' equation="y-x" x=$item_data.TEXT|count_characters:true y=60}
    {section name=spaces start=1 loop=$textlength} {/section}

Und in der stylesheet.css muss das Dropdown(select) erweitert werden um:
    font-family:Consolas,"Courier New", Monaco;

Viele Grüße und einen erfolgreichen Tag

h-h-h

[StefanWaltenberger]

Hallo h-h-h.
ich bitte dich um Entschuldigung, für die Mail.
Ich wußte nicht, dass du über meinen Eintrag, vom System, informiert wirst.
Bin halt ein blutiger Anfänger

Die "product_options_dropdown.html" auf "templates\simple-xtc\module\product_options" kann ich ändern.
Das Ergebnis zeigt das angehängte Bild "03.jpg".

ALT

Code: XML  [Auswählen]

{if $options!=''}
<div id="product_options">
{foreach name=outer item=options_data from=$options}
        <div class="floatingInput"><label>{$options_data.NAME}:</label><select name="id[{$options_data.ID}]">
        {foreach key=key_data item=item_data from=$options_data.DATA}
                  <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} </option>
        {/foreach}
        </select><br />
        </div>
 {/foreach}
</div>
{/if}
{if $optionstock == "true"} {$item_data.STOCK}
{/if}

NEU

Code: XML  [Auswählen]

{if $options!=''}
<div id="product_options">
{foreach name=outer item=options_data from=$options}
        <div class="floatingInput"><label>{$options_data.NAME}:</label><select name="id[{$options_data.ID}]">
        {foreach key=key_data item=item_data from=$options_data.DATA}
                  <option value="{$item_data.ID}">
                  {math assign='textlength' equation="y-x" x=$item_data.TEXT|count_characters:true y=60}
                  {section name=spaces start=1 loop=$textlength}&nbsp;{/section}
                  {$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} </option>
        {/foreach}
        </select><br />
        </div>
 {/foreach}
</div>
{/if}
{if $optionstock == "true"} {$item_data.STOCK}
{/if}

In der  "stylesheet.css" auf "templates\simple-xtc" finde ich kein Dropdown(select) in der ich die "font-family" ändern kann.
Muss ich das Dropdown(select) erstellen und wie muss es aussehen?

Code: CSS  [Auswählen]

@charset 'utf-8';
@import url(css/reset.css);
@import url(css/lightbox.css);
@import url(css/boxes.css);

/* ----------------------------------------------------- Page layout */
html * { font-size: 100.01% }
textarea, pre, tt, code {
        font-family:"Courier New", Courier, monospace; 
}
body {
font-family:  Helvetica, Verdana,Arial, sans-serif;
font-size: 75.00%;
color: #000000;
background: #fff;
}

h1,h2,h3,h4,h5,h6 {
        font-family:Helvetica, Verdana,  Arial, sans-serif;
        font-weight:bold;
        color:#ffa800;
        margin: 0 0 0.5em 0;
}

h1 { font-size: 200% }
h2 { font-size: 180%;color: #A5B0BE; }
h3 { font-size: 150% }
h4 { font-size: 133.33% }
h5 { font-size: 116.67% }
h6 { font-size: 116.67%; font-style:italic }


.color1{color:#A5B0BE;}
h2.color1{font-weight:normal}
p { line-height: 1.5em; margin: 0 0 1em 0; }

/* lists */
  ul, ol, dl { margin: 0 0 1em 1em }
  li { margin-left: 1.5em; line-height: 1.5em; }
  ol {list-style-type: decimal;}
  ul {list-style-type: square}
/* End */

#wrap {
        text-align:left;
        margin: 0 auto 0 auto;
        width: 960px;
        background-color: transparent;
}
#page_margin{margin: 0 10px}
#main_content {

        width: 100%;
        position: relative;}
       
       
#header{
        position: relative;
        margin: 3em 0 6em 0;
}
#footer {
        width: 960px;
margin: 7em auto 0 auto;
        height: 20px;
        border-top: 1px solid #eee;}
}

/* #account includes Login, Shopping-Cart, checkout-shipping */
#account{
padding-bottom: .25em;
border-bottom: 1px solid #ffa800;
}

.btn img{position:absolute; margin-top: 6px;}
p.btn a {padding: 0 0 0 0;}
.btn2{margin-top: 5px;}
.btn2 input{position:absolute; margin-top: 0px;}


/* Main Content */

/**************************** Links ****************************/
a {
        text-decoration: underline;
        color: #ffa800;
}
a:hover,
a:active,
a:focus {
        color: #333;
        text-decoration: underline;
}
#topbar a, #footer a, .copyright a, .kmtemplates a, .parseTime a{text-decoration: none;}
#footer a:hover, .copyright a:hover, .kmtemplates a:hover, .parseTime a:hover{text-decoration: underline;}

.start_img {float: left; padding-right: 20px; padding-top:30px; }
.start_p {line-height: 20px; padding-top:30px;}


/******* Productlisting Start *******/
#product_listing{
        margin-bottom: 2em;
}
.product1{
        margin-top: 0em;
        width: 224px;
        float: left;
        text-align: center;
}
.product2{
        margin: 0em 12px 0 20px;
        width: 224px;
        float: left;
        text-align: center;
}
.product3{
        margin: 0em 20px 0 12px;
        width: 224px;
        float: left;
        text-align: center;
}
.product4{
        margin-top: 0em;
        width: 224px;
        float: right;
        text-align: center;
}
/* delete */
.product_image_con img{
        position: relative;
        height: 150px
}
.product1 h3, .product2 h3, .product3 h3, .product4 h3{
        font-size:100%;
        line-height: 140%;
        font-weight: bold;
        margin: 1em 0 .5em 0;
        text-align: center;
}

.product_listing_row {margin: 1em 0; padding: 0em 0; display: block; float:left;}
.product1 h3 a,.product2 h3 a,.product3 h3 a,.product4 h3 a {text-decoration: none}
.product1 h3 a:hover,.product2 h3 a:hover,.product3 h3 a:hover,.product4 h3 a:hover{
        color: #ffa800;
        text-decoration: underline;
}
.product1 p,.product2 p,.product3 p,.product4 p {font-weight: bold;text-align: center;}
/******* Productlisting End *******/

/******* Product Info Start *******/
#single_product {width: 100%;position: relative;margin: 1em 0}
#single_product_image{height: 360px;}
#single_product_image a img{margin: .75em 0;}
#single_product_text {}
#single_product_text h1 {color: #A5B0BE; font-size: 200%; font-weight: bold;}

#single_product .left,
#single_product .right {width: 50%;}
#product_options{float: right; width: 100%;}
#product_options label{width: 15%;
}
#single_product_image_add {float: left}
#single_product_image_add img{width: 15%; padding: 0 4em 0 0; margin-right: 2em;}
.note{ padding: .5em; font-size: 70%;}
p.history_products {font-weight: normal;}

#product_info input[type=image]{position: relative; padding: 0;top:13px; height: 20px;}
#product_info input[type=text]{height: 18px; line-height: 100%; font-size: 100%;
padding:0px;margin:0; background-color: #fff}
strong.price{font-size: 120%}
strong.price{font-size: 120%}

input[type=radio]{position: relative;left: 5px; margin-right: 10px}
/******* Product Info Start *******/


.clear{ clear:both;}
input{margin: .5em 0;}
#footer a{color: #A5B0BE;}
/* Create Account*/
#account0 input,#account2 input,#account3 input,#account4 input {
color: #000;
font: 80% verdana, arial, helvetica, sans-serif;
margin: 2px 0 8px 0;
padding: 2px;
width: 300px;
}
#account0 label,#account2 label,#account3 label,#account4 label,label{
display: block;
}
label.label_inline{display: inline;}
#account0 label.gender{display: inline; line-height: 180%;}
fieldset{border: 1px solid #eee; margin-top: .5em; padding: .5em}
div.left{width: 45%;float: left;}
div.right{width: 45%;float: right;}
div.full,p.full {width: 100%; text-align: center;}
fieldset legend{padding: 3px 6px; color: #ffa800;}


.note{ padding: .5em; font-size: 70%;}
p.history_products {font-weight: normal;}

#table_order_details{margin: 1em 0; width: 100%; color: #666;line-height: 1.5em;}
#table_order_details td{border-bottom: 1px solid #A5B0BE; padding: .75em}
#table_order_details th {border-bottom: 1px solid #A5B0BE;text-align: center; font-weight: bold;}
#table_order_details tfoot td{border-bottom: none; border-top: 2px solid #A5B0BE;}
.prodRow1{background-color: #fff;}
.prodRow2{background-color: #EDEFF1;}
.prodRow2 td {}
.prodRow2 td a {color: #ffa800; text-decoration: underline;}
.prodRow1 td a {color: #ffa800; text-decoration: underline;}
.quantity{text-align: center;}
.productName{}
.productAttributes{}
.attribute{}
.value{}
.singlePrice{text-align: center;}
.totalPrice{text-align: center;}
.delete{text-align: center;}
.subTotal{background-color:#F4F5F7;}
#table_order_details p{font-size: 100%;}
strong {font-weight: bold;}
#table_order_details th.productName{text-align:left;}



/****** jQuery *******/
/* Navigation */
.nav, .nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
}

.nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
  z-index: 1;
  position: relative;
}
.nav li ul{z-index:10}
.nav li {
  float: right;
  margin: 0;
  padding: 0;
  position: relative;
list-style-type:none;
        width: auto
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
        font-size: 1.15em;
  background: #fff;
  color: #A5B0BE;
  display: block;
  padding: 0 14px 9px 14px;
  text-decoration: none;
border-left: 1px solid #fff;
}

.nav li a:hover {
  color: #ffa800;      
        text-decoration: underline;
}
#CatNavi li:hover a,
#CatNavi li.sfHover a {
        color: #ffa800;
}
#CatNavi li:hover ul a,
#CatNavi li.sfHover ul a {
  width: 100%;
  background: #f6f6f6;
  color: #959595;      
  text-decoration: none;
}
#CatNavi li:hover ul a:hover,
#CatNavi li.sfHover ul a:hover {
  color: #ffa800;      
}

.nav ul {
  background: #f6f6f6;
  list-style: none;
  margin: 0;
width:100%;
display: block;
  position: absolute;
  top: -999em;
/*  left: -1px;*/
}
.nav li:hover ul,
.nav li.sfHover ul {
  top: 1.5em;
}
.nav ul li {
  float: none;
}
.nav ul a {
border:2px solid #f6f6f6;

  white-space: nowrap;
  text-decoration: none;
}
.nav ul a:hover {
  background: #ccc;
  color: #ffa800;
}

/* Navigation Ende **************************/

.headerError,
.errorTxt{color: red}

td.messageStackError{color: red; padding-bottom: .25em;}
td.messageStackSuccess{padding-bottom: .75em; color: green}
/* Produktnavigation Seiten vor zurück*/
.smallText{font-size: 80%; border-bottom: 1px solid #A5B0BE;padding-bottom: .25em;}
/* Ende */
p.txtRight{text-align: right}
span.status{color: #666;}
.edit_btn{font-size: 70%;padding-left: 3em;}

.floatingInput label{float: left; width: 10em; padding-top: .5em;}
.thx{font-size: 110%; font-weight:bold;margin-top: 1em;}

/****** Account History Info *****/
div.history table td{padding-right: .5em}



.standard_adress{font-size: 60%; color: #666;font-weight: normal}
p.centerTxt{text-align: center;}
#confirmation_products table {color: #666;margin: .25em 0 0 0;padding: .25em 1em;border: 1px solid #000; font-size: 100%;line-height: 130%}
#confirmation_products table td.main{padding: 0}
#confirmation_products table td.main small {font-size: 80%}
#confirmation_total table{width: 100%;text-align: right;float: left;background-color:#f7f7f7;padding: .25em 1em;font-size: 100%;line-height: 160%;}
#confirmation_total table .main{width: 50%;background-color:#f7f7f7; color: #666;padding: 0 0 .75em 0; line-height: 130%}
#confirmation_products table td.main{width: 50%}
.payMod1{background-color:#f7f7f7;border-top: 1px solid #666;padding: .5em;width: 100% }
.payMod2{background-color:#fff;border-top: 1px solid #666;padding: .5em;width: 100% }
.payModTitle{height: 2.5em; display: block;padding: .5em 0 0 0 ;}

/* Style Advanced Search Start */
.advanced_search div{padding: .25em 0;clear:both;}
.advanced_search div label{padding-bottom: .25em}
.advanced_search div select,
.advanced_search div input{ margin: 0 0 .5em 0; padding: 0 0 0 0;}
/* Style Advanced Search End   */


/* Style Popup Start */
div.popup{margin: 20px .5em 1em .5em}
/* Style Popup End   */

img.txtFloatRight{margin-left: .75em;}
img.txtFloatLeft{margin-right: .75em;}
.txtFloatRight{float:right}
.txtFloatLeft{float:left}
.txtAlignRight{text-align:right}
.txtAlignLeft{text-align:left}
.txtAlignCenter{text-align: center}
hr {border: 1px solid #eee;}
hr.categories {margin: 2em 0}
/* Product Review */
#product_review .txtFloatLeft img{float: left; padding: 0; border: 1px solid #eee; background-color:#fff; margin: 0}
#product_review {width:100%; font-size: 90%}
#product_review tr.row1 {background-color:#fff;}
#product_review tr.row2 {background-color:#eee;}
#product_review th, #product_review td {padding: .5em;}
#product_review .id {width: 5%;}
#product_review .author {width: 35%;}
#product_review .rating {width: 35%;}
#product_review .date {width: 25%;}

/* alsopurchased */
.alsopurchased .txtAlignCenter{border: 1px solid #eee; background-color: #fff}
.alsopurchased h5{margin-top: .75em; font-size: 85%; font-weight: bold}
.alsopurchased p{padding: .25em 0 0 1em; font-size: 70%}

.search_result div,
.search_result div img,
.search_result div p {float:left; line-height:19px;}
.search_result div img {margin: 1em 1.5em 1em 0;}

/***** INPUt FIELDS *****/
#new_find input[type=image]{position: relative; padding: 0;top:10px;}
#new_find input[type=text]{position: relative;top: 0;height: 12px; line-height: 100%; font-size: 100%;}



/**** Module ****/

/**** Shipping Block ****/
.shipping_price{color: #666}
#shipping_block{margin-top: 1.5em}
.shipping_module{border-bottom: 1px solid #eee; border-width: 1px 0; padding-bottom: .5em;margin: 1.5em 0}
.shipping_module input {margin: 0 .5em}
.shipping_module h3{margin-bottom: .25em}

/**** Adressbook Module ****/
#adressbook table {width: 100%; border: 1px solid #eee; border-width: 1px 0;}
#adressbook table table {border: none}
.moduleRowOver {
        background-color: #f6f6f6;
        border: 1px solid;
        border-color: #000000;
  margin-bottom: 10px;
  padding: 5px;

        }
.moduleRowSelected {
        background-color: #f6f6f6;
        margin: 0;
        padding: 5px;
}
#adressbook table td.main{padding-bottom: .5em; }

/*** Popup Infobox ***/
table td.infoBoxHeading img {display: none}
table td.infoBoxHeading {color: #ffa800; font-size: 120%; font-weight: bold; padding: 15px 0 10px 0}
span.main,
span.tableHeading {display: block; padding-bottom: 8px; }
span.boxText{font-size: 100%; padding-bottom: 8px;display: block}

/*** Ppoup Content ***/
td.main{padding: 10px}
td.contentsTopics{padding: 15px 10px 0 10px; color: #ffa800; font-size: 120%; font-weight: bold;}

.inputRequirement{}
.btn3 input{position:relative; margin-top: 0; margin-bottom: 0}
.btn3 img{position:relative; margin-top: 0px;}
#cat_listing {border-top: 1px solid #eee;border-weight: 1px 0px 0px 0px; padding-top: .75em;}
#cat_listing ul {margin-left: 0;border-bottom: 1px solid #eee;height: 2em;}
#cat_listing ul li {float: left; list-style:none; margin: 0 1.5em 0 0;}
#cat_listing a, #cat_listing a:visited, #cat_listing a:active {color: #A5B0BE; text-decoration: none;}
#cat_listing a:hover, #cat_listing a:focus {color: #FFA800;}
.privacy {padding-left: .5em;}
.privacy a {text-decoration: none;}
/**************************** kmTemplates.com Copyright ****************************/
.parseTime, .kmtemplates{display:none;}

.copyright{
font-size: 90%;
width: 960px;
margin: 2em auto;
padding: .25em 0 30px 0;
}
.copyright, .copyright a {color: rgb(240,240,240);}

/**************************** xt:Commerce Copyright & ParseTime ****************************/

#vacation{position: absolute; top: 85px; border: 1px solid #999; padding: .75em}
 

Du siehst ich bin ein Anfänger. Toll ist daher, dass es solche Menschen wie dich gibt, die dann helfen, wenn es klemmt.
Wenn du einmal Excel-Probleme haben solltest, melde dich bitte bei mir. Ich bin zertifizierter Excel-Coach und kann dir bestimmt helfen.
Danke
Gruß Stefan

[h-h-h]

Hallo Stefan,
also der Leerzeichen-Generator-Codeblock muss direkt nach {$item_data.TEXT} eingefügt werden:

Code: XML  [Auswählen]

{math assign='textlength' equation="y-x" x=$item_data.TEXT|count_characters:true y=60}
{section name=spaces start=1 loop=$textlength}&nbsp;{/section}

Und in der stylesheet.css schreibst du am Ende der Datei nur folgende Zeile:

Code: CSS  [Auswählen]

#product_options select { font-family:"Courier New", Courier, monospace;  }

Viele Grüße

h-h-h

[StefanWaltenberger]

Hallo h-h-h,
es hat geklappt.
Das Ergebniss kannst du hier sehen:
http://www.muelltonnenverkleidung24.de/product_info.php?products_id=1
Vielen Dank.
Gruß Stefan

[lullifatz]

Vielleicht solltest Du noch den Gesamtpreis anzeigen lassen und nich: +122

[StefanWaltenberger]

Hallo lulifatz,
danke für den Vorschlag.
Mal sehen, ob ich das mache.
Weiß noch nicht.
Gruß Stefan

[noRiddle (revilonetz)]

@h-h-h
Wo hast du das denn er-suchmaschint ?
Nice, kannte ich auch noch nicht.

Gruß,
noRiddle

[h-h-h]

Funktioniert, so sieht es definitiv übersichtlicher aus. Schade nur das die Monospace Schriftarten so unschön sind...

Jedenfalls großes Danke dafür!

Hallo Ladiva,
es ließen sich mit Webfonts auch noch schönere monospace Schriften einbinden.

Viele Grüße

h-h-h

@noRiddle: Ja, man lernt nie aus, doch erarbeiten musste ich mir die Lösung auch selbst, da es diese bisher nicht gab. Als ich das mit den Leerzeichen geschrieben hatte musste ich auch erstmal nach Zeichen mit gleicher Breite suchen, da das Ergebnis nur mit  spaces nicht den gewünschten Erfolg brachte. So eine Gute Nacht

[Ladiva]

Was sind denn Webfonts?

[xxxxxxxxx]

Erstes Ergebnis bei Tante G: http://www.google.com/webfonts.

Hinweis: Darauf achten diese nicht in jene Seiten mit einzubauen die verschlüsselt gesendet werden, also Passwort, Checkout,  da man sonst die SSL Anzeige in der Adresszeile des Browsers verliert.

[hbauer]

Die Google Webfonts lassen sich auch lokal auf dem Web Space legen. Dann klappts auch mit dem SSL

Gruß

Hagen

[xxxxxxxxx]

Danke für den Tip Hagen, hab ich nicht gewußt das das geht. 

[hbauer]

Ist auch nicht ganz trivial. Das mit der SSL Problematik war mir gar nicht bewusst

Wir haben das nur gemacht, da wir unseren Kunden nicht zumuten wollen das alle Zugriffe auf unserer Seite bei Google gemeldet werden.

Man sollte auch beachten das man sich damit eine recht große Datei einhandelt die man auf jeden Fall im Apache durch eine separate Anweisung komprimieren sollte.

Gruß

Hagen