Zum Inhalt springen

Menü inline erstellen

Erstellt am 24. November 2007 · 6 Antworten · letzte Antwort am 27. November 2007

Tags: Frage

icepm ·

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.

<!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>
.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;
}
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

icepm ·

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

fuss ·

Olla!

Füge mal ein

#menue li {
 display: inline;
}

hinzu. Das sollte höchstwahrscheinlich funktionieren.

gruss, fuss

icepm ·

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

SLAng ·

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...

icepm ·

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

.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;
}
icepm ·

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

.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;
}