Forum PHP.pl > [html] problem z menu opartym na divach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html] problem z menu opartym na divach

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

tomkoz11

1.03.2007, 10:02:24

Mam następujący problem - nie wiem jak przerobić menu, aby to było uznawane za zgodne ze standardami przez walidator w3c.
Wiem o co chodzi - że div jako element blokowy, nie może znajdować się w <a></a>, tyle że nie mam pomysłu jak to przerobić by było wszystko ok w walidatorze. O usunięciu divów nie ma co rozmawiać bo one są niezbędne, gdyż wykorzystuję je do uzyskania efektu podświetlenia onmouseover, a jeżeli <a> umieściłbym już w divach to trzeba by się było napracować, żeby w ogóle trafić w link. ;/ Mój Doctype to HTML 4.01 Strict

Przykładowy link w menu wygląda tak:

[HTML] pobierz, plaintext 
<a href="index.htm"><div class="link_menu">STRONA GŁÓWNA</div></a>
[HTML] pobierz, plaintext

Komunikaty które zwraca walidator:

Cytat

document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

Cytat

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>").

gekon

1.03.2007, 10:14:26

Na przykład tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <title>Menu</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  #menu { list-style: none; }
  #menu li { float: left; }
  #menu li  a { padding: 0.5em; background-color: #F00; }  
  </style>
</head>
<body>
	<ul id="menu">
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Inna strona</a></li>
	</ul>	
</body>
</html>
[HTML] pobierz, plaintext

Oglądnij też Listamatic.

kwiateusz

1.03.2007, 10:28:36

a może zwyczajnie zamień div na span? elementy liniowe mogą się zawierać w sobie...

babejsza

2.03.2007, 17:21:50

To nie dobrze bo powinny wyglądać tak jak to już napisał Ci @gekon.

Linki w menu są niczym innym jak listą nieuporządkowaną, a skoro tak to należy je przypisać do odpowiednich znaczników.

E -dd

2.03.2007, 17:54:15

Kod

W takiej kolejności powinno być

envp

2.03.2007, 19:25:31

Myślę, że to co napisał @gekon jesy najbardziej sensowne, sprawdzone i poprawne...

tomkoz11

4.03.2007, 09:52:21

Wydaję mi się, że nie do końca zrozumieliście mój problem. Ten kod CSS powinien wyjaśnić o co mi dokładnie chodziło :

[HTML] pobierz, plaintext 
<a href="index.htm"><span class="link_menu">STRONA GŁÓWNA</span></a>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
.link_menu
{
    display: block;
    background-image: url(gfx/menu1.png);
    width: 149px;
    height: 25px;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: medium;
    color: #000000;
    text-align: center;
    border-style: none;
}
.link_menu:hover
{
    display: block;
    background-image: url(gfx/menu2.png);
    width: 149px;
    height: 25px;
    vertical-align: top;
    font-family: sans-serif;
    font-size: medium;
    color: #000000;
    text-align: center;
    border-style: none;
    text-decoration: none;
}
[HTML] pobierz, plaintext

Problem został już rozwiązany, więc temat może w mojej opinii zostać zamknięty.

gekon

4.03.2007, 12:53:48

Nie, my bardzo dobrze zrozumieliśmy Twój problem

To Ty nie zrozumiałeś naszych wskazówek

Ale praktyka przychodzi z czasem.

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.