Hab mir ein Menü - hab dazu hauptsächlich eine Vorlage verwendet - erstellt. Dieses ist links vertikal ausgerichtet.
Wie erstelle ich nun einfach ein waagrechtes Menü oben rechts?
In der template-datei hab ich die Menüs schon erstellt, diese werden auch im frontend angezeigt - aber nicht als richtges Menü.
Muss ich da in der css-Datei was ändern oder im Seitenbaum von Typo3 Seiten anlegen: Menü_links
Menü_oben
Gruß Michael
im CSS.
Menu andere Klasse geben, in CSS so stylen wie du möchtest, fertig.
http://www.css4you.de (schadet nicht)
http://de.selfhtml.org
http://www.typo3.net/literatur_zu_typo3/ (Einsteiger-Doku runterladen, ab Seite 100 wirds dann interessant - löst aber generell sicher viele Fragen)
Möchte aber das waagrechte Menü zusätzlich zum vertikalen Menü erstellen. Ist das kein Problem? In der Anleitung von Robert Meyer wurden 2 Seiten erstellt:
Menü_oben
Menü_links
Muss ich das auch so machen, oder geht es so auch?
Ist das kein Problem?
nein 😉
2 Seiten? Du meinst 2 Marker, nicht?
Muss ich das auch so machen, oder geht es so auch?
ist empfehlenswert: Arbeitet man mit einer Anleitung sollte man die Vorgehensweise daraus auch übernehmen, da sonst Fehler auftreten, die mit der Anleitung allein nur schwer gefunden werden können.
Bitte nicht schimpfen, aber ich komme immer noch nicht weiter.
Links das Menü funktioniert einwandfrei.
Jetzt will ich aber oben rechts ein Menü erstellen.
Habe mir 2 Anleitungen zu Hilfe genommen. Erstens die von Robert Meyer und zweitens "Moderne Templateerstellung", wobei die zweite mehr mit Extensions arbeitet (auto-parser, auto_content.get). Habe mich für zweitere entschieden.
Nur wie erstelle ich das waagrechte Menü? Wo liegt der Fehler?
Für eure Hilfe wär ich euch sehr dankbar.
Template
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gästehaus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" id="internalStyle">
/*<![CDATA[*/
BODY { margin: 0 0 0 0; background-color: white; }
/*]]>*/
</style>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" height="100" border="0" align="center">
<tr>
<td height="84" id="header_1"><img src="images/banner_oben Kopie.jpg" alt="banner_oben" width="800" height="120" align="middle" /></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
<td width="482"> </td>
<td id="menu_oben">
<td width="100"><div class="menu_oben-level1-no">
<div align="center"><a href="#">Startseite</a></div>
</div></td>
<td width="100"><div class="menu_oben-level1-no">
<div align="center"><a href="#">Anfrage</a></div>
</div></td>
<td width="100"><div class="menu_oben-level1-no">
<div align="center"><a href="#">Gästebuch</a></div>
</div></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
<td id="menu_1">
<div class="menu1-level1-act"><a href="#">Startseite</a></div>
<div class="menu1-level1-act"><a href="#">Komfortzimmer</a></div>
<div class="menu1-level2-no"><a href="#">Zimmer 1</a></div>
<div class="menu1-level2-no"><a href="#">Zimmer 2</a></div>
<div class="menu1-level2-no"><a href="#">Zimmer 3</a></div>
<div class="menu1-level1-act"><a href="#">Ferienwohnungen</a></div>
<div class="menu1-level2-no"><a href="#">Plattig</a></div>
<div class="menu1-level2-no"><a href="#">Simmering</a></div>
<div class="menu1-level2-no"><a href="#">Pirchkogel</a></div>
<div class="menu1-level1-act"><a href="#">Über uns</a></div>
<div class="menu1-level1-act"><a href="#">Lage</a></div>
<div class="menu1-level1-act"><a href="#">Fotos</a></div>
<div class="menu1-level1-act"><a href="#">Links</a></div>
</td>
<td id="content">
<img src="images/DSC01743 Kopie.jpg" alt="Hausfoto" width="448" height="339" border="1" /> </tr>
</table>
<table width="805" border="0" align="center">
<tr>
<td colspan="2" id="footer">
<div align="center">Adresse & Adresse | Adresse |
adresse | adresse</div>
</td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
Typoscript
plugin.tx_automaketemplate_pi1 {
content = FILE
content.file = fileadmin/template_demo1.html
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
}
relPathPrefix = fileadmin/
}
temp.menu_oben = HMENU
temp.menu_oben_1.1 = TMENU
temp.menu_oben_1.1 {
NO.allWrap = <div class="menu_oben-level1-no"> | </div>
ACT = 1
ACT.allWrap = <div class="menu_oben-level1-act"> | </div>
}
# Menu 1 cObject
temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <div class="menu1-level1-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
# Substitute the ###menu_1### subpart with dynamic menu:
subparts.menu_1 < temp.menu_1
subparts.menu_oben < menu_oben
# Substitute the ###content### subpart with some example content:
subparts.content < styles.content.get
}
# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
Stylesheet
/* GENERAL fonts */
P, OL, UL, DIV, H1, H2 {
font-family: verdana, arial;
font-size: 11px;
}
H1 { font-size: 15px; }
H2 { font-size: 13px; }
P, H1, H2 {margin: 0px 0px 5px 0px;}
TD#footer {border-top: dotted 1px #999999;}
TD#footer P {
font-size: 12px;
text-align: center;
}
/* Content column */
TD#content {
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
vertical-align: top;
width: 380px;
}
/* Menu 1 column */
TD#menu_1 {
vertical-align: top;
width: 200px;
background-image:url(images/kette.JPG)
background-repeat : no-repeat;
padding-top: 10px;
}
TD#menu_1 DIV {
width: 95%;
}
TD#menu_1 DIV A {
color: navy;
text-decoration: none;
}
TD#menu_1 DIV A:hover {
text-decoration:underline;
}
/* MENU 1, level 1, normal state (NO) */
TD#menu_1 DIV.menu1-level1-no {
border-bottom: 1px dotted #999999;
font-size: 16px;
padding-top:5px;
padding-left:5px;
}
/* MENU 1, level 1, active state (ACT) */
TD#menu_1 DIV.menu1-level1-act {
border-bottom: 1px solid #999999;
font-weight:bold;
font-size: 16px;
padding-top:5px;
padding-left:5px;
background-color: #eeeeee;
filter:alpha(opacity='70', style='0');
}
TD#menu_1 DIV.menu1-level1-act A {
color:black;
}
/* MENU 1, level 2, normal state (NO) */
TD#menu_1 DIV.menu1-level2-no {
font-size: 14px;
padding-left:20px;
}
/* MENU 1, level 2, active state (ACT) */
TD#menu_1 DIV.menu1-level2-act {
font-size: 14px;
font-weight:bold;
padding-left:20px;
}
/* MENU 2, level 1, general for all table cells: */
TR#menu_2 TD {
background-color: #333366;
width: 10%;
text-align: center;
padding: 0px 2px 0px 2px;
}
TR#menu_2 TD A {
color: white;
font-size: 10px;
font-family: verdana, arial;
text-decoration: none;
}
TR#menu_2 TD A:hover {
text-decoration: underline;
}
TR#menu_2 TD.oddcell {
background-color: #666699;
}
TR#menu_2 TD.menu2-level1-act {
background-color: #88292A;
}
/* Style for the Path-menu: */
TD#path {
white-space: nowrap;
background-color: #F8F8EC;
font-family: verdana, arial;
font-size: 11px;
font-style: italic;
font-weight: bold;
padding: 1px 1px 5px 5px;
}
TD#path A {
text-decoration: none;
color:black;
}
TD#path A:hover {
text-decoration: underline;
}
/* Menu oben column */
TD#menu_oben {
vertical-align: top;
width: 200px;
background-image:url(images/kette.JPG)
background-repeat : no-repeat;
padding-top: 10px;
}
TD#menu_oben DIV {
width: 95%;
}
TD#menu_oben DIV A {
color: navy;
text-decoration: none;
}
TD#menu_oben DIV A:hover {
text-decoration:underline;
}
/* MENU oben, level 1, normal state (NO) */
TD#menu_oben DIV.menu_oben-level1-no {
border-bottom: 1px dotted #999999;
font-size: 16px;
padding-top:5px;
padding-left:5px;
}
/* MENU oben, level 1, active state (ACT) */
TD#menu_oben DIV.menu_oben-level1-act {
border-bottom: 1px solid #999999;
font-weight:bold;
font-size: 16px;
padding-top:5px;
padding-left:5px;
background-color: #eeeeee;
filter:alpha(opacity='70', style='0');
}
TD#menu_oben DIV.menu_oben-level1-act A {
color:black;
}
/* MENU oben, level 2, normal state (NO) */
TD#menu_oben DIV.menu_oben-level2-no {
font-size: 14px;
padding-left:20px;
}
/* MENU oben, level 2, active state (ACT) */
TD#menu_oben DIV.menu_oben-level2-act {
font-size: 14px;
font-weight:bold;
padding-left:20px;
}
Keiner eine Lösung?