Autor Zpráva
Scrash
Profil
Zdar lidi, jsem fakt dost nasrany, jelikoz resim pres 3 hodiny jedno ******* horizontalni CSS menu, vubec to uz nechapu !!!
Kdyz je vse pouze v html, tak to funguje jak ma, ale kdyz to delam v php, tak se mi nechce rozbalit...
Tu je to menu k downloadu: http://www.cssmenumaker.com/builder/menu_info.php?menu=065

v html to mam jako jeden jediny soubor a funguje to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS Menu Maker</title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>

<div>
<ul class="menu">
    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

    <li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
        <ul class="sub">
            <li><a href="#">Sample Menu This is some longer text</a></li>            
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>

        </ul>
    </li>
    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
        <ul class="sub">
            <li><a href="#">Sample Menu This is some longer text</a></li>            
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>
        </ul>
    </li>
    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
</div>

</body>

</html>



V PHP to mam takto rozdelene:
header.php - <link rel='stylesheet' href='menu_style.css' type='text/css' />
menu.php - tu mam to samostatne menu

a soubor home.php, kde je pomoci to require_once vse nacitano
kdyz na to najedu mysi, tak to vse funguje, ale nevyroluje se mi to submenu :-((((, velice vas prosim o radu

Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
Moderátor Chamurappi: Titulek „Problém s horizontal css menu - UZ NEJDE ANI NADAVAT“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší.
shaggy
Profil
Scrash:
Kdyz je vse pouze v html, tak to funguje jak ma, ale kdyz to delam v php, tak se mi nechce rozbalit...
Z toho vyplýva, že menu je v poriadku, chyba je v tvojich skriptoch.
Riešenie je jednoduché - porovnaj si kód pôvodnej (funkčnej) HTML stránky, porovnaj si kód výstupu ktorý vygenerovalo PHP a nájdeš chybu.
Scrash
Profil
To jsem také zkoušel, procházel jsem písmenko po písmenku, ale buď jsem slepý, nebo je to něčím, o čem nevím, že to ruší.. :-(
Nic mě už nenapadá, je divné, že se to menu nechce rozbalit, ale vše jiné u něj funguje.. tzn. že se načítají jen některé části z toho css souboru.. ale to je blbost :-D
shaggy
Profil
Scrash:
Odkaz na živú ukážku - a poprosím ukážku html stránky aj tej generovanej pomocou php, inak ti nevieme poradiť.
Scrash
Profil
Oka, tu davam link na moje stranky: NEFUNKČNÍ - PHP
Tu je link na funkční příklad: FUNKCNI - HTML

HEADER.PHP
<?php
header("Content-Type: text/html; charset=UTF-8");

require_once "maincore.php";

echo "<html>";
echo "<head>";
echo "<link rel='stylesheet' href='menu_style.css' type='text/css' />";
echo "<title>";
echo "OKOLOS";
echo "</title>";
echo "</head>";
echo "<body bgcolor='grey'>";

echo "<center><table width='1000px' cellpadding='0' cellspacing='0' align='top' border='0'>";
echo "<tr><td>";

if($data['fusion_header'] != ""){
	echo "<center><img src='".IMAGES."".$data['fusion_header']."'></center>";
}else{
	echo "<center><img src='".IMAGES."noheader.png'></center>";
}

echo "</td></tr>";
echo "</table></center>";

require_once "menu.php";
?>



HOME.PHP
<?php
require_once "maincore.php";
require_once "header.php";

echo "<center><table width='1000px' cellpadding='0' cellspacing='0' border='1'>";
echo "<tr><td width='800'>";

echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";
echo "asfasasgasgasgasgasgasgasg<br />";



echo "</td><td width='200'>";

require_once "partneri.php";

echo "</td></tr>";
echo "</table></center>";


require_once "footer.php";
?>



MENU.PHP
<?php

echo '

<div>
<ul class="menu">
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

	<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
		<ul class="sub">
			<li><a href="#">Sample Menu This is some longer text</a></li>			
			<li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>

		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
		<ul class="sub">
			<li><a href="#">Sample Menu This is some longer text</a></li>			
            <li><a href="#">Sample Menu</a></li>
            <li><a href="#">Sample Menu</a></li>

            <li><a href="#">Sample Menu</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
	<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
</div>

';

?>



menu_styles.css
.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
Bubák
Profil
Netuším proč ale to menu nefunguje ve qirku, ale jenom ve standardním vykreslovacím režimu. Pokud se tak chová IE, tak je problém se souborem csshover.htc nebo obdobným, ale takto se chovají všechny prohlížeče. Proč tomu tak je, je pro mne záhadou.
shaggy
Profil
shaggy:
Riešenie je jednoduché - porovnaj si kód pôvodnej (funkčnej) HTML stránky, porovnaj si kód výstupu ktorý vygenerovalo PHP a nájdeš chybu.

Scrash:
o jsem také zkoušel, procházel jsem písmenko po písmenku, ale buď jsem slepý, nebo je to něčím, o čem nevím, že to ruší..

Nemôžem si pomôcť, ale keď si prejdem tie dve stránky, tak nie sú rovnaké. Prechádzal som ich písmenko po písmenku už od prvého znaku a hneď som našiel rozdiel. Ty nie? Skús si do tej pôvodnej stránky najprv podopĺňať všetko čo potrebuješ (vždy si skúšaj, či to funguje) a ak to bude fungovať, tak to "prenes" do tvojich php súborov, ale v pomere 1:1!
Bubák
Profil
V CSS zaměň všechny výskyty " :hover" za " li:hover" (pozor, na začátku je mezera!), příklad:
původní část kódu:
.menu :hover ul :hover ul :hover ul :hover ul :hover ul

kód po úpravě:
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul

Pak ti bude nenu fungovat i ve quirku.
Zajímavé, že se všechny prohlížeče, vyjma IE, který ve qurku umí jen hover odkazů, chovají stejně.
Plaváček
Profil
Bubák:

To jsem už zkoušel (odstranit mezery, protože chyba je zjevně v CSS), ale stejně se to chová prapodivně. Doporučil bych tazateli zkusit jinou metodu "CSS hover menu" (viz strejda Google třeba). Nicméně, je to zajímavý problém, jak bude čas, jestli bude, tak to provětrám :)
Chamurappi
Profil
Reaguji na Plaváčka:
odstranit mezery
Nejde o odstranění mezer, ale o přidání názvu elementu (v tomto případě li). Pokud vím, tak v quirku Mozilly (a asi i dalších prohlížečů) nefunguje obecný :hover bez uvedení názvu elementu, protože kdysi dávno vzniklo pár webů, jejichž tvůrci s ohledem na jedinou existující implementaci :hoveru předpokládali, že jediný element, u něhož má :hover fungovat, je odkaz, a proto ho ve svých stylech explicitně neuváděli. Autoři Mozilly se tedy rozhodli, že budou v quirku raději ignorovat zápisy typu :hover { color: red }, než aby přebarvovali všechno.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0