Richtige Darstellung der Navigationsleiste

[Zeitmaschine]

Hallo,

das ist jetzt mein 2. Thread und ich hoffe, dass ich es diesmal etwas besser mache, als bei meinem 1. Versuch.

Die Navigationsleiste (siehe Foto) rutscht in eine 2. Zeile. Jetzt frage ich mich, ist das richtig so? Ist auf der linken Seite wenig Text, dann stimmt alles, aber kommt mehr Text dazu, dann rutscht der rechte Bereich in eine 2. Zeile.

Sollte das so stimmen, dann ist vielleicht die Höhe des divs vielleicht zu schmal? Der Hintergrund ist ja blau, aber durch die 2. Zeile, rutscht der Text ins Weiße und man kann ihn dann kaum lesen.

Das Gleiche ist auch in der Fußleiste.

Ich benutze übrigens 3.0.8 und als Style Absolution

http://www.bilder-space.de/show_img_tes ... &size=view

[eichjoernchen]

Hallo!
Man könnte versuchen die Höhe des Div-Containers zu ändern!
Ich schaue mir noch mal den Quelltext an, dann kann ich dir sagen, welchen CSS-Klasse du ändern musst.

[eichjoernchen]

<div class="toolbar">

Innnerhalb dieses CSS-Containers wird die Leiste angezeigt. Dort villeicht mal in der entsprechenden CSS-Date eine Höhenangabe (hight:xx px) eingeben. Da ich die CSS-Dateien nicht vorliegen habe und in eurem Template große Änderungen vorgenommen wurden habe ich da wenig Anhaltspunkte.
Gruß Jörn

[Zeitmaschine]

Ich habe mir mal andere Foren angeschaut und da gibt es jeweils immer zwei Zeilen, auch hier. In der 1. Zeile steht: Home, Community etc. und in der 2. Zeile steht Persönlicher Bereich, Nachrichten etc.

Bei mir ist aber alles in einer Zeile. Kann man das irgendwie ändern?

[eichjoernchen]

Ja das kann man ändern!
Es kann aber sein, dass Du auch an CSS-Dateien etwas ändern musst. Grundsätzlich betrifft das einen Bereich in der overall_header.html:

<div class="float-left">

<img src="{T_THEME_PATH}/images/house.png" width="16" height="16" alt="" /> <a href="{U_INDEX}" accesskey="h">{L_INDEX}</a><!-- BEGIN navlinks --> <strong>&raquo;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks -->

</div><!-- /float-left -->

<br>

<div class="float-right">

Du könntest ein Zeilenumbruch mit "<br>" einfügen. Dann müsstest da aber noch überlegen ob die zweite Zeile rechtsbündig bleiben soll. Ansonsten musst du noch "class="float-right" entfernen. Ich habe mal mit roter Farbe die Stellen markiert.
Geht bestimmt eleganter aber ohne deine css-dateien kann ich da gar nichts sagen.

[franki]

Mit einem <br /> kann man nichts machen, da eine Grafik integriert ist.

Es gibt 2 Möglichkeiten:
1) die Grafik absolution/theme/images/toolbar.gif, mit einem Grafikproggi, von 2x36px auf 2x72px
die Grafik absolution/theme/images/toolbar-right.gif von 4x36px auf 4x72 zu vergrößern und dann die
Links mit einem <hr /> trennen
oder
2) Du machst eine 2te Toolbar.
öffne die absolution/template/overall_header.html
suche

Code: Alles auswählen

</div><!-- /toolbar-left -->

füge danach ein

Code: Alles auswählen

		<div class="toolbar-right"></div>
	</div>
	<div class="toolbar">
        <div class="toolbar-left"></div>

öffne absolution/theme/colours.css
suche

Code: Alles auswählen

.toolbar-right {
	float: right;
	height: 24px;
	padding-top: 12px;

füge danach ein

Code: Alles auswählen

	padding-right: 5px;

[Zeitmaschine]

Danke für eure Antworten, ich arbeite daran!!!