Suche formatieren (Anfängerfrage)

webburner · #1 11.10.07, 12:57

Hallo zusammen,

ich beschäftige mich gerade das erste mal mit Typo3 und baue auch gleich eine Seite. Ich habe die Standardsuche erfolgreich eingebaut und z.T. formatiert.
Ich bekomme aber leider den Such-Button (Image) nicht an die richtige Stelle.
Ich hoffe mir kann jemand einen guten Tipp geben?!
Der Button (die suche.gif) soll rechts vom Suchfeld positioniert werden. Am besten ohne Abstand bzw. mgl. wenig Abstand. Momentan befindet er sich unterhalb des Suchfeldes

Besten Dank im Voraus!!

webburner

Hier mein Code:

Code:

            
    # Inhalt ausgeben
    INHALT = CONTENT
    INHALT {
        table = tt_content    
        select.orderBy = sorting
        select.where = colPos = 0    
        }
        
    # Suchformular im Platzhalter anzeigen
        SUCHE < tt_content.search.30
        SUCHE {
        layout = ###LABEL### ###FIELD###
           target = _self
           redirect = 12
         badMess = Bitte füllen Sie alle erforderlichen Felder aus:
     dataArray.10 {
        label.override = Stichwortsuche
        type = *sword = input, 15, 40

     }
        dataArray.20 {
        valueArray >
        type = scols = hidden
        value = pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption
        }
     image = IMAGE
     image.file = fileadmin/images/suche.gif
               }

             }
    }
}

  # Das Suchformular anpassen
  tt_content.search.30 {
          layout = ###LABEL### ###FIELD###
     target = _self
     badMess = Bitte füllen Sie alle erforderlichen Felder aus:
     dataArray.10 {
        label.override = Stichwortsuche
        type = *sword = input, 15, 40

     }
     dataArray.20 {
        valueArray >
        type = scols = hidden
        value = pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption
        }
     image = IMAGE
     image.file = fileadmin/images/suche.gif
     }
     
       # Das Suchergebnis anpassen
      tt_content.search.20 {
     layout.10.override = Ergebnisse auf dieser Seite: ###RANGELOW### bis ###RANGEHIGH### von ###TOTAL###
     renderObj.10.typolink.target = _self
     renderObj.20.stdWrap.crop = 200 | […]
     noResultObj.10.override = Kein Ergebniss gefunden!
     next.override = Weiter
     prev.override = Zurück
     target = _self
     range = 10
     
  }

**ghoti** · #2 12.10.07, 09:19

so kannst du es nicht regeln.
Schau dir den Quelltext an. Und dann würde ich es mit CSS formatieren.
Du kannst ja float: left; und eine Breite einfügen, dann steht das Feld rechts.
Hast du mal einen Quazug aus dem Quellcode?

webburner · #3 12.10.07, 09:27

Hallo,
erst mal DANKE für die Hilfe. Wie gesagt ... bin noch in den Anfängen mit Typo3. Ich dacht ich könnte das mit offset lösen

... hier mein Quelltext:

Code:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
    This website is powered by TYPO3 - inspiring people to share!
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at http://typo3.com/ and http://typo3.org/
-->

    <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_65ed1e4718.css" />
    <link rel="stylesheet" type="text/css" href="fileadmin/style.css" />
    <title>xxx: Anfahrt</title>
    <meta name="generator" content="TYPO3 4.1 CMS" />
    <meta name="AUTHOR" content="xxx" />
    <meta name="DESCRIPTION" content="xxx" />
    <script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>
<script type="text/javascript" src="t3lib/jsfunc.validateform.js"></script>

<script type="text/javascript">
    /*<![CDATA[*/
<!--
if (version == "n3") {
img5_118f_0_n=new Image(); img5_118f_0_n.src = "typo3temp/menu/d18e866e9d.gif"; 
img5_118f_0_h=new Image(); img5_118f_0_h.src = "typo3temp/menu/92f29ee450.gif"; 
img6_118f_1_n=new Image(); img6_118f_1_n.src = "typo3temp/menu/ba265054bb.gif"; 
img6_118f_1_h=new Image(); img6_118f_1_h.src = "typo3temp/menu/1f5dd5e3c2.gif"; 
img7_118f_2_n=new Image(); img7_118f_2_n.src = "typo3temp/menu/8bc7730374.gif"; 
img7_118f_2_h=new Image(); img7_118f_2_h.src = "typo3temp/menu/8b8fe6e028.gif"; 
img8_118f_3_n=new Image(); img8_118f_3_n.src = "typo3temp/menu/5db3ffc664.gif"; 
img8_118f_3_h=new Image(); img8_118f_3_h.src = "typo3temp/menu/dadae35ea5.gif"; 
img9_118f_4_n=new Image(); img9_118f_4_n.src = "typo3temp/menu/169d2f2ac6.gif"; 
img9_118f_4_h=new Image(); img9_118f_4_h.src = "typo3temp/menu/169d2f2ac6.gif"; 
img10_118f_5_n=new Image(); img10_118f_5_n.src = "typo3temp/menu/f658b67100.gif"; 
img10_118f_5_h=new Image(); img10_118f_5_h.src = "typo3temp/menu/633fcff744.gif";
}
// -->
    /*]]>*/
</script>

<script type="text/javascript">
    /*<![CDATA[*/
<!--
        // JS function for mouse-over
    function over(name,imgObj)    {    //
        if (version == "n3" && document[name]) {document[name].src = eval(name+"_h.src");}
        else if (document.getElementById && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_h.src");}
        else if (imgObj)    {imgObj.src = eval(name+"_h.src");}
    }
        // JS function for mouse-out
    function out(name,imgObj)    {    //
        if (version == "n3" && document[name]) {document[name].src = eval(name+"_n.src");}
        else if (document.getElementById && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_n.src");}
        else if (imgObj)    {imgObj.src = eval(name+"_n.src");}
    }

// -->
    /*]]>*/
</script>

</head>
<body background="fileadmin/images/hg_dach.jpg">


    <table width="960" height="1300" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="693" height="684" valign="top"><table width="98%" height="1290" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="66%" height="200" valign="bottom"><p>&nbsp;</p>            </td>
            <td width="34%" height="200" valign="bottom"><div align="left"><form action="index.php?id=12&amp;no_cache=1" id="a1cc9ff11122bd3eb6d64d0106449c8fb" name="a1cc9ff11122bd3eb6d64d0106449c8fb" enctype="multipart/form-data" method="post" target="_self" onsubmit="return validateForm('a1cc9ff11122bd3eb6d64d0106449c8fb','sword,Stichwortsuche','','Bitte füllen Sie alle erforderlichen Felder aus:','')"><div style="display:none;"><input type="hidden" name="scols" value="pages.title-subtitle-keywords-description:tt_content.header-bodytext-imagecaption" /><input type="hidden" name="stype" value="L0" /><input type="hidden" name="locationData" value="9:pages:9" /></div>
        <!--  Search form inserted: [begin] -->             <table border="0" cellspacing="1" cellpadding="1" class="csc-searchform"><p class="csc-form-label-req">Stichwortsuche</p> <input type="text" name="sword" size="15" maxlength="40" value="" /><p class="csc-form-label"></p> <input type="image" name="submit" src="fileadmin/images/suche.gif" alt="" title="" /></table>
        <!--  Search form inserted: [end] -->
            </form></div></td>
          </tr>
          <tr>
            <td height="1101" colspan="2" valign="top"><table width="99%" height="350" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" style="border-color:#FFFFFF; border-width:1px; border-style:solid; border-left:0px">
              <tr>
                <td width="20" valign="top" bgcolor="CC3399">&nbsp;</td>
                <td valign="top" bgcolor="CC3399"></td>
              </tr>
            </table></td>
          </tr>
          
        </table></td>
        <td width="267" valign="top"><table width="90%" height="491" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="middle"><table width="108" border="0" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" style="border-color:#FFFFFF; border-width:1px; border-style:solid ">
                <tr>
                  <td width="108" valign="top"><a href="index.php?id=5" onfocus="blurLink(this);" onmouseover="over('img5_118f_0');" onmouseout="out('img5_118f_0');"  ><img src="typo3temp/menu/d18e866e9d.gif" width="108" height="37" border="0" alt="Home" name="img5_118f_0" /></a><a href="index.php?id=6" onfocus="blurLink(this);" onmouseover="over('img6_118f_1');" onmouseout="out('img6_118f_1');"  ><img src="typo3temp/menu/ba265054bb.gif" width="108" height="37" border="0" alt="Bereiche" name="img6_118f_1" /></a><a href="index.php?id=7" onfocus="blurLink(this);" onmouseover="over('img7_118f_2');" onmouseout="out('img7_118f_2');"  ><img src="typo3temp/menu/8bc7730374.gif" width="108" height="37" border="0" alt="Ärzte" name="img7_118f_2" /></a><a href="index.php?id=8" onfocus="blurLink(this);" onmouseover="over('img8_118f_3');" onmouseout="out('img8_118f_3');"  ><img src="typo3temp/menu/5db3ffc664.gif" width="108" height="37" border="0" alt="Kontakt" name="img8_118f_3" /></a><a href="index.php?id=9" onfocus="blurLink(this);" onmouseover="over('img9_118f_4');" onmouseout="out('img9_118f_4');"  ><img src="typo3temp/menu/169d2f2ac6.gif" width="108" height="37" border="0" alt="Anfahrt" name="img9_118f_4" /></a><a href="index.php?id=10" onfocus="blurLink(this);" onmouseover="over('img10_118f_5');" onmouseout="out('img10_118f_5');"  ><img src="typo3temp/menu/f658b67100.gif" width="108" height="37" border="0" alt="Impressum" name="img10_118f_5" /></a></td>
                </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
</table>

    
</body>
</html>

**ghoti** · #4 12.10.07, 09:39

das ist der relevante Code:

HTML-Code:

<table border="0" cellspacing="1" cellpadding="1" class="csc-searchform"> <p class="csc-form-label-req" style="padding: 0; margin: 0; float: left; display: inline;">Stichwortsuche</p> <input type="text" name="sword" size="15" maxlength="40" value="" /> <p class="csc-form-label" style="padding: 0; margin: 0; float: left; display: inline; width: 0px;"></p> <input type="submit" alt="" title="" value="S"/> </table>

Und da hab ich schon an einigen STellen bei style etwas eingefügt. Natürlich musst du es ins CSS schreiben, irgendwie so:

Code:

.csc-searchform .csc-form-label-req,
.csc-searchform .csc-form-label {
padding: 0; margin: 0; float: left; display: inline;
}

und du musst zusehen, dass es von der Breite her in dein Template passt: also dass Label+Input+Button < Spaltenbreite

webburner · #5 24.10.07, 11:36

Hallo ghoti,
vielen Dank für Deine Hilfe

Leider sind die Abweichungen zwischen IE und Firefox ziemlich groß.
Den Button konnte ich plazieren ... das Label allerdings nicht gleichmäßig genug. Egal, ich werde mich mal auf die Suche machen wie ich den Ersatz für das Label direkt ins Suchfeld bekommen.
Thanx + Greetz

webburner

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Gelöst Anfängerfrage	tob1as	TYPO3 4.x Fragen und Probleme	3	10.10.07 13:03
Anfängerfrage	sancho	Extension modifizieren oder neu erstellen	4	04.09.07 13:46
Anfängerfrage	M3nsch	TYPO3 3.x Fragen und Probleme	1	14.05.07 14:15
Anfängerfrage Shop	lil-trick	tt_products	1	01.12.06 18:26
Anfängerfrage zu feuser_admin	frank	Alle anderen Extensions	0	20.09.06 18:34

Suche

Userpanel

Suche formatieren (Anfängerfrage)