Fehler im Header

[Kirk]

Hallo
Versuch das hier mal:
Suche

Code: Alles auswählen

ul.topnav {
    clear: right;
    margin: 10px 0 0;
    padding: 0;
}

Entferne dort das clear: right;

[Talk19zehn]

Style: CA Gen2

Hi,

muss es nicht float anstelle von clear lauten, - - - oder?

Test: common.css

Code: Alles auswählen

ul.topnav {
    float: right;
    margin-right: 5px;
    margin-top: 4px;
    padding: 0;
}

Abstände neu definiert.

Darstellung in Folge im IE8, IE9, FF, Chrome und Opera soweit identisch und meines Erachtens korrekt.
Grüße


Edit:Etwas unglücklich ist die Einbindung deiner Infobar. Wenn diese nicht "überlappen" soll, kann m.E. das Forum mit einem margin-top ausgerichtet werden.
Probiere bei Bedarf: Test

Code: Alles auswählen

#header div div {
    background-position: left bottom;
    background-repeat: repeat-x;
    margin-top: 34px;
    padding-right: 0;
}

mfg

[fussle]

Jetzt ist die Menüleiste zwar geradlinig, aber auch direkt neben die Suchleiste gerückt ....

[Talk19zehn]

Hello, wie wir unschwer erkennen konnten, ergibt die Originalkonstellation ( clear.... ) einen Fehler im aktuellen Browser Chrome. Insofern nutzte ich in meinem obigen Vorschlag "float".

Jedoch weshalb --> "aber"?
Das ist richtig, denn die search-box wird nach rechts gefloatet,

Code: Alles auswählen

#search-box {
    color: #FFFFFF;
    display: block;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    text-align: right;
    white-space: nowrap;
}

und das HTML ist nach <!-- header start --> eingebunden. Insofern wird die Search-Box m.E. nun korrekt rechts neben der Navigation, nach dem Login, entsprechend dem CSS ausgegeben. Eine Fehldarstellung in Chrome ist nicht mehr gegeben. Die Browser rendern gleichlautend.

Möchtest du diesen Standard nicht nutzen, verlege bspw. die Search-Box.

Beispiel: Test
overall_header.html
markiere und schneide aus

Code: Alles auswählen

	    <!-- 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 -->

und füge den Teil nach <div id="page-body"> in einer neuen Zeile wiederum ein.

Ändere das CSS der ID Search-Box - Beispiel -

Code: Alles auswählen

#search-box {
    color: #FFFFFF;
    display: block;
    margin-right: 5px;
    margin-top: 6px;
    text-align: right;
    white-space: nowrap;
}

Ändere ggf. noch das CSS bzgl. der Einbindung der Infobar im Headerbereich, wie bereits erwähnt.

Viele Grüße


Edit und Uuups....
RS

[fussle]

Wow ...

Header:
Also, soweit so gut, alles fast fein. Wenn ich jetzt die Suchbox noch in die Leiste der Breadcrumbs einbinden kann (so wie hier auf phpBB.de, ohne den Link "Erweiterte Suche") bin ich absolut zufrieden.

Infobar:
Es war damals ein "Notlösung" so wie die Infobar eingebaut ist. Ich weiß nicht, ob es inzwischen elegantere Lösungen gibt, ähnlich einer Lightbox...

[Talk19zehn]

Hi fussle, selbst wenn es sich bei Einbindung der Infobar um eine "Notlösung" handelte, würde ich schon aus rein optischen Gründen jenen Weg gehen: siehe bitte dortiges Edit.... - evtl. ein wenig mit dem Maß "spielen".

viewtopic.php?p=1296016#p1296016


Gruß

[fussle]

Infobar erledigt.

Kannst du mir noch bitte erklären, wo die Searchbox eingefügt werden muss, damit sie in der Leiste der Breadcrumbs erscheint?

[Talk19zehn]

...(...)... Kannst du mir noch bitte erklären, wo die Searchbox eingefügt werden muss, damit sie in der Leiste der Breadcrumbs erscheint?

Nein, ich kann dieses aus zeitlichen Gründen momentan leider nicht umstrukturieren.

BTW:
Ich bin im Grunde eine Befürworterin des Links "Erweiterte Suche", da in Folge dem Benutzer eine Reihe von Auswahlmöglichkeiten zur Verfügung stehen.

Möchtest du den Link tatsächlich nicht nutzen und/oder unmittelbar anbieten, lösche:

Code: Alles auswählen

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}

Gruß

[fussle]

=) danke dir erstmal, da werde ich warten

[Talk19zehn]

Hi, bzgl. deiner ID info passt es im Gegensatz zu meinem Forum leider nicht. Warum auch immer.... Von daher mache diesen Vorschlag bitte rückgängig.

Für diesen Zweck noch eben ein Beispiel : viewtopic.php?p=1277773#p1277773
Hierin werden Klassen verwendet! Und es wird eine weitere Klasse erstellt, die den Abstand nach unten regelt: ---> "bottominfobar".
Der Abstand ergibt sich sodann entsprechend der CSS-Verschachtelung ( vgl. Beispiel ) in jenem Posting und versuche den Abstand ggf. in der Form bei Bedarf vorzunehmen.

Gruß


PS.: eine "Breadcrumbs" ( ID, Klasse, HTML ) gibt´s in meinem Falle in der Version nicht.