---
title: "Menü mit CSS steuern und ausrichten"
url: "https://www.typo3.net/d/60031-menue-mit-css-steuern-und-ausrichten"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2007-03-25"
last_reply: "2007-03-25"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---
# Menü mit CSS steuern und ausrichten
TYPO3 › Menüs · 1 Antwort · gestartet 2007-03-25
## Eröffnungsbeitrag
**via** · 2007-03-25 · [Beitrag #1](https://www.typo3.net/d/60031-menue-mit-css-steuern-und-ausrichten/1)
Hallo ich überarbeite gerade die Seite von meinem Vater mit CSS als Einstieg in das Thema CSS.
Nur schaffe ich es noch nicht, dass die Navigation in der roten Box horizontal zentriert ist.
Kann mir jemand sagen was ich hier noch nicht korrekt mache?
Viele Grüße,
Oliver
**Mein HTML Template**
```typoscript
viv-it.de
Header
Content hier
Content Right hier
```
**Hier mein Typoscriptauszug**
```typoscript
# Menu top level navigation
subparts.MENU = HMENU
subparts.entrylevel = 0
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
allWrap = 
|
CUR = 1
CUR.linkWrap = |
}
subparts.MENU.1.CUR < subparts.MENU.1.NO
subparts.MENU.1.CUR = 1
subparts.MENU.1.CUR.allWrap = 
|
subparts.MENU.1.CUR.doNotLinkIt = 1
subparts.MENU.1.CUR.ATagBeforeWrap = 1
# Bottom menu
subparts.BOTTOM_MENU = HMENU
subparts.BOTTOM_MENU.special = directory
subparts.BOTTOM_MENU.special.value = 15
subparts.BOTTOM_MENU.1 = TMENU
subparts.BOTTOM_MENU.1.wrap = |
subparts.BOTTOM_MENU.1.NO {
before = |
after = |*| |
}
```
**Das stehe in meinem CSS**
```typoscript
BODY {
font-family: Arial, Helvetica;
font-size: 12px;
color: #333333;
}
#HEAD{
position:absolute;
top: 0px;
left: 0px;
}
#MENU{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 140px;
left: 0px;
width: 960px;
height: 40px;
background-color: #CC3300;
[b]vertical-align:middle;[/b]
}
#TITLE{
font-family:Arial, Helvetica;
font-size: 16px;
color: #FFFFFF;
position:absolute;
top: 210px;
left: 20px;
background-color: #006699;
width: 440px;
border: 1px solid #006699;
padding-left:10px;
}
#CONTENT{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 245px;
left: 20px;
width: 440px;
}
#CONTENT_RIGHT{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 245px;
left: 500px;
width: 440px;
}
#BOTTOM_MENU{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 700px;
left: 0px;
width: 960px;
height: 30px;
background-color: #006699;
border: 1px solid #006699;
text-align:center;
}
a:visited { color: #ffffff; text-decoration: none;}
a:link { color: #ffffff; text-decoration: none;}
a:hover{ color: #ffffff; text-decoration: none;}
```
## Antworten
### [#2](https://www.typo3.net/d/60031-menue-mit-css-steuern-und-ausrichten/2) · via · 2007-03-25
Nachdem ich nun viel herumprobiert habe, habe ich folgenden Workaround gewählt indem ich die CSS-Box des Menüs in ein weiteres div (MENUBOX) eingebettet. Keine Ahnung ob das der übliche Weg ist, aber funktioniert hat es so wie ich es sehen wollte. Woran ich jetzt noch arbeiten muss ist, dass jeder Menüpunkt in einem eigenen "Kasten" und bei Mouse-Over unterschiedlich dargestellt wird.
**HTML Template**
```html
viv-it.de
Header
Content hier
Content Right hier
```
**CSS**
```typoscript
/* General styles */
BODY {
font-family: Arial, Helvetica;
font-size: 12px;
color: #333333;
}
#HEAD{
position:absolute;
top: 0px;
left: 0px;
}
#MENUBOX{
position:absolute;
top: 140px;
left: 0px;
width: 960px;
height: 40px;
background-color: #CC3300;
}
#MENU{
font-family:Arial, Helvetica;
font-size: 14px;
color: #FFFFFF;
position:absolute;
top: 10px;
left: 0px;
width: 960px;
height: 20px;
background-color: #CC3300;
}
#TITLE{
font-family:Arial, Helvetica;
font-size: 16px;
font-weight: bold;
color: #006699;
position:absolute;
top: 210px;
left: 20px;
width: 440px;
border-bottom: 1px solid #006699;
}
#CONTENT{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 245px;
left: 20px;
width: 440px;
}
#CONTENT_RIGHT{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 245px;
left: 500px;
width: 440px;
}
#BOTTOM_MENU{
font-family:Arial, Helvetica;
font-size: 12px;
color: #FFFFFF;
position:absolute;
top: 700px;
left: 0px;
width: 960px;
height: 30px;
background-color: #006699;
border: 1px solid #006699;
text-align:center;
}
a:visited { color: #ffffff; text-decoration: none;}
a:link { color: #ffffff; text-decoration: none;}
a:hover{ color: #ffffff; text-decoration: underline;}
```
---
Quelle: „Menü mit CSS steuern und ausrichten“, typo3.net, https://www.typo3.net/d/60031-menue-mit-css-steuern-und-ausrichten
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
