[Screenphoenix]

Hallo an alle,

hab hier ein kleines (milde ausgedrückt) Problem. Wie unten im Bild zu sehen, muss ich diese Navi mit Typo umsetzen. Problem hierbei ist, dass ich kein Javascript verwenden kann, um die schrägen Übergänge mit Hover Effekt darzustellen. Auch unterstützt die vorliegende Version von Typo kein CSS 3, was, wie ich mir sagen lies, dabei hilfreich wäre.

Habt ihr eine Idee?

Schaubild:


Danke schonmal im Voraus für eventuelle Antworten

so far
Screenphoenix

[ThBodi]

Ich war im ersten Moment fast überzeugt, dass das nicht machbar ist, aber ich habe eine einfache Lösung gefunden:

<style type="text/css">
li {
	list-style-type: 	none;
	display: 		inline;
	margin-left:	-28px; }
</style>
<ul>
	<li><img src="menue1.gif"></li>
	<li><img src="menue2.gif"></li>
	<li><img src="menue3.gif"></li>
</ul>

Allerdings bin ich kein GIFBUILDER-Spezialist und kann nicht beurteilen, ob die Grafik-Generierung mit TYPO3 so problemlos möglich ist.

[Screenphoenix]

Hallo, danke für die schnelle Antwort

Zur Lösung:
Jo, ich dachte auch schon an eine PNG Lösung, nur weiß ich eben auch nicht ob es etwas in der Art gibt, womit Typo eigens Grafiken erstellt und man dennoch den Text editieren kann...
Das Problem mit der Linksetzung und dem dazugehörigen Hover, welcher an der Ecken dann allerdings immer beim nächsten, also falschen, Navipunkt angezeigt wird, bleibt :sad:

Naja, eventuell kennt jmd ja doch noch eine Lösung für mein Problem

so far
SP

[ThBodi]

Ja, das "Hover-Problem" wird sich nur über verlinkte Imagemaps lösen lassen, was aber den Quelltext des Menüs ziemlich aufblähen würde.

Ich habe mir eben nochmal die GIFBUILDER-Referenz angeschaut und denke, dass sich das lösen ließe, aber die Arbeit, Dich einzulesen und das auszutesten, kann ich Dir nicht (kostenlos) abnehmen.

[Screenphoenix]

Das verlange ichja auch nicht ;) Es ging mir nur darum zu wissen, ob es überhaupt möglich ist. Damit wurde mir bisher schon sehr geholfen, danke. Werde mir das mit den Imagemaps mal anschauen.

Danke nochmal
SP

[Armin]

moin,

sicher ist diese auch per TS dynamsich zu lösen.
Das wichtigste ist, erstmal die Grafiken passend zusammenzustellen und das CSS haben. Hier kannst du mal schauen um einen Einblick in die Lösungsmöglichkeiten zu erhalten, Dynamic Drive CSS Library- Practical CSS codes and examples

Armin

[Kurt51]

kann man mit css machen:
<style>
<!--
.navigation_box {
height: 13px;
}

.schraege_navigation {
background-color: #646464;
border-top: 1px solid #9b9b9b;
border-left: 1px solid #646464;
border-bottom: 1px solid #646464;
font-family: Arial;
font-size: 7pt;
overflow: hidden;
}

.schraege_navigation a {
background: url("hintergrund_weiss.gif") no-repeat left;
padding-right: 19px;
padding-left: 19px;
margin-left: -13px;;
float: left;
color: black;
text-decoration: none;
}

.schraege_navigation a.active, .schraege_navigation a:hover {
background: url("hintergrund_rot.gif") no-repeat left;
padding-right: 19px;
padding-left: 19px;
margin-left: -13px;;
float: left;
color: white;
text-decoration: none;
}

.schraege_navigation img {
float: left;
margin-left: -13px;
}
-->
</style>