Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Linki w HTML
Forum PHP.pl > Forum > Przedszkole
grow
Pytanie dość nietypowe, potknąłem się na zwykłym HTML, no a raczej CSS.

Mam taki kod linków:
  1. <table cellpadding="0" cellspacing="0" width="140">
  2. <tr><td>
  3. <a href="" class="menu_lnk">link</a><br>
  4. <a href="" class="menu_lnk">link</a><br>
  5. <a href="" class="menu_lnk">link</a><br>
  6. <a href="" class="menu_lnk">link</a><br>
  7. <a href="" class="menu_lnk">link</a><br>
  8. </td></tr>


i taką klasę menu_lnk:

  1. .menu_lnk {
  2. width:100%;
  3. position:absolute;
  4. font-family: Century Gothic;
  5. font-size: 11px;
  6. font-weight:bold;
  7. text-decoration:none;
  8. text-align: right;
  9. padding-right:5px;
  10. border-right:7px solid #B5B5B5;
  11. color:#9A9A9A;
  12. }
  13. .menu_lnk:hover {
  14. color:#7A7A7A;
  15. background:#CACACA;
  16. border-right:7px solid #929292;
  17. }


Pod IE 6 efekt śmiga kapitalnie, ale otwieram sobie Operę i patrze, a tu każdy link jest oddzielony około 7 pikselową przerwą... no dobra ujdzie, włączam FireFox'a i patrze: WOW przyciski są na całą szerokość strony...

Z FF kombinowałem długo, browser bierze 100% strony, a nie ramki bo tak na niego działa
Kod
position:absolute;


Z tą przerwą w Operze nie umiem nic zrobić...

Rozkładam ręce, jak mam uzyskać efekt z IE na Operze i FF?
revyag
W jakim celu używasz position absolute questionmark.gif Ten styl tu tylko bruździ, co chciałeś uzyskać wstawiając go ?
Primo wywalasz positon absolute.
Druga sprawa: a jest elementem liniowym, to znaczy że nie możesz mu przypisywać takich atrybutów jak width, text-align. Żeby to działało jak chcesz musisz dodać do definicji klasy styl display i usunąć znaczniki br, bo wtedy każdy a zacznie się od nowego wiersza.
Kod
.menu_lnk {
    width:100%;
    font-family: Century Gothic;
    font-size: 11px;
    font-weight:bold;
    text-decoration:none;
    padding-right:5px;
    border-right:7px solid #B5B5B5;
    color:#9A9A9A;
    display:block;
    text-align:right;
}

  1. <table cellpadding="0" cellspacing="0" width="140">
  2. <tr><td>
  3. <a href="" class="menu_lnk">link</a>
  4. <a href="" class="menu_lnk">link</a>
  5. <a href="" class="menu_lnk">link</a>
  6. <a href="" class="menu_lnk">link</a>
  7. <a href="" class="menu_lnk">link</a>
  8. </td></tr>
grow
dzieki za pomoc smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.