box_search.html mit css

[h-h-h]

Guten Tag zusammen,
habe die Tabelle in der box_search.html entfernt, und würde mich freuen wenn Ihr das in die neue Version übernehmt.
box_search.html

Code: XML  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
     <tr>
          <td colspan="2"><strong>{#heading_search#}:</strong></td>
     </tr>
     <tr>
          <td>{$INPUT_SEARCH}</td>
          <td>{$BUTTON_SUBMIT}</td>
     </tr>
     <tr>
          <td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
     </tr>
</table>
{$FORM_END}

mit folgendem ersetzen

Code: XML  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
        <strong>{#heading_search#}:</strong>
        {$INPUT_SEARCH}{$BUTTON_SUBMIT}
        <a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a>
{$FORM_END}

In der stylesheet.css folgendes hinter #header #search { *** } einfügen.

Code: CSS  [Auswählen]

#header #search strong {
        display:block;
}
#header #search input {
        float:left;
}

und bei #header #search a {

Code: CSS  [Auswählen]

        float:left;

einfügen

Viele Grüße

h-h-h

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



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

[speedy]

Sehr gut, danke, bin ich auch dafür.

[Modulfux]

Wenn man dann dem "Suchbutton" in der boxes/source/search.php um die Klasse "vertical-mid" erweitert:

Code: PHP  [Auswählen]

$box_smarty->assign('BUTTON_SUBMIT', xtc_image_submit('button_quick_find.gif', IMAGE_BUTTON_SEARCH, 'class="vertical_mid"'));
 

und diese Klasse noch in die stylesheet.css einbindet

Code: CSS  [Auswählen]

.vertical_mid {vertical-align:middle;}
 

dann ist ist der "Suchknopf" auf selber Höhe wie das Eingabefeld.

Noch ein kleiner Schönheitsfehler (Suchknopf klebt am Eingabefeld), was man aber ruhig in der box_search.html lösen könnte.

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
    <strong>{#heading_search#}:</strong>
   {$INPUT_SEARCH} {$BUTTON_SUBMIT}
    <a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a>
{$FORM_END}
 

Gruß
Ronny

[h-h-h]

Webkiste wenn das funktioniert dann kann man auch die float:left 's entfernen.
Und schön wäre es auch im Suchfeld

Code: PHP  [Auswählen]

<input name="keywords" value="Suchen" style="width: 160px;" maxlength="30">
 

mit class="search-field" zu ersetzen und die angaben auch in die stylesheet zu schmeißen.

h-h-h

[Modulfux]

Ja, wir nähern uns der Perfektion. Diese Inlinestyles für die Eingabefelder haben mich auch  gestört.
Entweder man arbeitet wirklich mit Stylesheets oder man nutzt das originäre Attribut size=".." für die <input>-Tags.

Gruß
Ronny

[web28]

[...]
Entweder man arbeitet wirklich mit Stylesheets oder man nutzt das originäre Attribut size=".." für die <input>-Tags.
[...]

Da muss ich jetzt wiedersprechen, das size Attribut wird von jedem Browser anders interpretiert.

[...]

Code: PHP  [Auswählen]

<input name="keywords" value="Suchen" style="width: 160px;" maxlength="30">
 

[...]

Gegen einen solches Inline Style ist auch nichts einzuwenden, wenn es wirklich nur einmal vorkommt. Aber das ist Geschmacksache.

Gruss Web28

[h-h-h]

Ein input {vertical-align:middle;} könnte man meines erachtens ohne Probleme machen.
Somit könnte man im boxes Ordner des Templates auch noch die folglich letzte Tabelle enfernen:

box_login.html

Code: XML  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<h2 class="boxheader">{#heading_login#}</h2>
<div class="boxbody"> {$FORM_ACTION}
  <table width="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="2">{#text_email#}:</td>
    </tr>
    <tr>
      <td colspan="2">{$FIELD_EMAIL}</td>
    </tr>
    <tr>
      <td colspan="2">{#text_pwd#}:</td>
    </tr>
    <tr>
      <td>{$FIELD_PWD}</td>
      <td>{$BUTTON}</td>
    </tr>
    <tr>
      <td colspan="2"><div class="hr"></div>
        <a href="{$LINK_LOST_PASSWORD}">{#text_password_forgotten#}</a></td>
    </tr>
  </table>
  {$FORM_END} </div>

ersetzen mit

Code: XML  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<h2 class="boxheader">{#heading_login#}</h2>
<div class="boxbody">
  {$FORM_ACTION}
      {#text_email#}:
      {$FIELD_EMAIL}
      {#text_pwd#}:<br />
      {$FIELD_PWD} {$BUTTON}
          <div class="hr"></div>
      <a href="{$LINK_LOST_PASSWORD}">{#text_password_forgotten#}</a>
  {$FORM_END}
</div>

Würde wenn niemand da gegen ist alle Tabellen die nicht für Daten sind in css/xhtml umwandeln.
Selbst verständlich das ganze Browser übergreifend.            h-h-h

[speedy]

Hat sicher niemand was dagegen und steht auch auf dem Plan, aber hatte noch keiner Zeit dafür. Sprich dich aber am Besten mit Webkiste ab.
Wenn ich das richtig in Erinnerung habe, wollte er da auch was machen, nicht das Ihr etwas doppelt macht.

[h-h-h]

Noch einmal zurück zu den inline Styles (style="width: 160px;").
Mich persönlich stören die Inliner, trotzdem können sie einmal vorkommen wie web28 sagt.
Sie sind meiner Meinung nach für Testings und vor allem sind sie in einer HTML-Datei nur für style Angaben die mit PHP/JS bearbeitet bzw übergeben werden.
Doch gäbe es durch weitere id und class Angaben mehr Flexibilität welche vorteilhaft für die masse an Shopbetreibern/designern und Entwicklern wäre.  h-h-h

[Modulfux]

Das mit dem size-Attribut hatte ich gerade nicht auf dem Schirm. Mag sein, dass es die Browser anders interpretieren. Dann wäre aber eine sehr elegante Lösung, wie sie oben schon beschrieben ist, eine Klasse anzulegen und diese dann über die Stylesheet-Datei erzeugen.

By the way, ich habe bisher auch alle Boxen ohne Tabellen sogar Browserübergreifend hinbekommen. Ich wollte aber wenn das Template in die Bastelecke stellen, wenn ich komplett fertig bin.

[h-h-h]

Hi Webkiste sag bescheid wenn ich Dir helfen kann, bzw wir uns die Arbeit teilen wollen.
Grüße aus dem Norden h-h-h

[Modulfux]

Du hast schon seit längerem eine PM, h.h.h.

Gruß
Ronny

[DokuMan]

Sehr schön, ich werde das Template dahingehend abändern.

Code: PHP  [Auswählen]

{$INPUT_SEARCH} {$BUTTON_SUBMIT}

hat leider keinen Effekt.

Beim "vertical_mid" sehe ich auch keinen visuellen Unterschied (IE8/FF3.6..
Mit welchen Browsern habt ihr das denn getestet?

[Tomcraft]

Ich wüsste jetzt nicht, was an der "box_search.html" im momentanen Zustand auszusetzen wäre.

Immer dieser Tabellen/CSS-Wahn.

Grüße

Torsten