Zusätzliches Header-Bild rechts?

[ill66]

Hab jetzt schon einiges Threads zum Thema Headergrafik gelesen, aber nichts passendes gefunden. Ich bin aber auch nicht sicher, ob das, was ich möchte überhaupt geht....

Der prosilver-Header besteht ja aus dem gekachelten Farbverlauf, der großen Logo rechts und dem Header-Text.
Ich hätte jetzt gerne zusätzlich noch iene Grafik in der rechten Ecke des Headers (in dem Bereich unter/hinter dem Suchfeld).
Mir ist noch keine Lösung iengefallen, weil ich ja o.g. Header-Elemente auf jeden Fall behalten will, damit das Forum weiterhin skalierbar bleibt.
Da bräuchte es vermutlich irgendwie nen extra DIV oder so.......?

[JFooty]

Da bräuchte es vermutlich irgendwie nen extra DIV oder so.......?

Nicht unbedingt. Beispielsweise könntest du das zweite Logo in den <div id="search-box"> als Hintergrundbild einfügen. Suche dazu in der colours.css den Eintrag #search-box. Dort trägst du dann die entsprechenden Angaben für das Hintergrundbild ein.

[ill66]

nachdem ich ein bisschen rumgetüddelt hab (dem div feste höhe zuweisen, eingabefeld und button mit maring-top wieder runterdrücken) hat das jetzt geklappt!

aaaaber jetzt hab ich mir was überlegt:
eigentlich fänd ich es schicker, wenn die search-box nicht im header, sondern in diesem hellblauen kasten darunter wäre (hm, obwohl das ein bisschen eng würde mit de "erweiterten suche"...)!
aber gleichzeitig brauch ich ja weiterhin mein hintergrundbild im header.

könnte ich da die searchbox+button im header mit display:none unsichtbar machen (das geht ja auf jeden fall, habs grad ausprobiert) und quasi eine weitere suchfunktion in die leiste darunter setzen....?

[JFooty]

...könnte ich da die searchbox+button im header mit display:none unsichtbar machen (das geht ja auf jeden fall, habs grad ausprobiert) und quasi eine weitere suchfunktion in die leiste darunter setzen....?

Warum so umständlich? Wieso ausblenden? Nimm den entsprechenden code aus dem header komplett raus. Das bringt auch dein Banner besser zur Geltung.

[ill66]

öhm, aber ich hab doch jetzt grade den searchbox-div genommen um ein hintergrundbild im header zu platzieren -- wenn ich die searchbox jetzt rauslösche, ist doch auch mein hintergrundbild weg oder nicht?

und vor allem: wie krieg ich die suche woanders platziert?^^°

[JFooty]

Ich meinte auch nicht den kompletten div id="searchbox", den kannst du ruhig so lassen. Für die Suchfunktion ist nur dieses Stück

Code: Alles auswählen

<form id="search" method="post" action="./search.php?sid=c5ff664228dca5c5cc596f9b54fe3517">
<fieldset>
<input type="text" onblur="if(this.value=='')this.value='Suche…';" onclick="if(this.value=='Suche…')this.value='';" value="Suche…" class="inputbox search" title="Suche nach Begriffen" maxlength="128" id="keywords" name="keywords"/> 
<input type="submit" value="Suche" class="button2"/><br/>
<a title="Zeigt die erweiterten Suchoptionen an" href="./search.php?sid=c5ff664228dca5c5cc596f9b54fe3517">Erweiterte Suche</a>
</fieldset>
</form>

zuständig. Das kannst du woanders platzieren.

[ill66]

oha..... bin grad auf arbeit und kanns drum nicht direkt ausprobieren. pack ich das, was du da gepostet hast dann nochmal in nen div (relativ? absolut?)?
das KÖNNTE klappen^^°

[JFooty]

Ja, um das genau zu positionieren würde ich das schon in einen neuen div packen.

//edit: Ich habs grad mal getestet. Da du ja im searchbox-div ein Hintergrundbild hast, solltest du einen neuen div id="neu" erstellen. und dort den code für das Suchformular reinpacken. In der css-Datei definierst du dann für #neu die Eigenschaften. Ich habe einfach mal die Einstellungen für #searchbox übernommen und das ganze z.B. links neben FAQ gepackt. Dazu musste ich nur für float:left und margin-right:10px neu definieren. Sieht nicht schlecht aus!
//noch mal edit: margin-top hatte ich auch noch von 30 auf 0px geändert.

[Atalon]

Ich hatte / habe ein ähnliches Problem gehabt und wollte eine zusätzliche Grafik HINTER dem Suchfeld in den Header einbinden.

Dazu muß die Grafik in den Image Ordner des Styles gelegt werden.
Dann muß in der common.css der Eintrag für das Suchfeld ergänzt werden...... und zwar wie folgt:

Code: Alles auswählen

#test {
       background: #000000 none repeat-x 0 0;
       background-image: url("{T_THEME_PATH}/images/Grafikname.gif");
       background-repeat:no-repeat;
       height: 112px;
       width: 460px;
       color: #FFFFFF;
       margin: 0px 0px;
       padding: 5px 5px;
       float: right;   
}

die Größenangaben können dabei natürlich der Grafik angepaßt werden. Der Eintrag wird einfach hinter den bestehenden Angaben ergänzt (also hinter der Site-Loge und Site-Description Definition).

Dann muß in den .html Dateien, in denen die Grafik im Header dargestellt werden soll, die entsprechende ID (hier also Test) um die Suchfeld-Angaben herum ergänzt werden.

In den entsprechenden .html Dateien, in denen die Grafik dort dargestellt werden soll, muß es dann zusätzlich ergänzt werden. z.B. in der Calendar_header.html

Das sieht dann so aus:

Code: Alles auswählen

<div id="test">
		<!-- 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 -->
		</div>

Wenn ich nichts vergessen und es richtig rekonstruiert habe, sollte es dann aussehen, wie in meinem Beispiel --> HIER .

Ich hoffe, es war / ist alles richtig und hilft dem einen oder anderen auch weiter?!

Gruß
Atalon