Zum Inhalt springen

CSS Menü

Erstellt am 24. Mai 2006 · 38 Antworten · letzte Antwort am 26. April 2008 · Seite 2 von 2

Tags: Frage

allej ·

Guten Abend ArminB
Respekt. Da werde ich mich wohl noch mit Top-Level-Objekte rumschlagen.
Das "pad4" ist nur als Abstandhalter zwischen oberem Rand und Text vorgesehen. Dies verhindern, dass der Anfang des Textes durch die Kopfleiste verdeckt wird. Wird der Text länger kann man scrollen ohne dass die Kopfleiste, das Menü oder die linke Seite weggescrollt wird. Ein kleiner "Beschiss" für den Betrachter.
Jetzt habe ich den Marker MENUE01 in die div "demo" eingepackt - und es funktioniert. Vielen Dank.
Leider habe ich das Problem jetzt mit dem .... IE. Wie bekomme ich die Befehlszeile für den Doctype in die Kopfzeile von index.php? Verändere ich den Doctype über "Tools/Installation/Edit files in typo3config/index.html" wird diese in der index.php nicht vollzogen. Habe bis jetzt auch keinen entsprechenden Hinweis im Forum oder Internet gefunden.
Kannst Du mir bitte weiterhelfen? Danke.

Gruss
allej

allej ·

Guten Abend ArminB

Ich verneige mich nochmals vor Dir. (Jetzt wären sogar die Chinesen von meiner Verneigung beeindruckt - Stirn am Boden). Jetzt klappt es sogar mit diesem .... IE. Nächste Aufgabe - Frau beschwichtigen.
Wünsche Dir noch einen schönen Abend.

Gruss

allej

mlehner ·

Hallo ArminB, hallo Leute!

Vielen Dank für den suckerfish-Link, dort ist ein Dropdown-Menu ja schön erklärt.
Bei mir scheitert es aber daran, dass ich nicht weiß wie ich den ganzen Code einbinden muss. Das TS ist noch klar wohin, beim CSS und Javascript weiß ich nicht mehr wo dass hin soll.
Das CSS zum Beispiel - wird das per CSS-Befehl in TS eingefügt oder als externe CSS-Datei? Wenn extern wo muss ich das einbinden? Ins Template oder ins TS als Resoureces?
Weiterhin brauch ich ja auch noch ein Template, dass Typo3 dann mit den Menüpunkten aus meiner Baumstruktur füllt. So ein Template wird nirgends angesprochen.

Also bitte habt Gedult mit mir und sagt mir von Anfang an wo muss was hin?
Oder könnte mir einer mal ALLE benötigten Dateien schicken?

Viele Grüsse

mlehner

mlehner ·

Hi Leute!

Ich hab mir das ganze nochmal angesehen und angepasst; leider immer noch ohne Erfolg.

Mein TS:

page = PAGE
page.typeNum = 0
page.30 = TEMPLATE
page.30 {
template = FILE
template.file = fileadmin/templates/ahp2.html

workOnSubpart = document
subparts.sub_content.select.orderBy = sorting
subparts.content < styles.content.get
subparts.pmenu = HMENU
subparts.pmenu {
special = directory
special.value = 4
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1
}
ACTIFSUB < .IFSUB
}
2 < .1
3 < .2
4 < .3
5 < .4
6 < .5

}

im Template ahp2.html sind die entsprechenden Verweise auf pmenu.css und pmenu_ie.css, siehe auch Beispiel auf der 1. Seite.

Die Seite im Frontend ist völlig leer, auch keine Fehlermeldung.

Wo liegt der Fehler?

Gruß

Mlehner

Lektor ·

Hallo Typo3-Profis,
ich versuche mich zur Zeit auch in Typo3 einzuarbeiten und ich habe schon sehr sehr sehr viele Stunden damit verbracht, mich mit Typo3 und den Eigenarten des InternetExplorers zu beschäftigen. #angry# So langsam möchte ich positive Ergebnisse sehen und deswegen würde ich gerne eure Hilfe in Anspruch nehmen.

Jede Internetseite brauch ein Menü und nach langem Probieren habe ich mich für die CSS Variante entschieden, da ich mich dort einfacher hineindenken kann und Änderungen schneller umsetzbar sind. Nun wollte ich das Menü vom ersten Post umsetzen und habe mich für das vertikale Menü entschieden.
http://www.cssplay.co.uk/menus/flyout_4level.html

Ich bin schon dicht dran und das Menü funktioniert schon fast auf dem Firefox nur der IE macht wieder was er will.
Habe schon zig Wrap-Varianten ausprobiert, aber das richtige Ergebnis habe ich noch nicht hinbekommen.

hier einfach mal die Codes (ausschnittweise)
wie es sein soll:

<div class="menu">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li class="sub"><a href="#nogo">Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#nogo">Tripods</a></li>
	<li class="sub"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->

	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#nogo">Compact</a></li>
			<li><a href="#nogo">SLR</a></li>
			<li class="sub"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>

wie mein Code bisher generiert wird:

<div class="menu">
<ul>
	<li>
	         <a href="index.php?id=84">N</a>
	</li>
	<li>
	         <a href="index.php?id=106">B</a>
	</li>
	<li class="sub">
	         <a href="index.php?id=101">P<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
	         [b]<a href="index.php?id=101" onfocus="blurLink(this);"  >P</a>    !!!doppelt!!![/b]
	                  <ul>
	                  <li>
	                           <a href="index.php?id=104">20</a>
	                  </li>
	                  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="sub">
	         <a href="index.php?id=85">V<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
	         <a href="index.php?id=85">V</a>
	                  <ul>
	                  <li>
	                           <a href="index.php?id=88">a</a>
	                  </li>
	                  <li>
	                           <a href="index.php?id=87">y</a>
	                  </li>
	                  <li>
	                           <a href="index.php?id=102">g</a>
	                  </li>

und der TS Code hierzu.

                  CSSMENU = HMENU
                  CSSMENU {
			 special = directory
        			 special.value = 83
        			 wrap = |
			 # Hauptmenue
        			 1 = TMENU
        			 1 {
            		 wrap = <ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                		 expAll = 1
			 NO.ATagTitle.field = subtitle//title
			 NO.wrapItemAndSub = <li> | </li>

			 IFSUB = 1
                		 IFSUB {
                                 wrapItemAndSub =<li class="sub">|</li>
				allWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                 ////allWrap = <li class="sub"> | </li>
                                 ////linkWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
				}
        			    }

        			 2 = TMENU
        			 2 {
                		   wrap = <ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                		   expAll = 1
			   NO.ATagTitle.field = subtitle//title
                		   NO.wrapItemAndSub = <li> | </li>

                		   IFSUB = 1
                		   IFSUB {
                                 wrapItemAndSub =<li class="sub">|</li>
				allWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                 ////allWrap = <li class="sub"> | </li>
                                 ////linkWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
				}
			   }

        			 3 < .2
        			 4 < .2
			}

Da bei mir die Beispiele nicht zufriedenstellend funktioniert haben, habe ich zig Varianten ausprobiert.
Kann mir jemand sagen, wie das richtig gewrapt wird?

Danke
Sven

Lektor ·

Danke für den Link. Der hat mir wirklich geholfen. Hatte doch so einige falsch.
Jetzt funktionieren die Menüs einwandfrei auf dem IE und Firefox.

Danke
Sven

triskal ·

hi,

sry, wenn ich diesen thread noch mal hervorkrame. ich bin dabei das im quoting angegebene menü umzusetzen. läuft auch eigentlich alles meinen vorstellungen entsprechend. jetzt versuche ich allerdings händeringend das submenü ebenfalls horizontal anzeigen zu lassen...

zum besseren verständnis vllt. mal ein link: http://pro-sportler.org

zu sehen ist das toplevel-menü zwischen den orangen linien. unter den topics 'angebote' und 'srsinfo' verbirgt sich jeweils ein sub-menü-level. diese unterpunkte sollen nun jedoch nicht vertikal sondern horizontal, unterhalb der zweiten orangen linie ausgerichtet werden.

ist doch sicher ne css-sache, oder? finde nur ums verrecken nicht die stelle im code die verantwortlich für die vertikale ausrichtung ist 😢

für den ie könnte ichs so lösen, dass ich der dort verwendeten tabelle ein width mitgebe. dann klappts, ist aber keine schicke lösung. ich dachte mehr daran die li's im submenü als display:block und float:left ausrichten zu können, aber das klappt irgendwie nicht...

ist das ganze überhaupt möglich und hat vllt. jemand einen tipp?
danke und gruss, manuel

triskal ·

ok, ich habs.

es fehlte im untergeordneten ul-tag die width-angabe. kein wunder, dass man durch stundenlanges draufgucken keine lösung findet...

ist zwar noch nicht perfekt, aber wird schon werden.

trotzdem danke und gruss, manuel