+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami (/thread-css-xhtml-poziome-menu-rozciagniete-miedzy-dwoma-krawedziami)
[css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Flake - 22-02-2011
Witam,
potrzebuję zrobić poziome menu. Menu będzie zawierało zmienną ilość linków. Pierwszy link menu musi być przyklejony do lewej strony DIVa który będzie przechowywał menu zaś prawy link do prawej strony. Chcę, żeby odległości między linkami były automatycznie zmieniane po dodaniu nowego linka. Próbowałem to zrobić ale póki co udaje mi się uzyskać 'statyczne' menu - czyli odległości między elementami menu ustalone na sztywno - co po dodaniu nowego linka rozwala całe menu. Czy jest jakiś sprytny sposób na zrobienie tego aby odległości ustalały się automatycznie?
Kod:
<div id="menu">
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
</ul>
</div>link 1 powinien mieć margin-left: 0 a link 4 margin-right: 0;
jakieś porady?
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - beny - 22-02-2011
żeby wyrównać szerokości pomiędzy komórkami i pod warunkiem, że możesz olać IE6 i IE7, to poszukaj właściwości display: table;
dla pierwszego elementu <li> daj klasę np. first, dla ostatniego last i ostyluj to cssem
jeśli to ma być cross-browser... zostaje Ci albo tabela w htmlu albo przeszukanie google
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Kartofelek - 22-02-2011
Albo jquery. 1 -2 linijki kodu
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - beny - 22-02-2011
@Kartofelek
do liczenia szerokości każdego elementu, czy oznaczania pierwszego i ostatniego <li> ?
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Kartofelek - 22-02-2011
Liczenia. Albo oznaczenia. ;] Jak ma byc dynamicznie 100%, to wtedy same css coś mi się wydaje że nie zadziałają.
Zresztą to i tak nie zawsze możliwe bo:
link1 | link_2 | super_długi_link_który_jest_najdlozszym_linkkiem_w_historii_internetu_3 | tyci_link4
Tak więc albo tabela, albo display-table (zawodne), albo jquery.
Albo zmienić podejście do całej sprawy
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Flake - 22-02-2011
Jquery odpada - chcę to zrobić na czystym html, css - javascript będę dodawał poźniej. Chcę żeby było też zgodnie ze standardami oraz żeby kod był semantyczny. Dlatego tabelka też odpada. Nie temu służy
Myślałem, że robi się to za pomocą jakiejś konfiguracji elementów display, position i text-position w odniesieniu do diva zawierającego i poszczególnych <li>
Widocznie będę musiał poszukać głębiej
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Kartofelek - 22-02-2011
"Dlatego tabelka też odpada. Nie temu służy"
???????????
Czekaj dodam jeszcze kilka
?????????
Nikt nie mówi tutaj o tabelce. Mówimy o display:table
Jedno z drugim nie ma nic wspólnego
Co mogę powiedzieć. Życzę powodzenia w czystym CSS który zadziała na większości przeglądarek (nawet nie mówię tutaj o IE6). Jak ci się uda koniecznie napisz rozwiązanie, bo sam jestem ciekaw.
RE: [css][xhtml] poziome menu rozciągnięte między dwoma krawędziami - Flake - 22-02-2011
"Tak więc albo tabela, albo display-table (zawodne), albo jquery."
Jak coś znajdę to dam znać