Anzeige

Template Reponsive ?


Shorty1968

Erfahrenes Mitglied
#1
Hallo ich möchte mir ein Formular für meine Seite erstellen mit einem Template ,es soll wenn es fertig ist auch Reponsiv sein.

Ich habe mir zum vergleich ein Template angesehen welches Reponsiv ist,aber ich kann den Unterschied nicht sehen um es in meinem Template um zu setzen.

Vielleicht kann mir ja hier jemand den Unterschied zeigen zwischend en Templates,das einzigste was ich herraus gefunden habe ist das das Reponsive über die class=highlightbox gesteuert wird das ist in beiden enthalten.Aber bei dem einen Funktioniert es bei dem anderen nicht?

Inhalt des Reponsiven Templates:
Code:
{config_load file="$language/faq_support_$language.conf" section="faq-support-new"}
<h1>{#text_support_new_title#}</h1>

{if $error_message != ''}<div class="errormessage">{$error_message}</div>{/if}

{if $success != '1'}
{$FORM_ACTION}

<div class="highlightbox">

<table width="100%">
  <tr>
    <td valign="top" width="10%">
          <table width="100%">
            <tr>
              <td>{$LINK_FAQ}</td>
                </tr>
                <tr>
              <td><br />{$LINK_OVERVIEW}</td>
                </tr>
          </table>
        </td>
        
        <td class="main" valign="top">
          <table width="100%">
                  <tr>
                     <td width="87%" style="border-bottom:solid; border-width:1px; border-color:#FFdEAD;" class="main"><a href="./support_overview.php">{#support_overview#}</a></td>
                  </tr>
                  <tr>
                     <td align="left">&nbsp;</td>
                  </tr>
                  <tr>
                     <td class="main">{#text_support_new_info#}</td>
                  </tr>
                  <tr>
                     <td align="left">&nbsp;</td>
                  </tr>
           </table>
           
           <table width="100%">
                  <tr>
                    <td>
                        <table width="100%">
                            <tr>
                                <td class="main" align="left"><b>{#text_support_new_request#}</b></td>
                                <td class="main">{$INPUT_SUPTYPE}</td>
                            </tr>
                        </table>
                    </td>
                  </tr>
                  <tr><td class="main"><b>{#text_support_new_info2#}</b></td></tr>
               </table>
               
                <table width="100%">
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_firstname#}</td>
                       <td class="inputRequirement" >{$INPUT_PRODUCT}{$INPUT_CUSTOMER}{$INPUT_FIRSTNAME}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_lastname#}</td>
                       <td class="inputRequirement">{$INPUT_LASTNAME}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_mailadress#}</td>
                       <td class="inputRequirement">{$INPUT_EMAIL}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_fone#}</td>
                       <td>{$INPUT_TEL}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_ordernr#}</td>
                       <td>{$INPUT_ORDER}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_callback#}</td>
                       <td class="main">
                          <table cellspacing="0" cellpadding="0">
                                <tr>
                                  <td class="main">{$INPUT_CALL_YES}</td>
                                  <td class="main">{$INPUT_CALL_NO}</td>
                                </tr>
                          </table>
                        </td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_subject#}</td>
                       <td class="inputRequirement" >{$INPUT_TOPIC}</td>
                  </tr>
                  <tr>
                        <td class="main" style="width:100px">{#text_support_new_news#}</td>
                       <td class="inputRequirement">{$INPUT_TEXT}</td>
                  </tr>
                  
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >{$ERROR_TITLE}</font>&nbsp;</td>
                        <td>{if $ERROR_TEXT}<font color="#ff0000" >{$ERROR_TEXT}{/if}</font><font color="#32a12a" >{$SUCCESS_TEXT}</font></td>
                  </tr>
                  {if $ERROR_TRUE_1}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_FIRSTNAME}</font></td>
                  </tr>
                  {/if}
                  {if $ERROR_TRUE_2}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_LASTNAME}</font></td>
                  </tr>
                  {/if}
                  {if $ERROR_TRUE_3}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_TOPIC}</font></td>
                  </tr>
                  {/if}
                  {if $ERROR_TRUE_4}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_MESSAGE}</font></td>
                  </tr>
                  {/if}
                  {if $ERROR_TRUE_5}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_MAIL}</font></td>
                  </tr>
                  {/if}
                  {if $ERROR_TRUE_6}
                  <tr>
                        <td class="main" style="width:100px"><font color="#ff0000" >&nbsp;</font>&nbsp;</td>
                        <td><font color="#ff0000" >{$ERROR_TEXT_PHONE}</font></td>
                  </tr>
                  {/if}
                  
                  {if $PRIVACY_CHECKBOX}
                  <table width="100%" style="margin-left: 100px;">
                  <tr>
                        <td class="checkbox">{$PRIVACY_CHECKBOX}</td>
                        <td class="midi td_full"><strong><label for="privacy">{#text_privacy_accept#}</label></strong> {$PRIVACY_LINK}</td>
                  </tr>
                  </table>
                  {/if}

                  <tr>
                      <td class="main">
                        <table class="formArea" width="100%">
                            <tr>
                               <td class="main">{#text_support_new_necessary#}</td>
                            </tr>
                        </table>
                  </tr>
    </table>
 </td>
  </tr>
</table>
<div>&nbsp;</div>
</div>
<div>&nbsp;</div>
<div class="button_right cf"><div class="cssButtonPos4">{$BUTTON_SUBMIT}</div></div>
{$FORM_END}
{else}
  <div class="twoColums last">
    <div class="highlightbox plainleft cf">
      <h4>{#text_thanks#} <span class="pflicht">&nbsp;</span></h4>
     <p>{#text_success#}</p>
     <div class="button_right cf"><div class="cssButtonPos4">{$BUTTON_CONTINUE}</div></div>
    </div>
  </div>
{/if}
Inhalt des nicht Reponsiven Templates:
Code:
{config_load file="$language/lang_$language.conf" section="newsletter"} 
{config_load file="$language/lang_$language.conf" section="contact_us"}
{config_load file="$language/best_offer_lang_$language.conf" section="index"}
<h1>{$CONTACT_HEADING}</h1>
{$CONTACT_CONTENT} 

{if $error_message!=''}<div class="errormessage">{$error_message}</div>{/if} 

{if $success!='1'} 
{$FORM_ACTION}

<div class="highlightbox">

<div class="productinfowrap">
    <table width="100%">
        
        <tr> 
          <td class="main" valign="top"><b>{$BEST_OFFER_PRODUCT_TXT}</b></td>
          <td class="main" width="59%" style="padding:0px;"></td>
        </tr>

        <tr> 
          <td class="main" valign="top" width="10%">{if $PRODUCTS_IMAGE!=''}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />{/if}</td>
          <td class="main" width="59%" style="padding:0px;"><strong>{$PRODUCTS_NAME}</strong>
         
          <div class="main">&nbsp;</div>
          <div class="main"><strong>Kurzbeschreibung:</strong></div>
          {$PRODUCTS_SHORT_DESCRIPTION}
          <div class="main">&nbsp;</div>
          
        <div id="productinfoprice">
        {#our_price#}&nbsp;<p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
        <div class="main">&nbsp;</div>
        {if $PRODUCTS_VPE}<small>{$PRODUCTS_VPE}</small><div class="main">&nbsp;</div>{/if}
        <p class="taxandshippinginfo" style="white-space:nowrap">( {$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if} )</p>
        </div>
        
        <div class="main">&nbsp;</div>
          </td>
        </tr>

            <tr> 
              <td class="main" style="width:100px">{#text_name#}*</td>
              <td class="inputRequirement">{$INPUT_NAME}</td>
            </tr>
            <tr> 
              <td class="main" style="width:100px">{#text_email#}*</td>
              <td class="inputRequirement">{$INPUT_EMAIL}</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td width="59%">&nbsp;</td>
            </tr>            
            <tr> 
              <td class="main" valign="top" style="width:100px"><b>{#best_offer_quantity#}*</b></td>
              <td class="inputRequirement">{$BEST_OFFER_QUANTITY_INPUT}</td>
            </tr>
            <tr> 
              <td class="main" valign="top" style="width:100px"><b>{#best_offer#}*</b></td>
              <td class="inputRequirement">{$BEST_OFFER_INPUT} {$BEST_OFFER_CURR} {$BEST_OFFER_HIDDEN}</td>
            </tr>
            <tr> 
              <td>&nbsp;</td>
              <td width="59%">&nbsp;</td>
            </tr>
            <tr> 
              <td class="main" style="width:100px">{#text_sec_code#}</td>
              <td class="inputRequirement">{$VVIMG}</td>
            </tr>
            <tr> 
              <td class="main" style="width:100px">{#text_sec_code#}*</td>
              <td class="inputRequirement">{$INPUT_CODE}</td>
            </tr>
            <tr>
              <td class="main" valign="top" style="width:100px">{#text_message#}*</td>
              <td class="inputRequirement">{$INPUT_TEXT}</td>
            </tr>      
    </table>
{if $PRIVACY_CHECKBOX}
    <div class="best_offer_privacy">  
       <table>
        <tr>
          <td class="checkbox">{$PRIVACY_CHECKBOX}</td>
          <td class="midi td_full"><strong><label for="privacy">{#text_privacy_accept#}</label></strong> {$PRIVACY_LINK}</td>
        </tr>
      </table>
    </div>
{/if}

    <tr>
        <td colspan="2"><b>{#text_hint#}</b></td>
    </tr>

</div>
<div class="button_right cf" style="margin-top: 50px;"><div class="cssButtonPos4">{$BUTTON_SUBMIT}</div></div>
{$FORM_END}

{else}
  <div class="twoColums last">
    <div class="highlightbox plainleft cf">
      <h4>{#text_thanks#} <span class="pflicht">&nbsp;</span></h4>
     <p>{#text_success#}</p>
     <div class="button_right cf"><div class="cssButtonPos4">{$BUTTON_CONTINUE}</div></div>
    </div>
  </div>
{/if}
</div>
 

Shorty1968

Erfahrenes Mitglied
#3
Das ist leider mein Problem wo soll ich da ansetzen,das eine geht ohne CSS eingriff und das andere nicht,ich kann bei beiden kein Gravierenden Unterschied erkennen.
 

Jan-Frederik Stieler

Monsterator
Moderator
#4
Als erstes schmeiß die Tabelle raus. Responsive tables sind nicht so einfach im handling wenn man grad anfängt.

Wir sehen hier ja nicht den css code also können wir auch keine Aussage zu dem Unterschied machen.
Aber ein adaptives Design hast du mit width: 100% sehr schnell umgesetzt.
 
Anzeige
Anzeige