Zum Inhalt springen

Zeilenumbruch im Menu stimmt nicht

Erstellt am 1. September 2008 · 11 Antworten · letzte Antwort am 3. September 2008

Tags: HTML & CSS, Frage

erschaup ·

Ich versuche verzweifelt ein Menu auf die Beine zu stellen, so dass die Menupunkte ordentlich untereinander stehen. Das geht soweit ganz gut bis auf die Tatsache, dass zu lange Titel umgebrochen werden und dann nicht mehr bündigt sind. Mein TS sieht derzeit so aus.

tmp.SEITENNAVIGATION = HMENU
tmp.SEITENNAVIGATION.entryLevel = 1

tmp.SEITENNAVIGATION.1 = TMENU
tmp.SEITENNAVIGATION.1.NO {
  expAll = 1
  allWrap = <div class="navi_seite"> | </div>
}

tmp.SEITENNAVIGATION.1.ACT = 1
tmp.SEITENNAVIGATION.1.ACT {
  allWrap = <div class="navi_seite"> | </div>
}

So sieht es derzeit aus: http://www.wcg-unternehmensberatung-reutlingen.de/index.php?id=5

Kann ich es irgendwie anstellen, dass die umgebrochenen Punkte trotzdem ordentlich in der Reihe stehen?

Bin für jeden Tip dankbar.

larsmessmer ·

Das ist nur ne Frage des CSS, mach den Abstand links einfach auf deine "hauptmenu" klasse oder ID und nicht mit &nbsp;&nbsp;&nbsp;...

padding!!

Unbekannter Benutzer ·

Da muss ich mich mal sehr räuspern...

Das hat doch damit nichts zu tun!

Ein Menü macht man mit einer Liste. Dann stehen zu lange Titel automatisch bündig... Und dann kann man sehr wohl mit padding einrücken wie mal möchte.

erschaup ·

sorry larsmesser, versteh nicht ganz was Du meinst. Kannst Du mir das vielleicht mal genau erklären. Stehe hier ein wenig auf dem Schlauch:

Hier mal noch die zugehörigen CSS:

.navi_seite {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.navi_seite a:link {
color: #000000;
text-decoration: none;
}

.navi_seite a:visited {
color: #000000;
text-decoration: none;
}

.navi_seite a:hover {
color: #DB3035;
text-decoration: none;
}

.navi_seite a:active {
color: #DB3035;
text-decoration: none;
}

erschaup ·

kann ich dann trotzdem noch im 2. untermenu mit ts meine pfeile vor die menupunkte basteln oder muss ich das dann auch in css machen?

Unbekannter Benutzer ·

Was heißt "nicht so gut".... Es ist einfach lange nicht so flexibel und so schlank wie per CSS. Per CSS hast du wesentlich mehr Möglichkeiten. Das würde ich mir stark überlegen, dass mit div-Containern und mit beforeImg zu machen...

erschaup ·

hallo

habe meine menus jetzt mit ungeordneten listen gebaut, soweit so gut; hier mal mein ts:

tmp.SEITENNAVIGATION = HMENU
tmp.SEITENNAVIGATION.entryLevel = 1
tmp.SEITENNAVIGATION {
    1 = TMENU
    1 {
        expAll = 0
        wrap = <ul class="navi_seite">| </ul>
        NO {
            
            allWrap = <li class="navi_seite_normal">|</li>        
        }
        

        ACT = 1
        ACT {
            allWrap = <li class="navi_seite_aktiv">|</li>
        }
    }

    2 = TMENU
    2 {
        wrap = <ul class="navi_seite_klein"> | </ul>
        NO {
            allWrap = <li class="navi_seite_klein"> |</li>      
            beforeImg = fileadmin/images/pfeil_weiss.gif
            beforeROImg = fileadmin/images/pfeil_rot.gif
  	   RO = 1
        }
        ACT = 1
        ACT {
        beforeImg = fileadmin/images/pfeil_rot.gif
        allWrap = <li class="navi_seite_klein_aktiv">|</li>
        }
        
    }
}

Meine Einrückungen stimmen aber immer noch nicht. Irgendwie habe ich wohl einen Fehler in den CSS-Dateien, aber ich finde ihn nicht. Könnte da mal jemand drauf schauen und mir den Fehler sagen:

.navi_seite {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
list-style: none;
margin: 0 px
padding: 0 px
}

.navi_seite a:link {
color: #000000;
text-decoration: none;
}

.navi_seite a:visited {
color: #000000;
text-decoration: none;
}

.navi_seite a:hover {
color: #DB3035;
text-decoration: none;
}

.navi_seite a:active {
color: #DB3035;
text-decoration: none;
}

.navi_seite_norm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}

.navi_seite_aktiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #DB3035;
text-decoration: none;
list-style: none;
margin: 0 px
}

.navi_seite_aktiv a:link {
color: #DB3035;
text-decoration: none;
}

.navi_seite_aktiv a:visited {
color: #DB3035;
text-decoration: none;
}

.navi_seite_aktiv a:hover {
color: #DB3035;
text-decoration: none;
}

.navi_seite_aktiv a:active {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
list-style: none;
margin: 5 px
}

.navi_seite_klein a:link {
color: #000000;
text-decoration: none;
}

.navi_seite_klein a:visited {
color: #000000;
text-decoration: none;
}

.navi_seite_klein a:active {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein a:hover {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein_aktiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DB3035;
text-decoration: none;
list-style: none;
margin: 5 px
}

.navi_seite_klein_aktiv a:link {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein_aktiv a:visited {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein_aktiv a:hover {
color: #DB3035;
text-decoration: none;
}

.navi_seite_klein_aktiv a:active {
color: #DB3035;
text-decoration: none;
}

Zu sehen ist der Fehler nochmals hier: http://www.wcg-unternehmensberatung-reutlingen.de/index.php?id=5
Die Seminare hängen in der Gegend herum!

Unbekannter Benutzer ·

Ich denke das liegt einfach am beforeImg, dass ja auch noch vor dem LI sitzt, dass im übrigen auch noch falsch geöffnet und geschlossen wird.

List-Menüs immer mit wrapItemAndSub bauen.

Wegen deinem CSS:
Installier dir die Webdeveloper Tools für den Firefox und dann kannst du selbst mal schauen wo der Fehler liegt, da du dann live dein CSS bearbeiten kannst. Ein nacktes CSS-Snippet hilt niemandem etwas.