---
title: "Menü inline erstellen"
url: "https://www.typo3.net/d/70839-menue-inline-erstellen"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2007-11-24"
last_reply: "2007-11-27"
replies: 6
solved: false
page: 1
pages: 1
lang: "de"
---

# Menü inline erstellen

TYPO3 › Menüs · 6 Antworten · gestartet 2007-11-24

## Eröffnungsbeitrag

**icepm** · 2007-11-24 · [Beitrag #1](https://www.typo3.net/d/70839-menue-inline-erstellen/1)

Hallo zusammen,
also ich hab folgendes Problem, ich würde gern ein Menü machen des nicht untereinander angeordnet ist, sondern sich nebeneinander anordnet.
Nun hab ich eben schon die Hilfe bekommen, dass man des am besten im css macht.
Aber ich hab des versucht, aber irgendwie wirkt sich des nicht auf mein Menü aus.

Also hier mal des template, stylesheet und typoscript.

Und als zusätzliche Frage noch, kann mir jemand erklären wie man hier am einfachsten sowas wie "Platzhaltergrafiken" zwischen den einzelnen Menüpunkt einfügt.

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Herzlich Willkommen auf der Homepage von ULF Konzept</title>
</head>

<body background="upload/tf/hint.jpg">
<!--###DOCUMENT_BODY###start-->
<table width="1024" border="0" cellpadding="0" cellspacing="0" background="uploads/tf/hint.jpg" >
  <tr>
		<td width="192" height="110" ></td>
		<td>
			<img src="uploads/tf/designulfhpneu_02.jpg" width="690" height="110" alt=""></td>
		<td width="142" height="110"></td>
	</tr>
	<tr>
		<td width="192" height="60"></td>
		<td>
			<img src="uploads/tf/designulfhpneu_05.jpg" width="690" height="60" alt=""></td>
		<td width="142" height="60" ></td>
	</tr>  <tr>
    <td width="192" nowrap="nowrap" valign="top" align="center">
     <div id="topic">
     <!--###TOPIC###start-->
     Topic
     <!--###TOPIC###stop--> 
     </div>     
     </td>
    <td width="640" valign="top" class="middle_column" >
    <!--###NAVI###start-->
<div id="menue">
      <ul>
							<li><a href="%20">1 </a></li>
							<li><a href="%20">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">Home</a></li>
        </ul>
	</div>
	<!--###NAVI###stop--></td>
				<td width="411"></td>
			</tr>
  <tr>
    <td width="192" nowrap="nowrap" ></td>
	
    <td width="600" height="600" valign="top" bgcolor="#ffffff" style="background-image:url(uploads/tf/hintergrund.jpg);background-position: center center;background-repeat: no-repeat" class="center_column">
	 <!--###INHALT_MITTE###start-->
        <p align="center"> ULF </p>    <!--###INHALT_MITTE###stop-->
	</td>
	<td width="142" nowrap="nowrap" ></td>
	
  </tr>
</table>
<!--###DOCUMENT_BODY###stop-->
</body>
</html>
```

```html
.center_column
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#789344;
margin:0;
padding-right:35px;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
text-align=left;
}
.center_column h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h2
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#3300CC;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h3
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333333;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h4
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h5
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#006600;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h6
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#990066;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
}



.center_column p
{
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:0px;
padding-bottom:10px;
}
.center_column a
{
color:#ED7D18;
text-decoration:none;
}
.center_column a:hover
{
text-decoration:underline;
}

#menue{
	width: 90px;
	}


#menue a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
display:block;
background-color:#789344;
padding-top:5px;
padding-right:5px;
padding-left:5px;
padding-bottom:3px;
margin:0;
width:90px;
text-decoration:none;
border-bottom:5px ;
}
html>body#menue a
{
width:90px;
text-decoration:none;
}
#menue a:link; #menue a:visited
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
}
#menue div {display:inline;}
#menue a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
}
#menue a#current
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
}
#topic
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
display:block;
background-color:#789344;
text-decoration:none;
width:100px;
}
```

```typoscript
page = PAGE
page.stylesheet = uploads/tf/main.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = uploads/tf/template.html
workOnSubpart = DOCUMENT_BODY
}

tmp.NAVIGATION = HMENU
tmp.NAVIGATION {
#menue
  wrap = <div id="menue"> | </div>
  div_id_layer = yymenu
        
   1 = tx_menu_ypslideoutmenu
    1 {
    expAll = 1
    wrap = <ul> | </ul>
    NO = 1
    NO.wrapItemAndSub = <li> | </li>
    ACT = 1
    ACT < .NO
    ACT.ATagParams = id=current
  }
  2 = tx_menu_ypslideoutmenu
  2 { 
      moveTo = down
      height = 22
      width = 177
      expAll=1
      NO {
      }
  }
  3 < .2
  3.moveTo = right
  3.width= 177
  
}
page.10.subparts.NAVI<tmp.NAVIGATION
page.10.subparts.INHALT_MITTE < styles.content.get
page.10.subparts.TOPIC=TEXT
page.10.subparts.TOPIC.data=field:title
```

Also danke schon mal für eure Hilfe.

Lg

## Antworten

### [#2](https://www.typo3.net/d/70839-menue-inline-erstellen/2) · icepm · 2007-11-24

kurz noch als zusatzinfo.

wenn ich im css:
display:none; eingib dann funktioniert es, dann zeigt er nichts an, aber irgendwie macht er egal ob da inline,block... steht keinen unterschied, er schreibt des immer untereinander, jemand ne idee?
lg

### [#3](https://www.typo3.net/d/70839-menue-inline-erstellen/3) · fuss · 2007-11-24

Olla!

Füge mal ein

```html
#menue li {
 display: inline;
}
```

hinzu. Das sollte höchstwahrscheinlich funktionieren.

gruss, fuss

### [#4](https://www.typo3.net/d/70839-menue-inline-erstellen/4) · icepm · 2007-11-24

danke erstmal für die antwort.
aber auch wenn ich des hinzufüg funzt es nicht.
es funzt zwar genauso des none.
aber des inline eben nicht.
ich kapier nicht an was des liegt.
lg

### [#5](https://www.typo3.net/d/70839-menue-inline-erstellen/5) · SLAng · 2007-11-24

du brauchst das display:inline; eigentlich nicht... was du benötigst um Listenelemente nebeneinander darzustellen ist float:left;
Nicht vergessen das float im nächst folgenden Container gegebenenfalls wieder aufzulösen...

### [#6](https://www.typo3.net/d/70839-menue-inline-erstellen/6) · icepm · 2007-11-27

Stylesheet muß man wie folgt verändern dann funzt es, danke für eure hilfe!

```html
.center_column
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#789344;
margin:0;
padding-right:20px;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
text-align=left;
width= 600px;
}
.center_column h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h2
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#3300CC;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h3
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333333;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h4
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h5
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#006600;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h6
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#990066;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
}



.center_column p
{
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:0px;
padding-bottom:10px;
}
.center_column a
{
color:#ED7D18;
text-decoration:none;
}
.center_column a:hover
{
text-decoration:underline;
}

/*
#menue{
	width: 90px;
	}
*/

#menue a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#789344;
padding-top:2px;
padding-right:2px;
padding-left:2px;
padding-bottom:2px;
margin:0 4px;
width:90px;
text-decoration:none;
border-bottom:5px ;
text-align=center;
}

/*
html>body#menue a
{
width:100px;
text-decoration:none;
text-align=center;
}
*/

#menue div
{
display:inline;
}
#menue a:link; #menue a:visited
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#menue a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#menue a#current
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#topic
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#789344;
text-decoration:none;
width:100px;
text-align=center;
}
```

### [#7](https://www.typo3.net/d/70839-menue-inline-erstellen/7) · icepm · 2007-11-27

Stylesheet muß man wie folgt verändern dann funzt es, danke für eure hilfe!

```html
.center_column
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#789344;
margin:0;
padding-right:20px;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
text-align=left;
width= 600px;
}
.center_column h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h2
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#3300CC;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h3
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333333;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h4
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h5
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#006600;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
text-align=left;
}
.center_column h6
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#990066;
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:10px;
}



.center_column p
{
margin:0;
padding-right:0px;
padding-left:0px;
padding-top:0px;
padding-bottom:10px;
}
.center_column a
{
color:#ED7D18;
text-decoration:none;
}
.center_column a:hover
{
text-decoration:underline;
}

/*
#menue{
	width: 90px;
	}
*/

#menue a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#789344;
padding-top:2px;
padding-right:2px;
padding-left:2px;
padding-bottom:2px;
margin:0 4px;
width:90px;
text-decoration:none;
border-bottom:5px ;
text-align=center;
}

/*
html>body#menue a
{
width:100px;
text-decoration:none;
text-align=center;
}
*/

#menue div
{
display:inline;
}
#menue a:link; #menue a:visited
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#menue a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#menue a#current
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#789344;
background-color:#FFFFFF;
text-decoration:none;
text-align=center;
}
#topic
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#789344;
text-decoration:none;
width:100px;
text-align=center;
}
```

---

Quelle: „Menü inline erstellen“, typo3.net, https://www.typo3.net/d/70839-menue-inline-erstellen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.