Ich habe ein Problem beim Einbinden von meinem Menü in Typoscript. 🙁🙁🙁
Damit sich das Hintergrundbild an die Länge der Menüpunkte anpasst, ist es in 2 Teile zerlegt. Einen linken, der immer gleich groß ist, und einen rechten, der in der Breite variiert.
Mit HTML und CSS bekommt man das dann auch noch gut hin, aber Typo3 hat Probleme damit, vorallem mit dem <b> Tag, an dem der rechte Teil des Bildes geheftet ist. #paralyzed#
HTML Ausschnitt:
<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>
CSS:
#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;
}
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>
}
}
Hätte jemand einen Vorschlag, wie man das richtig einbinden kann?😉
LG Michaela
Hallo und Willkommen im Forum!
typoMiki schrieb
... aber Typo3 hat Probleme damit ...
Wenn du uns jetzt noch sagst, was genau das Problem ist, kann man sicherlich auch gezielt helfen. Wie sieht denn der Quelltext deines Menüs der TYPO3-Seite aus? Wird irgendein Bild nicht angezeigt? Ist was verschoben?
Und bitte markiere deine Code-Auszüge hier im Forum ensprechend als Code (diese Buttons da über dem Textfeld), dann wird das alles ein bisschen übersichtlicher.
<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.
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?
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 .
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
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.
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 😢
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>
}
}
Danke Emil #giggle##giggle##giggle##giggle##giggle##giggle##giggle#
es funktioniert 😃
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
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
haha. foto gibts keins 🙂
nur eine beschreibung damits noch unrealistischer wird 😉
18, blond und blaue augen 😃