[HTML] [CSS] Styled Suchfeld {erledigt}

Dieses Thema im Forum "Webdesign" wurde erstellt von Rushh0ur, 22. März 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 22. März 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    [CSS] Styled Suchfeld {erledigt}

    Hallo liebe Community,

    versuche mich in letzter Zeit in HTML und CSS einzuarbeiten, aber an dem folgenden komm ich irgendwie nicht weiter:

    Ich möchte so eine Suchbox/feld erstellen:
    Bild

    Dafür habe ich das Bild in zwei Teilbilder aufgeteil, einmal in den Hintegrundverlauf des Eingabefelds und einmal in ein Bild für die Schaltfläche und das ganze wie folgt umgesetzt:

    HTML:
    PHP:
    < form  class= "header_search"  method = "post" >
          <     input  class= "search_box"  name = "search_txt"  type = "text"  value = "Search ..." />
          <     button type = "submit" >< img src = "media/searchbutton_normal.gif" /></ button >
    </     form >
    Und dazugehörige CSS:
    PHP:
    . header_search
    {
             width : 50 %;
             vertical - align : bottom ;
             text - align : right ;
    }

    .     header_search  . search_box
    {
              background - image : url ( searchbox . gif );
              color : #FFF; 
             border : 1px solid  #000;
             padding : 0px ;
             padding - right : 3px ;
             padding - left : 3px ;
             height : 24px ;
    }

    .     header_search button
    {
             background : none ;
             border : none ;
             padding : 0px ;
             margin : 0px ;
             width : 35px ;
             height : 26px ;
    }
    Das ganze sieht dann so aus:
    Bild
    Ich kriegs einfach nicht zussamen.

    Der Button sollte noch einen Hover-Bild bekommen. Aber wenn ich das wie oben mache dann kann ich doch nicht so einfach einen hinzufügen...

    Hoffe mir kann einer helfen.

    // Edit:
    Hat sich erledigt hab es nun so gelösst ->
    HTML:
    PHP:
                 < td colspan = "2"  class= "header_search" >
                
                    <     form method = "post" >
                     <     table cellspacing = "0"  cellpadding = "0"  width = "100%" > 
                        <     td style = "text-align:right" >
                            <     input  class= "search_box"  name = "search_txt"  type = "text"  value = "Search ..." />
                        </     td >
                        <     td style = "text-align:left"  width = "64" >
                            <     input  class= "search_button"  name = ""  type = "submit"  value = "" />
                        </     td >
                    </     table >
                    </     form >
                    
                <     td >
    CSS:
    PHP:
    . header_search
    {
             height : 100 %;
             vertical - align : bottom ;
             text - align : right ;
             padding - bottom : 20px ;
    }

    .     header_search  . search_box
    {
             background :  url ( searchbox . gif ); 
             color : #FFF; 
             border : 1px solid  #000;
             height :  22px ; 
             width :  262px ;  
             text - indent :  5px ; 
             line - height :  22px ;
    }

    .     header_search  . search_button
    {
             background : url ( searchbutton_normal . gif )  no - repeat center left transparent ;  
             height :  26px ; 
             width :  35px ; 
             border - width :  0px ;
    }

    .     header_search  . search_button : hover
    {
             background : url ( searchbutton_hover . gif )  no - repeat center left transparent ;  
    }
    Mfg Rushh0ur
     
  3. 23. März 2011
    AW: [CSS] Styled Suchfeld {erledigt}

    hi,

    wenn ich richtig vermute, dann baust du dein html mit tabellen auf.
    Code:
    <td colspan="2" class="header_search">
 
 <form method="post">
 <table cellspacing="0" cellpadding="0" width="100%"> 
 <td style="text-align:right">
 <input class="search_box" name="search_txt" type="text" value="Search ..."/>
 </td>
 <td style="text-align:left" width="64">
 <input class="search_button" name="" type="submit" value=""/>
 </td>
 </table>
 </form>
 
<td>
    fang erst garnicht damit an.

    dein such form kannst du so machen
    Code:
    <input class="search_box" name="search_txt" type="text" value="Search ..."/><input class="search_button" name="" type="submit" value=""/>
    und ggf. etwas css anpassen.

    z.b.
    Code:
    input {
display: block;
float: left;
}
    so sollte dein versatz weg gehen.
    ist nicht getestet!

    versuch das mal und geb feedback.
     
  4. 23. März 2011
    AW: [CSS] Styled Suchfeld {erledigt}

    Ja benutze Tabellen, welche das ganze ziemlich unübersichtlich machen.
    Sollte ich da besser wenn möglich div-Elemente benutzen? Dazu hät ich auch grad eine Frage, wie krieg ich die Elemente inerhalb am besten Vertikal ausgerichtet.

    Hammer, funktioniert perfekt, danke.

    Mfg Rushh0ur
     
  5. 23. März 2011
    AW: [CSS] Styled Suchfeld {erledigt}

    freut mich das es klappt.
    um tabellen loses layout umzusetzen u.v.m. kann ich dir diesen link empfehlen.
    FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten - XHTMLforum

    ich kann dir nur empfehlen, nimm dir die zeit um mit div arbeiten zu lernen.
    du wirst sehen, dass du deutlich schneller und flexibler bist.
    wenn du noch css kannst, dann kannst du mit einen raster sehr viele layouts umsetzen
    ohne immer neu anzufangen.

    z.b. mit float (schau dir clear dazu an), background usw.

    bei fragen hilft dir RR
     
  6. 23. März 2011
    AW: [CSS] Styled Suchfeld {erledigt}

    Alles klar,

    nochmals danke für deine Hilfe und für die Seite, die werd ich mir anschauen.

    Problem gelöst, Thema beendet
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.