Zum Inhalt springen

Menü mit 2 Hintergrundbildern TYPO3

Erstellt am 22. Januar 2013 · 12 Antworten · letzte Antwort am 25. Januar 2013

Tags: HTML & CSS, Frage

typoMiki ·
<div>
<ul id="menu">
<li class="current"><a href="#"><b>home</b></a></li>
<li><a href="#"><b>arbeiten</b></a></li>
<li><a href="#"><b>bio</b></a></li>
<li><a href="#"><b>videos</b></a></li>
<li><a href="#"><b>texte</b></a></li>

</ul>	
</div>

Typoscript:

temp.menu = HMENU
temp.menu {

special = list
special.value = 74, 76, 77, 75, 78

1 = TMENU
1 {
wrap = <ul id="menu">|</ul>
NO = 1
NO.wrapItemAndSub = <li><b>|</b></li>

ACT <.NO
ACT.wrapItemAndSub = <li class="current"><b>|</b></li>


}
}
#menu	 {width: 498px;
height: 60px;
/*border: 1px solid green; */ 
float: right;
margin-top: 95px;
padding: 0px;

}	

#menu li a	 {display: block;
background: url(../Bilder/templatemo_menu_left.png) no-repeat;
margin: 0 0 0 5px ;
padding: 0px 0 0 7px;
height: 45px;
line-height: 33px;
cursor: pointer; }



#menu li a b {
float: left;
display: block;
height: 40px;
padding: 5px 20px 0 11px;
background: url(../Bilder/templatemo_menu_right.png) right top no-repeat;

}



#menu li.current a, #menu li a:hover {
background: url(../Bilder/templatemo_menu_left_current.png) no-repeat;
color: #fff;
}

#menu li.current a b, #menu li a:hover b {
background: url(../Bilder/templatemo_menu_right_current.png) right top no-repeat;
}

Also: Typo3 zeigt das Bild, das am <b> Tag angehängt ist, nicht an.
Es wird nur das Bild "templatemo_menu_left.png" und "templatemo_menu_left_current.png" angezeigt.

Das Bild "templatemo_menu_right.png" wird nicht angezeigt.

remedien ·

Hi,
was bekommst du denn für einen HTML-Code zurück?
Ich habe noch nie ein background-image auf einen <b> Tag angewendet.
Aber es funzt #giggle#

Kann es sein, dass evtl. dein Doctype nicht stimmt?

typoMiki ·

Ich hab das vorher auch noch nie getan, hab das aber bei einer Website gefunden und in HTML funktioniert es ja auch super.

Das wäre dann der Seitenquelltext.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="utf-8">
<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2011 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->



<title>home</title>
<meta name="generator" content="TYPO3 4.6 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_0c63aaed1a.css?1358963196" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/templates/ruckart/CSS/style.css?1358967200" media="all">



<script src="typo3temp/javascript_757c080409.js?1355079929" type="text/javascript"></script>


<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door|Kite+One|Scada|Shadows+Into+Light+Two|Oregano&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>

	
		<div id="header_wrapper">
		
			<div id="header">
				 
				<div>
				 <ul id="menu"><li class="current"><b><a href="index.php?id=74" onfocus="blurLink(this);"  >home</a></b></li><li><b><a href="index.php?id=76" onfocus="blurLink(this);"  >bio</a></b></li><li><b><a href="index.php?id=77" onfocus="blurLink(this);"  >arbeiten</a></b></li><li><b><a href="index.php?id=75" onfocus="blurLink(this);"  >texte</a></b></li><li><b><a href="index.php?id=78" onfocus="blurLink(this);"  >videos</a></b></li></ul>
				 
				</div>
					
			</div>				
		</div>

Im Anhang wäre noch ein Bild, der oberer Teil ist, wie es jetzt in typo3 ausschaut.
und das unten ist richtig dargestellt in HTML .

menue.png

remedien ·

Hi,
also ich würde erst mal probieren, den Doctype ordentlich auszugeben.

meiner sieht so aus:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xml:lang="de_DE" lang="de_DE" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

im TS Setup habe ich dann folgendes stehen

config {
linkVars = L
sys_language_uid = 0
language = de
locale_all = de_DE
doctype = xhtml_strict
doctypeSwitch = false
xhtml_cleaning = all
htmlTag_langKey = de_DE
sys_language_mode = content_fallback
sys_language_overlay = hideNoneTranslated
}

Evtl. wird dein Problem damit schon behoben

Norman2k ·
remedien schrieb

Hi,
also ich würde erst mal probieren, den Doctype ordentlich auszugeben.
...

Was ist an dem HTML5-Doctype nicht ordentlich?

Aber ich geb dir insofern Recht, dass es eventuell aufgrund von HTML 5 nicht korrekt angezeigt wird und wenn er den Doctype auf XHTML ändert, das dann alles i.O. ist.

typoMiki ·
Norman2k schrieb

wenn er den Doctype auf XHTML ändert, das dann alles i.O. ist.

ich bin eine sie 😃
aber egal.

Ich hab den Doctype auf XHTML geändert. geht aber trotzdem nicht 😢

etux ·

Deine Menü-Konfiguration setzt die Menü-Links in das b-Element rein.
Laut CSS- und HTML-Vorlage sollte aber das b-Element in dem Link stehen:

So wäre das der Fall:

temp.menu = HMENU
temp.menu {
 
  special = list
  special.value = 74, 76, 77, 75, 78
 
  1 = TMENU
  1 {
    wrap = <ul id="menu">|</ul>
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
    NO.ATagBeforeWrap = 1
    NO.linkWrap = <b>|</b>
 
    ACT <.NO
    ACT.wrapItemAndSub = <li class="current">|</li>

  }
}
Norman2k ·
typoMiki schrieb
Norman2k schrieb

wenn er den Doctype auf XHTML ändert, das dann alles i.O. ist.

ich bin eine sie 😃
aber egal.

Ups, entschuldige bitte :o

remedien ·
typoMiki schrieb

ich bin eine sie 😃
aber egal.

Beweisfoto bitte :o

Super, hätte man ja wirklich sehen können... 6 Augen und keiner hats gesehen :p

Grüße

typoMiki ·

haha. foto gibts keins 🙂
nur eine beschreibung damits noch unrealistischer wird 😉
18, blond und blaue augen 😃