Zum Inhalt springen

Probleme mit der Darstellung von TMENU

Erstellt am 18. Februar 2009 · 10 Antworten · letzte Antwort am 28. Februar 2009

Tags: Frage

Sensei ·

Hi,
ich bin dabei, eine Typo3-Site zu entwerfen, und habe mir nun ein Template gebastelt und soweit auch mittels TypoScript zusammengesetzt.
Jedoch habe ich das Problem, das bei meinem Menü (TMENU), was sich auf der linken Seite befindet, die einzelnen Buttons/Schriftzüge unterstrichen dargestellt werde, was sie jedoch nicht sollen.
Nachfolgend poste ich mal den TypoScript Code und die CSS-Datei:

TypoScript-Code:

page = PAGE
page {
        #Allgemeine Seiteneigenschaften setzen
        bodyTag = <body>

        #CSS-Datei einfügen
        includeCSS{
                        screen = fileadmin/style.css
                        screen.title = display
                        screen.media = screen
        }

        
        
        #Die Designvorlage integrieren
        10 = TEMPLATE
        10.template = FILE
        10.template.file = fileadmin/vorlage.html
        10.workOnSubpart = DOKUMENT

        10.marks {
                       #Den Trailer einlesen
        		TRAILER = IMAGE
        		TRAILER.file = fileadmin/images/header.jpg
        
                        #Das Textmenü links erstellen
                        MENUE_LINKS = HMENU
                        MENUE_LINKS {
                                            special = directory
                                            special.value = 1
                                            1 = TMENU
    					    1.NO = 1
                                            1.NO.linkWrap = <br /><strong>|</strong></br>
                        }

        }
}

CSS-Datei:

body
{
	background-color: #f2f2f2;
	text-align: center;
	
}

h2,h3,h4,h5,h6,div,p,body,html,input,button { 
	font: normal 12px Helvetica,Verdana,Arial
}


h1 { 
	font: normal 14px Helvetica,Verdana,Arial;
	font-weight: bold;
}

img.block {
	display:block;
}

div, img {
	margin:0;
	padding:0;
	border:0;
}

div#container {
	width:939px;
	text-align:left;
	margin:0px auto;
	border:1px solid silver;
	background: url(../fileadmin/images/background_cad.gif) center repeat-y;
}

div#top {
	font: bold 10px Verdana,Arial;
	clear:both;
	text-align:right;
	color:#FFFFFF;
	padding:1px;
	padding-right:10px;
	background-image: url(images/background_top.jpg);
}

div#top a {
   text-decoration: none;
   color:white;
   }
   
div#top_down {
	font: bold 15px Verdana,Arial;
	background-color: #d9dadc;
	color: #d9dadc;
}

div#header { background-color:white; }

/*-----------------------------------*/

div#links {
	float:left;
	width:150px;
	padding-top:0px;
	padding-bottom:0px;
	margin-left: 30px;
	margin-top: 0px;
	font: eurostile;
	font-weight: bold;
}

div#head {
	font: normal 10px Helvetica,Verdana,Arial;
	padding-top:5px;
	padding-bottom:5px;
}


div#center {
	margin-left:190px;
	width:550px;
}

div#right {
	width:160px;
	float:right;
	text-align:left;
	padding-top:0px;
	background-color:#5E5E5E;
	margin-top: 0px;
	margin-right: 15px;
}

.float-left { 
	float:left; 
}

div#footer {
	font: normal 9px Helvetica,Verdana,Arial;
	clear:both;
	background-color:#d9dadc;
	padding:10px;
}

a:link {color:#000000}
a:visited {color:#000000}
a:hover {color:#FF0000}	
a:active {}
a:focus {}

Über eure Hilfe wäre ich euch echt sehr dankbar!

Gruß Sensei

Unbekannter Benutzer ·

Das einzige text-decoration: none; findet sich hier:

div#top a {
   text-decoration: none;
   color:white;
   }

Da ich dein HTML-Template nicht kenne, weiß ich nicht, ob dein Menü innerhalb von div#top liegt, andernfalls müsstest du eben noch für die Links in deinem Menü (DIV) noch text-decoration: none definieren.

Sensei ·

Danke für die schnelle Antwort!

Das Menü liegt in div#links - habe hier auch die text-decoration: none; hinzugefügt, aber leider ist trotzdem noch alles unterstrichen.

Hättest du sonst noch eine Idee? Gibt es irgendwo einen fest definierten Standard, das Links/Menüs unterstrichen sind?

Thx

Unbekannter Benutzer ·

Ja hat aber nichts mit TYPO3 zu tun. Schon immer sind Links normalerweise unterstrichen. D.h. jeder Browser hat das als Standardeinstellung.

Eigentlich sollte ein

div#links a{
text-decoration: none;
}

was bringen. Falls nicht, dann poste bitte mal den HTML-Quelltext deiner TYPO3 Page (einfach aufrufen und im Browser den Quelltext anzeigen lassen). Es reicht der Bereich des Menüs, vielleicht ein paar Zeilen drumherum, also nicht das gesamte HTML.

Sensei ·

So, ich hab dir den Quelltext des body-Tags mal gepostet...

<body>

  	
    <div id="container">
    	
      <div id="header"><img src="fileadmin/images/header.jpg" width="939" height="150" border="0" alt="" title="" /></div>
      
      <div id="top"></div>
      
      <div id="top_down">.</div>

      
      <div id="links"><br><strong><a href="index.php?id=2" onfocus="blurLink(this);">.: HOME :.</a></strong></br><br><strong><a href="index.php?id=3" onfocus="blurLink(this);">.: FIRMENPROFIL :.</a></strong></br><br><strong><a href="index.php?id=4" onfocus="blurLink(this);">.: LEISTUNGEN :.</a></strong></br><br><strong><a href="index.php?id=5" onfocus="blurLink(this);">.: MASCHINEN :.</a></strong></br><br><strong><a href="index.php?id=6" onfocus="blurLink(this);">.: REFERENZEN :.</a></strong></br><br><strong><a href="index.php?id=7" onfocus="blurLink(this);">.: ANFAHRT :.</a></strong></br><br><strong><a href="index.php?id=8" onfocus="blurLink(this);">.: KONTAKT :.</a></strong></br><br><strong><a href="index.php?id=9" onfocus="blurLink(this);">.: SITEMAP :.</a></strong></br><br><strong><a href="index.php?id=10" onfocus="blurLink(this);">.: IMPRESSUM :.</a></strong></br></div>      

      <div id="center"><div>###INHALT###</div></div>

      <div id="footer">
        <div align="right" class="style2"> www.cnc-gies.de - drehen - fr&auml;sen - bohren -</div>

      </div>
    </div>
    
    
</body>
Sensei ·

Hey, super - die Unterstriche sind weg! Danke!

Jetzt ist mir nur mein Tag für den Inhalt (###Inhalt###) welches sich in div#container befindet nach unten gerutscht, d.h. auf die Höhe des letzten Menüpunktes. Hängt das mit der Änderung zusammen?

Kannst du mir evtl. noch sagen, wie ich eine andere Schriftfarbe für meine zweite Ebene der Menüpunkte machen kann? Also wenn ich z.B. ein Menüpunkt Leistungen habe und sich dann beim draufklicken weitere Untermenüpunkte öffnen. Weil mit fontColour funktioniert es nicht!

Du kannst ja mal unter www.cnc-gies.de gucken, das ist die url!

Und Tausend Dank schonmal an dich für deine Hilfe!!!

Unbekannter Benutzer ·

Naja, ich wüsste nicht, was die CSS Änderung mit dem Content zu tun hätte.

Grundsätzlich solltest du dich mit HTML und CSS mehr auseinandersetzen, weil die ganzen Probleme hier nichts mit TYPO3 zu tun haben.

fontColor (du meinst im Typoscript?) ist nur für grafische Menüs zuständig, ein TMENU wird über CSS formatiert. Leider hast du kein strukturiertes Menü (als li Liste) erzeugt, damit wäre es jetzt einfacher. Du müsstest so den Links in der zweiten Ebene eine class zuweisen und diese dann im CSS formatieren.

Sensei ·

Hey,
ich bin´s nochmal!
Hab jetzt alles soweit hinbekommen, wie ich möchte, Dank deiner Hilfestellungen!

Jedoch habe ich noch ein kleines Problem: Ich habe wie du gesagt hast, eine Klasse im CSS erzeugt (MenueACT). Hier möchte ich mit bewirken, dass der TMENU-Button, worauf sich der User akutell befindet, kursiv dargestellt wird. Dies hat auch die ganze Zeit funktioniert, jedoch seitdem ich das Kontakt-Formular auf der Seite mit eingebracht habe nicht mehr (weiß jedoch nicht was das eine mit dem anderen zu tun haben soll).
Nachfolgend poste ich euch nochmal den aktuellen Code, es wäre schön, wenn ich mir nochmal einen Tipp geben könntet - Danke schonmal im Vorraus!

Nachfolgend die CSS-Datei:

body
{
	background-color: #f2f2f2;
	text-align: center;
	
}

h2,h3,h4,h5,h6,div,p,body,html,input,button { 
	font: normal 12px Helvetica,Verdana,Arial
}


h1 { 
	font: normal 14px Helvetica,Verdana,Arial;
	font-weight: bold;
}

img.block {
	display:block;
}

div, img {
	margin:0;
	padding:0;
	border:0;
}

div#container {
	width:939px;
	text-align:left;
	margin:0px auto;
	border:1px solid silver;
	background: url(../fileadmin/images/background_cad.gif) center repeat-y;
}

div#top {
	font: bold 10px Verdana,Arial;
	clear:both;
	text-align:right;
	color:#FFFFFF;
	padding:1px;
	padding-right:10px;
	background-image: url(images/background_top.jpg);
}

div#top a {
   text-decoration: none;
   color:white;
   }
   
div#top_down {
	font: bold 15px Verdana,Arial;
	background-color: #d9dadc;
	color: #d9dadc;
}

div#header { background-color:white; }

div#links {
	float:left;
	width:150px;
	padding-top:0px;
	padding-bottom:0px;
	margin-left: 30px;
	margin-top: 0px;
}

div#links a{
	text-decoration: none;
}

div#center {
	margin-left:190px;
	width:740px;
}

.float-left { 
	float:left; 
}

div#footer {
	font: normal 9px Helvetica,Verdana,Arial;
	clear:both;
	background-color:#d9dadc;
	padding:10px;
}



label {
width: 6em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input {
margin-left: 20em;
color: #000;
background: #ffffff;
border: 2px outset #d7b9c9
}

a:link {color:#000000}
a:visited {color:#000000}
a:hover {color:#FF0000}	
a:active {}
a:focus {}

MenueACT {
	font-style: italic;	
}

Hier der Typoscript-Code:

page = PAGE
page {
        #Allgemeine Seiteneigenschaften setzen
        bodyTag = <body>

        #CSS-Datei einfügen
        includeCSS{
                        screen = fileadmin/stylez.css
                        screen.title = display
                        screen.media = screen
        }

        #Die Designvorlage integrieren
        10 = TEMPLATE
        10.template = FILE
        10.template.file = fileadmin/vorlage.html
        10.workOnSubpart = DOKUMENT

        10.marks {
                       #Den Trailer einlesen
        		TRAILER = IMAGE
        		TRAILER.file = fileadmin/images/header.jpg
        
                        #Das Textmenü links erstellen
                        MENUE_LINKS = HMENU
                        MENUE_LINKS {
                                            special = directory
                                            special.value = 1
                                            1 = TMENU
    					    1.NO = 1
                                            1.NO {
                                                     linkWrap = <br><strong>|</strong></br>
                                            }
                                            1.ACT < .1.NO
                                            1.ACT {
                                                      ATagParams =  class="MenueACT"
                                            }

                                            2 < .1
                                            2.NO {
                                                     linkWrap = <br>|</br>
                                            }
                                            2.ACT {
                                                       linkWrap = <br>|</br>
                                            }
                        }


                        #Inhalte ausgeben
     			INHALT = CONTENT
     			INHALT {
     				    table = tt_content
     			}
        }
}