Zum Inhalt springen

Darstellung Navipunkte nebeneinander, TMENU

Erstellt am 15. September 2007 · 3 Antworten · letzte Antwort am 17. September 2007

Tags: HTML & CSS, Frage

Dinchen21 ·

Hallo zusammen,

ich würde gerne wissen, wie ich meine Navigationspunkte horizontal nebeneinander anordnen kann. Die Ausrichtung des horizontalen Menüs ist rechtsbündig.

Bisher wird nur ein Navigationspunkt angezeigt und die folgenden sind nicht zu sehen. Ich könnte mir vorstellen das es an dem automatischen Zeilenumbruch oder an meiner CSS liegt, aber habe bisher leider noch keine Lösung gefunden :-(

Hoffe das mir jemand weiterhelfen kann.

Hier mein TS:

 ...
  10 = TEMPLATE
  10.template = FILE
  10.template.file = fileadmin/designvorlage.html
  
  10.marks {
    MENU_HORIZONTAL = HMENU
    MENU_HORIZONTAL.special = directory
    MENU_HORIZONTAL.special.value = 7
    MENU_HORIZONTAL.entryLevel = 0
    MENU_HORIZONTAL.1 = TMENU
    MENU_HORIZONTAL.1 {
      noBlur = 1
      NO.linkWrap = <div class="linkblock_horizontal">|</div>
      CUR = 1
      CUR.linkWrap = <div class="linkblock_horizontal" style="background-color:#e9f0fb; color:#295c9f">|</div>
      CUR.ATagParams = style="color:#295c9f;"
    }
   ...

CSS:
div.menuleiste_horizontal
{
width:900px;
height:2em;
background-color:#295c9f;
margin-left:0px;
margin-right:0px;
border-top:2px solid #ffffff;
margin-bottom:0px;
padding:0em;
overflow:hidden;
float:left;
}

.linkblock_horizontal
{
border-left:2px solid #ffffff;
font-size:1.0em;
width:10em;
height:2em;
color:#ffffff;
text-align:center;
float:right;
}

.linkblock_horizontal a,
.linkblock_horizontal a:visited
{
text-decoration:none;
font-family:verdana,sans-serif,sans;
display:block;
color:#ffffff;
margin:0em;
padding-right:0em;
padding-left:0em;
padding-bottom:0em;
padding-top:3px;
}

.linkblock_horizontal a:hover
{
height:2em;
margin:0em;
padding-right:0em;
padding-left:0em;
padding-bottom:0em;
padding-top:3px;
display:block;
color:#295c9f;
background-color:#e9f0fb;
}

.linkblock_horizontal a:active
{
height:2em;
margin:0em;
padding-right:0em;
padding-left:0em;
padding-bottom:0em;
padding-top:3px;
display:block;
color:#295c9f;
background-color:#e9f0fb;
}

Vielen Dank!
Gruß Dinchen

mike_mcfly ·

Poste doch noch die HTML-Ausgabe von TypoScript, damit ich sehen kann, wie die einzelnen Menupunkte gewrapt werden!

Aber eins schon mal vorweg:

Wenn Du die li-Elemente in Deinem CSS mit float:left oder display:inline ansprichst müssten sich diese horizontal darstellen.

Dinchen21 ·

Erstmal Danke für deinen Rat!

Beim ersten Versuch habe ich display:block durch display:inline ersetzt,
dies hat aber leider nichts geholfen.
Beim Ändern von float wurde nur die Position des Navipunktes verschoben aber die weiteren Navipunkte wurden nicht nebeneinander angezeigt. *grübel*

Hier noch ein Auszug aus der HTML-Ausgabe:
..
<div class="umrandung">
<div class="header"></div>
<div class="menuleiste_horizontal">
<div class="linkblock_horizontal">
<div class="linkblock_horizontal"><a href="index.php?id=8" >Kontakt</a></div><div class="linkblock_horizontal"><a href="index.php?id=9" >Suche</a></div><div class="linkblock_horizontal"><a href="index.php?id=10" >Impressum</a></div>
</div>
</div>
...

Gruß Dinchen