Searchbox ist wie angenagelt

[rembrand]

Hallo Helmut,

was müßte ich tun damit ich den oberen Teil etwas "gestaucht" bekomme (d.h., oberen blauen Teil von der Höhe her schmaler, die Suchbox innerhalb dieses blauen Teils)?

[Helmut]

Hallo Uwe,

zuerst nimm mal das height: 320px wieder aus der common.css raus, es solte sich auch so lösen lassen. Eigentlich müsste es reichen, den Search <div> Container in den anderen <div> Container zu stecken um die Suchbox etwas nach oben zu bekommen.

Ändere deine overall_header.html mal ab von:

Code: Alles auswählen

        <div class="headerbar">
            <div class="inner"><span class="corners-top"><span></span></span>
            <div id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
            </div>

        <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <div id="search-box">
                <form action="{U_SEARCH}" method="get" id="search">
                <fieldset>
                    <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                    <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                    <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
            </div>

        <!-- ENDIF -->

            <span class="corners-bottom"><span></span></span></div>
        </div>

nach:

Code: Alles auswählen

        <div class="headerbar">
            <div class="inner"><span class="corners-top"><span></span></span>
            <div id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>


        <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <div id="search-box">
                <form action="{U_SEARCH}" method="get" id="search">
                <fieldset>
                    <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                    <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                    <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
            </div>
            </div>
        <!-- ENDIF -->

            <span class="corners-bottom"><span></span></span></div>
        </div>

Ist nicht getestet, sollte aber gehen.

Du solltest dein Logo auch kürzer machen, also oben was weg nehmen, das bringt auch noch was in der Höhe.

Wenn du den Firefox als Browser nimmst, dann besorge dir das Addon Firebug, damit kannst du sehr gut sehen, wie die einzelnen Bereiche zusammen gehören.


Gruß Helmut

[HabNurNeFrage]

Hi,

auch versuchen kannst Du eine absolute Positionierung der Search-Box:

#search-box { position:absolute; top:40px; right:40px; }

Das irgendwo im CSS hinzufügen. Die 40px nach eigenem Gusto anpassen...

LG