Zawijanie wierszy w menu

[sirmicho]

Witam.
Mam problem, z którym nie mogę sobie poradzić niestety.

Tworzę stronę, której templatka przewiduje dwa marginesy (left i right) a treść właściwa jest wyswietlana w środkowej części, pomiędzy marginesami. Lewy margines przewidziany jest na menu. Stworzyłem moduł, który wyświetla menu jako Legacy - vertical (po poslku Zgodność - pionowo w tabeli). Problem polega na tym, że jesli pozycja w menu jest za długa (wyraz) to wychodzi z lewego marginesu i zachodzi na tekst właściwy (patrz screenshot).

Jak zmusić by wyraz przenosił się do kolejnego wiersza jeśli nie mieści się w szerokości swojej części? Kombinowałem już z wpisami word-wrap i overflow w css templatki (w sekcji przeznaczonej dla samego menu jak i dla modułu) i niestety nic nie wskurałem (overflow dał mi tylko tyle że ablbo ucina niemieszczący się tekst albo wstawia paski przewijania co szpeci wyglad strasznie).

Korzystam z darmowej templatki, którą modyfikuję. Poniżej przedstawiam fragmenty css dotyczace menu i sekcji left (tu nazwana vasen).

Vasen (left)

#vasen{
 float: left;
 width: 150px;
 margin-right: 10px;
}

Menu

a.mainlevel:link, a.mainlevel:visited {
 display: block;
 background-image: url('../images/bulletti.gif');
 background-repeat: no-repeat;
 background-position: top left;
 vertical-align: middle;
 font-size: 11px;
 font-weight: bold;
 color: #3367CD;
 text-align: left;
 padding-top: 5px;
 padding-left: 10px;
 height: 15px !important;
 height: 20px;
 text-decoration: none;
}
a.mainlevel:hover {
 background-image: url('../images/bulletti_above.gif');
 background-repeat: no-repeat;
 background-position: top left;
 text-decoration: none;
 color: #FFA025;
 font-weight: bold;
}
a.mainlevel#active_menu {
 background-image: url('../images/bulletti_on.gif');
 background-repeat: no-repeat;
 background-position: top left;
          color:#00349A;
 font-weight: bold;
         text-transform: uppercase;
         text-decoration: underline overline;
}
a.mainlevel#active_menu:hover {
 background: url('../images/bulletti_on.gif') no-repeat;
 color: #3367CD;
 font-weight: bold;
}

Dołączam również screenshot - chodzi rzecz jasna o pozycję Zarządzanie bezpieczeństwem.

Uprzejmie proszę o jakieś wskazówki.

[marian_mk]

Wydaje mi się, że możesz to zrobić w stylach CSS, a mianowicie ustalić szerokość wyswietlanego menu, np. dodać do styli a.{display:block; width:200px; } i dla pewnośći , że w nadrzędnych stylach white-space nie jest ustawione na nowrap dać white-space:normal;

[sirmicho]

Dzięki, zacząłem grzebać i grzebać i co prawda, Twoja podpowiedź nie rozwiązała sprawy bezpośrednio, ale przy okazji znalazłem powód.

 height: 15px !important;

Ten zapis odpowiadał za wysokość jednej pozycji w menu.... po przedzieleniu menu na dwa wiersze, ten drugi nie był wyświetlany. Zwiększenie tej wartości rozwiązało sprawę. Dzięki bardzo.

[Sputnik_Wwa]

Hej, nie chcę zaczynać nowego tematu więc piszę tutaj. Robię stronę instytutu na uczelni i mam problem z menu:

http://imiib.mchtr.pw.edu.pl

Chodzi o zawijanie długich nazw. Nie mogę za żadne skarby wymusić by po zawinięciu wiersza był on dokładnie pod górnym a nie cofnięty do tyłu. Podejrzewam, że chodzi jakoś o deklaracje ul li ol ale nie działa nic czego próbowałem. Poradzi ktoś coś?

[marian_mk]

Daj dla .classa ul {margin:0;padding:0;} oraz dla .clasa ul li a { display:block; padding-left:20px} - gdzie 20px to przykładowa odległość wiersza menu od lewej.

[Sputnik_Wwa]

Wstawiłem coś takiego:

.class ul {
  margin:0;
  padding:0;
}
.class ul li a {
 display:block; 
 padding-left:20px
}

i niestety nic to nie dało

[Jola]

Winowajcą jest :

a.mainlevel {
......
......
text-indent : 10px;
}

Pozdrawiam

[Sputnik_Wwa]

Ooo fakt, zapomniałem o tym, pomogło Dzięki