Headerhöhe - Problem: neue Position corners-bottom

[aquadraht]

N'Abend Community,

ich habe es zwischenzeitlich - Dank der Beiträge in diesem Forum - geschafft, meinen Header anzupassen. Dazu habe ich die bg_header ausgetauscht und jeweils in der common.css + colours.css der .headerbar die Zeile height: 250px; hinzugefügt. Nach dem Aktualisierung von Template, Themes und Grafiksammlung für das aktive Theme Prosilver Special Edition und dem Leeren des Caches wird die Hintergrundgrafik des Headers zwar in der korrekten Höhe (250px) angezeigt ... die corners-bottom befinden sich jedoch leider noch immer auf der Höhe (92px), die die ursprüngliche bg_header.gif hatte.

Ich habe leider trotz Suchfunktion nichts gefunden was mich in die Lage versetzt, die corners-bottom dort zu platzieren, wo sie jetzt hingehören ...

Hat jemand von Euch dafür eine schnelle Lösung zur Hand? Mein Forum ist nämlich ansonsten fast fertig (umgestaltet).

Gruß + Dank
aqua-draht

[Crizzo]

Hi!

Wenn du dein Forum verlinkst, dann kann ich mir das mal schnell anschauen und müsste auch eine Lösung finden. So kann ich mir das nur schwer vorstellen und schon gar nicht eine Lösung testen.

Gruß
Blackhawk

[aquadraht]

Moin,

... Wenn du dein Forum verlinkst, dann kann ich mir das mal schnell anschauen und müsste auch eine Lösung finden. So kann ich mir das nur schwer vorstellen und schon gar nicht eine Lösung testen ...

also ich habe das, aus der Not heraus und unter Verwendung von vielen Informationsstückchen hier aus dem Forum so gelöst, dass ich das hier

Code: Alles auswählen

<p style="height: 224px">
                                 &nbsp;
                                 </p>

in den Code der Headerbar eingesetzt habe. Den Wert von 224px habe ich durch Ausprobieren ermitteln müssen, da der Wert von 250px (entsprechend der Höhe meiner bg_header.gif) nicht passte. Jetzt sieht der Code für die headerbar so aus:

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="post" 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 -->
                                 <p style="height: 224px">
                                 &nbsp;
                                 </p>
                                <span class="corners-bottom"><span></span></span></div>
                        </div>

Ich habe leider keine Ahnung, ob diese Lösung praktikabel/gut/zulässig ist ... für Alternativ-Vorschläge bin ich immer dankbar - Forum siehe hier ...

Gruß+Dank
aqua-draht

[Crizzo]

Das Problem, welches du jetzt so gelöst hast, ist einfach, dass

Code: Alles auswählen

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

von den HTML-Element innerhalb von

Code: Alles auswählen

<div class="headerbar">
                                <div class="inner">

nicht nach unten gedrückt wurde, weil die Element darüber, nicht hoch genug waren. Somit ist das <span> nicht "mitgewachsen" (mit .headerbar) und deshalb waren die Rundenecken noch soweit oben.

Du könntest alternativ diesem Element:

Code: Alles auswählen

<div id="site-description">

eine passenden Höhe geben, dass sollte genauso funktionieren.

Gruß
Blackhawk

[aquadraht]

Moin Blackhawk,

vielen Dank für die Unterstützung (und die Erklärung des Zusammenhanges) ...

Du könntest alternativ diesem Element:

Code: Alles auswählen

<div id="site-description">

eine passenden Höhe geben, dass sollte genauso funktionieren.

... das habe ich gemacht; das Element #site-description sieht jetzt so aus:

Code: Alles auswählen

#site-description {
        float: left;
        width: 70%;
        height: 240px;
}

Ich hatte zuerst 250px (analog der bg_header.gif) eingegeben, aber da ist bestimmt irgendwo noch eine margin mit 10px definiert, so dass ich den Wert auf 240px gesetzt habe

gruß+Dank
aqua-draht