Do stron mojej witryny
http://szmitek.unl.pl dodawany jest na początku kod reklamowy:
KOD
<div style='position: static'><script type='text/javascript' src='http://unl.pl/reklamy.js'></script></div>
Powoduje to, że kod:
KOD
<?xml version="1.0" encoding="iso-8859-2" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
nie jest na początku i przeglądarki wyświetlają strony w trybie wstecznej zgodności. Powoduje to, że we wszystkich przeglądarkach oprócz Internet Explorera i AOL Explorera nie pojawia się odpowiednie podmenu przy najechaniu myszką na odpowiedni przycisk na menu. Np.: po najechaniu na "Kontakt" powinien się pojawić pasek poniżej z przyciskami "Kontakt" i "Społeczności".
Kod XHTML menu:
KOD
<div class="Nav">
<div class="NavContainer">
<ul class="current">
<li>
<a href='http://szmitek.unl.pl/index.php?lang=pl' title='Przejdź na stronę główną'>
<strong>Strona główna</strong></a></li>
</ul><ul class='select'>
<li>
<a href='http://szmitek.unl.pl/Contact/index.php?lang=pl' title='Zobacz jak się ze mną skontaktować'>
<strong>Kontakt</strong></a><div class='select_sub'><ul class="sub">
<li><a href='http://szmitek.unl.pl/Contact/index.php?lang=pl' title='Zobacz jak się ze mną skontaktować'>Kontakt</a></li><li><a href='http://szmitek.unl.pl/Contact/Communities.php?lang=pl' title='Zobacz listę społeczności, w których jestem zarejestrowany'>Społeczności</a></li></ul>
</div>
</li>
</ul><ul class='select'>
<li>
<a href='http://szmitek.unl.pl/Downloads/index.php?lang=pl' title='Zobacz pliki do pobrania'>
<strong>Do pobrania</strong></a><div class='select_sub'><ul class="sub">
<li><a href='http://szmitek.unl.pl/Downloads/index.php?lang=pl' title='Zobacz pliki do pobrania'>Do pobrania</a></li><li><a href='http://szmitek.unl.pl/Downloads/Analysis.php?lang=pl' title='Zobacz kolokwia i egzaminy z przedmiotów na Wydziale Elektroniki i Technik Informacyjnych Politechniki Warszawskiej dotyczących analizy matematycznej'>Analiza</a></li></ul>
</div>
</li>
</ul></div>
</div>
Kod CSS menu:
KOD
.Nav {
height: 35px;
background: url(button1.gif) repeat-x;
position: relative;
(...)
width: 899px;
z-index: 500;
text-align: center;
float: left;
margin-bottom: 40px;
margin-top: 0;
}
.Nav .NavContainer {
display: table;
margin: 0 auto;
}
.Nav .select, .Nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
height: 35px;
}
.Nav li {
margin: 0;
padding: 0;
height: auto;
float: left;
}
.Nav ul {
display: inline-block;
}
.Nav ul {
display: inline;
}
.Nav ul li {
float: left;
display: inline;
height: 35px;
line-height: 35px !important;
}
.Nav .select a {
display: inline-block;
height: 35px !important;
min-height: 35px;
float: left;
background: url(button1.gif);
padding: 0 30px 0 30px;
text-decoration: none;
line-height: 35px;
white-space: nowrap;
(...)
}
.Nav .current a {
display: inline-block;
min-height: 35px;
height: 35px;
float: left;
background: url(button3.gif);
padding: 0 0 0 15px;
text-decoration: none;
line-height: 35px;
white-space: nowrap;
(...)
}
.Nav .current a strong {
display: inline-block;
padding: 0 30px 0 15px;
(...)
line-height: 35px;
height: 35px;
}
.Nav .select a:hover, .Nav .select li:hover a {
background: url(button4.gif);
padding: 0 0 0 15px;
(...)
}
.Nav .select a:hover strong, .Nav .select li:hover a strong {
display: block;
float: left;
padding: 0 30px 0 15px;
(...)
}
.Nav .select_sub {
display: none;
(...)
clear: both;
width: 100%;
visibility: hidden;
}
.Nav .sub {
display: table;
margin: 0 auto;
padding: 0;
list-style: none;
(...)
text-align: center;
clear: both;
}
.Nav .select :hover .select_sub, .Nav .current .show {
display: block;
position: absolute;
visibility: visible;
width: 100%;
top: 35px;
background: url(back_0.gif);
padding: 0;
z-index: 100;
left: 0;
text-align: center;
margin-bottom: 40px;
background-image: url('back_0.gif');
clear: both;
height: 35px;
}
.Nav .current .show {
z-index: 10;
float: left;
}
.Nav .select :hover .sub li a, .Nav .current .show .sub li a {
display: block;
float: left;
background: transparent;
padding: 0 10px 0 10px;
margin: 0;
white-space: nowrap;
border: 0;
(...)
}
(...)
.Nav .select :hover .sub li a:hover, .Nav .current .sub li a:hover {
visibility: visible;
(...)
}
Czy jest możliwość wymuszenia trybu standardów w przeglądarkach, jeśli deklaracje XML i DOCTYPE znajdują się
nie na początku strony?
Co zrobić, aby po najeżdżaniu na przyciski mojego menu (ul.select) pojawiał się poniżej pasek podmenu dla danego przycisku (div.select_sub) we wszystkich przeglądarkach tak jak w IE i AOL Explolerze, np. po na najechaniu na przycisk "Kontakt" pojawił się poniżej pasek z przyciskami "Kontakt" i "Społeczności"?
Forum wielotematyczne grafikarto.pl - forum dla ludzi z pasją! » Web Design, Web Development, Informatyka, Fotografia » Webmaster » Kodowanie
Tryb wstecznej zgodności i menu, Problem z działaniem menu typu "dropline" w trybie wstecznej z
31 Aug 2009, 00:24
