Searchbar

[Rost35]

Moin Moin,

ich bin gerade dabei ein Design für unsere Community zu schreiben und bin auch soweit fast fertig. Nun hat mir ein Helfer gesagt, dass die Searchbar gar nicht richtig angezeigt wird.

Habe mich sofort auf die Suche des Problems gemacht und habe auch teilweisen Erfolg.

Das Problem:
Je nach Auflösung wird die Position der Suche richtig angezeigt. Stelle ich es mit margin auf meine Auflösung ein (1600*900), so wird es bei einer anderen Auflösung zum falschen Darstellen kommen!

Ich stelle mal zur möglichen Fehlerbehebung den derzeitigen Code der Seachbar rein, vielleicht findet jmd. dort die Lösung des Problems.

Screens:




Code:

#searchBar
{
    position: relative;
    z-index: 1;
    margin: -212px 0 0 0;

}

    #QuickSearch
    {
        display: block;

        position: absolute;
        right: 20px;
        top: -18px;

        margin: 0;
 
        border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
    }

        #QuickSearch .secondaryControls
        {
            display: none;
        }

        #QuickSearch.active
        {
            box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding-bottom: 5px;
        }

    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }

    #QuickSearch input.button.primary
    {
        float: left;
        width: 110px;
    }

    #QuickSearch #commonSearches
    {
        float: right;
    }

        #QuickSearch #commonSearches .button
        {
            width: 24px;
            padding: 0;
        }

            #QuickSearch #commonSearches .arrowWidget
            {
                margin-top: -4px;
            }

    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 110px;
        width: auto;
    }

    /*#QuickSearch .commonSearches li
    {
        width: 50%;
        float: left;
    }

        #QuickSearch .commonSearches li a
        {
            display: block;
            font-size: 11px;
            padding: 2px 5px;
            background: @primaryLightest;
            border: 1px solid @primaryLighterStill;
            border-radius: 3px;
            margin: 0 1px 1px 0;
        }

            #QuickSearch .commonSearches li a:hover,
            #QuickSearch .commonSearches li a:focus
            {
                background: transparent;
                text-decoration: none;
            }

            #QuickSearch .commonSearches li a:active
            {
                background: @primaryLighterStill;
            }*/

 

[Rost35]

Habe die Lösung des Problems durch Ausprobieren gefunden - manchmal ist es eben doch hilfreich

Für alle Anderen, die vielleicht auch einmal dieses Problem haben sollten, weil sie Ihr Design eben verändern oder sonst was.

Lösung:

#searchBar
{
        position: relative;
        top: -205px; /*verschiebt es vertikal! /*
    z-index: 1;

}

 

[Alluidh]

Auf jeden Fall schon einen recht herzlichen Dank, denn ich finde es bei solche Dingen immer recht hilfreich auch die Lösung zu haben

 

[Rost35]

Auf jeden Fall schon einen recht herzlichen Dank, denn ich finde es bei solche Dingen immer recht hilfreich auch die Lösung zu haben

Ich kenne die Situation, dass manche Leute das Problem selbst lösen, es dann auch schreiben. Nur schreiben diese meist nicht die Lösung hin, daher finde ich das selbstverständlich, dass man sowas posten sollte.

Vielleicht kann ich dadurch einigen Anderen helfen, falls sie auch mal dieses Problem haben sollten.