Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Menu problem
Forum PHP.pl > Forum > Przedszkole
marcin0077
Witam

Robię stronkę www która oczywiście zawiera menu i mam pewien problem zrobiłem takie niby guziki tylko jak robię link to jest do samego tekstu a nie do całego guzika i nie mam pojęcia jak to zmienić ;/
Kod
<table width=170 height=150 border=0 cellPadding=0 bgcolor=#000000 cellSpacing=1><tr>

<td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>

<A HREF="index.html"><b>Strona główna</b></A>
</td>

</TR>
<tr>

<td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>

<A HREF="222222.html"><b><font color="red">222222</font></b></A>
</td>

</TR>

<tr>

<td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>

<A HREF="333333.html"><b>333333</b></A>
</td>

</TR>
<tr>

<td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>

<A HREF="444444.html"><b>444444</b></A>
</td>

</TR>
<tr>

<td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>

<A HREF="555555.html"><b>555555</b></A>
</td>


</TR>

<TR><TD></TD>

</tr></table>

Pomoże ktoś?
MajareQ
Skoro robisz <a...> na sam tekst to masz link tylko do tekstu...

zamiast:
  1. <td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'>
  2.  
  3. <A HREF="index.html"><b>Strona główna</b></A>
  4. </td>


zrób cosik taki:

  1. <A HREF="index.html"><td bgcolor=#5bc9fc HEIGHT=30 style="cursor: hand; padding-left:5;" onMouseOver='onColor(this);' onMouseOut='offColor(this)'><b>Strona główna</b></td></A>
marcin0077
tylko tak nie działa właśnie pod mozillą sad.gif
MajareQ
Zainteresuj się CSS'em i divami.
Pod FF na pewno zadziała.
marcin0077
mógłbym prosić o jakąś podpowiedź bo nie mam pojęcia jak przekształcić to na divy
hiszpanespaniol
najszybszym sposobem, aby Twój kod zadziałał jak oczekujesz będzie dodanie takiego css'a:



  1. td a {display: block; height: 30px}




Prawdopodobnie będzie Ci wtedy przeszkadzać, że tekst menu nie jest wysrodkowany w "guziku", więc dopisz do poprzedniego:



  1. padding-left: 10px;
  2.  
  3. padding-top: 10px;




manipulując paddingiem pamiętaj o odpowiednim zmniejszeniu wysokości (o taką sama ilość pikseli).



co do 1szej rady którą dostałeś od ~MajareQ: nie wolno obejmowac komórek tabeli znacznikiem "a", to kompletnie złe rozwiązanie i niezgodne z żadnym standardem. Co do drugiej rady, to popieram, zainteresuj sie css.



Poza tym nie próbuj od razu tworzyć tego menu na div'ach, bo to takie samo prawie podejście jak z obejmowaniem komórek odnośnikiem.

Menu jest swego rodzaju LISTĄ dostępnych stron, więc stosuje sie do niego.... listy html, nie div'y

Listę można ostylować dokładnie tak jak div'y.

Generalnie twórz stronę z wyłączonymi stylami i pisz zgodnie z przeznaczeniem znaczników i tekstu (nagłówki to H1, H2 itd; menu to lista, treść to paragrafy).



~MajareQ - jezeli już dawac rady, to prawidłowe

powód edycji: poprawa literówki
MajareQ
Hiszpanku, skoro już tak ujmujesz sprawę to argumentuj swoje twierdzenia.

hiszpan@down: coś nie do końca mówisz prawdę...
marcin0077
ten sposób nie jest do końca dobry ponieważ mam nie tylko w menu <td> i mi rozwala inne tabele ;/
hiszpanespaniol
jeżeli ten css działa też na inne tabele, to zidentyfikuj jakoś tą konkretną tabelę albo odnośniki w niej. Możesz np. nadać im klasę css, albo całej tabeli menu identyfikator dać i później jego nazwą poprzedzić definicję css. Sposób jest dobry, ale podkreślam, że to jest najszybszy (nie najlepszy) sposób, żeby Ci zadziałało jak chcesz.

Majareq: oto moja argumentacja (a raczej w3c):

Cytat
# document type does not allow element "A" here; missing one of "TH", "TD" start-tag .

<a href="#"><td>komórka</td></a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
# Error Line 16, Column 15: document type does not allow element "TD" here .

<a href="#"><td>komórka</td></a>

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).


test zrobiłem dla 4.01 TRANSITIONAL


Pomijając wyniki z walidatora, mogą podać jeszcze takie argumenty:

- tabela służy do wyświetlania danych tabelarycznych (trochę już oklepany tekst, ale słuszny)

- odnośnikiem powinien być tekst lub obrazek, jak logika wskazuje, a nie komórka tabeli. Komórka będąca odnośnikiem jest jak.... laptop którym bijesz brawo komuś zamykając go i otwierając.

- nie powinieneś komuś takich rzeczy radzić, bo jesli tak się nauczy i kiedyś gdzieś da podobny kod i ktoś go wyśmieje, to powie "na forum php tak mi poradzili i to był ktoś kto ma dużo "pomógł"



Czy to jest wystarczająca argumentacja?
marcin0077
hehehe bez kłótni chłopacy haha.gif
stworzyłem osobną klasę i działa
może komuś się przyda:

.css

Kod
a.menu:link {
display:block;

width:160px;

height:20px;
}
a.menu:visited {
display:block;

width:160px;

height:20px;
}
a.menu:hover {
display:block;

width:160px;

height:20px;
}
a.menu:active {
display:block;

width:160px;

height:20px;

}


link:

Kod
<a class="menu" HREF="index.html"><b>Strona Główna</b></A>
hiszpanespaniol
prościej będzie tak:



  1. a.menu {
  2.  
  3. display: block;
  4.  
  5. width: 160px;
  6.  
  7. height: 20px;
  8.  
  9. }


lub jeśli wolisz, to tak: 

  1. a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {display: block;
  2.  
  3. width: 160px;
  4.  
  5. height: 20px;
  6.  
  7. }


nie ma potrzeby mnożenia tego samego kodu
marcin0077
okej dzięki ;]
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.