PDA

Zobacz pełną wersję : Zawijanie wierszy w menu



sirmicho
07-03-2008, 09:54
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
07-03-2008, 15:40
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
07-03-2008, 16:02
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
24-05-2009, 20:57
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
24-05-2009, 21:09
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
24-05-2009, 21:25
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
24-05-2009, 22:53
Winowajcą jest :

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

Sputnik_Wwa
24-05-2009, 22:59
Ooo fakt, zapomniałem o tym, pomogło :) Dzięki