Autor Zpráva
Suta
Profil
Potřeboval bych poradit, jak sestrojit funkční kód pro tento stav:

1. Mám absolutně pozicovaný seznam <ul>.

2. V něm položky <li>, které vytváří vertikální menu (tj. položky menu jsou pod sebou).

3. Neznám šířku seznamu <ul> (resp. můžu definovat minimální šířku min-width, to ale nefunguje v IE do verze 7).

4. Položky <li> mají různou šířku (v závislosti na délce textu uvnitř).

5. Pozadí všech položek <li> má být stejně široké, tj. přes celou šířku seznamu <ul> (tedy tak široké, jako nejdelší položka seznamu).

------------------------------------------------------------------------------------

<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; height: 22px; color: green; }
a:hover { background: url('img/menu_submenu_a_hover_middle.png') 0 0 repeat-x; }
ul {
  list-style-type: none;
  position: absolute; left: 20px; top: 20px;
  border: 1px solid #A0A0A0;
  background-color: #F0F0F0;
  padding: 3px;
  white-space: nowrap;
  _width: 1px; /* kvuli IE 5.5 a 6, jinak polozky li roztahne pres celou stranku */
}

a {display: block; width: 100%; }
</style>

<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2 - delší</a></li>
  <li><a href="#">Menu 3 - nejdelší položka</a></li>
</ul>

------------------------------------------------------------------------------------



------------------------------------------------------------------------------------

Ukázka problému (chybné zobrazení uvidíte pouze, otevřete-li odkaz v Internet Exploreru 7 či 6)

Budu velmi vděčný za pomoc, s koncepcí celého menu, které je daleko složitější než tento příklad se trápím už deset dnů.

Ještě zopakuji, čeho chci dosáhnout: správného zobrazení pozadí položek menu <li> přes celou šířku menu <ul>, ve všech prohlížečích, přičemž neznám předem šířku menu.
Grr
Profil *
Nebylo by to lepší udělat to přes
a {}
a:hover{}
??
Suta
Profil
Grr
Nepochopil jsem správně otázku. Copak nepoužívám odkazy, jež mají nastaveno pozadí? Máš na mysli zrušení seznamu <ul> a ponechání menu vytvořeného pomocí "holých" odkazů tak, že se beze stylů zobrazí vedle sebe?

Takovéto řešení bohužel není přípustné, jelikož se nejedná pouze o vertikální jednoúrovňové menu (jak by mohlo z obrázku a odkazu vyznívat), ale o vysouvací horizontální menu (tedy položky menu jsou vedle sebe a pod nimi se při najetí zobrazují další submenu, která mohou mít další submenu atd...). Takže od struktury menu za pomoci seznamu nechci ustupovat.

Jelikož zde bylo téma týden bez první odpovědi, usuzuji z toho, že řešení - pro konkrétní příklad výše - neexistuje.
Bubák
Profil
Najivně jsem si myslel, že pomůže tohle (pozadí jsem přidal jen kvůli zviditelnění):
li {width: 100%; background: lime;}

Též jsem zkoušel, zda nezabere haslayout, a taky nic.

Tedy asi nakonec budu muset přikročit k variantě bez položek li.
Je to prasárna, můžeš ji použít jen pro "neposlušné" verze IE zozlišením pomocí podmíněných komentářů.
habendorf
Profil
<!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" lang="cs">
	<head>
		<meta http-equiv="Content-Type" content="text/html;	charset=utf-8" />
		<meta http-equiv="Content-Language" content="cs" />
		<title> Menu
		</title>
	</head>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul {
	position: absolute;
	left: 20px;
	top: 20px;
	border: 1px solid #a0a0a0;
	padding: 3px;
	background: #f0f0f0;
	white-space: nowrap;
}
a {
	display: block;
	text-decoration: none;
	color: green;
	padding: 2px 5px;
}
a:hover {
	background: blue;
}
	</style>
<!--[if lte IE 6]>
<style type="text/css">
a {
	width:1px;
}
</style>
<![endif]-->
	</head>
	<body>
		<ul>
			<li>
			<a href="#">Menu 1</a></li>
			<li>
			<a href="#">Menu 2 - delší</a></li>
			<li>
			<a href="#">Menu 3 - nejdelší položka</a></li>
		</ul>
	</body>
</html>


V IE6 to nefunguje, ale aspoň se to nerozpadá.

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: