Autor Zpráva
KristaX
Profil *
Poradil by někdo konkrétně, jak nastavit šířku horizontálního menu aby se zobrazovalo ve všech prohlížečích stejně? Nějak se mi to nedaří nastavit.
Ještě jeden dotaz, jde nějak (jak) nastavit aby se mi menu automaticky přizpůsobilo do šířky podle počtu odkazů a nezalomilo se mi na další řádek? Moc díky, zatím se učím a trénuji.
Kód mám takto:
ul#mainMenu {margin:auto;}				 
ul#mainMenu, ul { 
    color:000000;
		padding:0;border:0px;
		margin-left:0px;
		list-style-type:none;width: 772px
	}
	ul#mainMenu ul {
		margin-top:6px;border: 1px solid green;margin-left:-1px;
}
	
	ul#mainMenu li {
		float:left;padding:6px 0px;
		width:19.7%;border: 1px solid fuchsia	
	}
	
	ul#mainMenu a {
	  color:black;text-align: center;
		background-color:yellow;	
		display:block;
                text-decoration:none;
		font-weight:bold;width:16.0%px;
	}
	
	ul#mainMenu ul a {
	 background-color:yellow;
}
	ul#mainMenu ul a:hover {
	  color:blue;
          text-align: right;
          border: 1px solid black;
          background-color:blue;	
	}
	
	ul#mainMenu ul {
		position:absolute;
		visibility:hidden;
		background-color:silver;
	}
	
	ul#mainMenu li:hover ul, ul#mainMenu li.hover ul{
		visibility:visible;
	}
	
	ul#mainMenu li li {
		float:none;
		border:none;
		padding:0;
	}
		
	ul#mainMenu li {
		behavior: url(hover.htc); /* Protože IE nedodržuje CSS standarty, aby bylo řešení funkční, použijeme tento *.htc soubor */
	}
#obsah {
width : 772px;
margin-top : 0px;
text-align : left;
border: 1px solid black;
}
</style>

<div id="obsah">

<table style="text-align: left; width: 772px; height: 70px;" border="0" cellpadding="0" cellspacing="0">

<tbody>

<tr>


      <td>
<ul id="mainMenu">
  <li><a href="#">Hlavní odkaz 1</a>
	   <ul>
	    <li><a href="#">Pododkaz 11</a></li>
			<li><a href="#">Pododkaz 12</a></li>
			<li><a href="#">Pododkaz 13</a></li>
	  </ul>

	</li>
	
	 <li><a href="#">Hlavní odkaz 2</a>
	   <ul>
	    <li><a href="#">Pododkaz 21</a></li>
			<li><a href="#">Pododkaz 22</a></li>
			<li><a href="#">Pododkaz 23</a></li>
	  </ul>

	</li>
	
	 <li><a href="#">Hlavní odkaz 3</a>
	   <ul>
	    <li><a href="#">Pododkaz 31</a></li>
			<li><a href="#">Pododkaz 32</a></li>
			<li><a href="#">Pododkaz 33</a></li>
	  </ul>

	</li>
	
	 <li><a href="#">Hlavní odkaz 4</a>
	   <ul>
	    <li><a href="#">Pododkaz 41</a></li>
			<li><a href="#">Pododkaz 42</a></li>
			<li><a href="#">Pododkaz 43</a></li>
	  </ul>

	</li>
	
	 <li><a href="#">Hlavní odkaz 5</a>
	   <ul>
	    <li><a href="#">Pododkaz 51</a></li>
			<li><a href="#">Pododkaz 52</a></li>
			<li><a href="#">Pododkaz 53</a></li>
	  </ul>

	</li>
	
	</ul>
      
  </td>

 </tr>

</tbody>
</table>

</div>
Bubák
Profil
Vybodnul bych se na tabulku, sjednotil boxmodel a spočítal bych si rozměry.
KristaX
Profil *
Trošku jednodušeji prosím, chápu správně nedávat to do tabulky ale do nějakého divu?
Měsíček
Profil
ano
KristaX
Profil *
Ani tak mi to nejde, v mozille je to ok, ale v exploreru mám vpravo mezeru. Když nastavím větší šířku tak už se mi to v mozille nevejde vedle sebe.
Bubák
Profil
Hlavně musíš sjednotit boxmodel. Máš zhruba tři možnosti.

1. Matrjoška, nejčistší řešení, ale pro začátečníky komplikované

2. použít DTD, která IE dá do standardního režimu, třeba:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3. ponechat IE ve quirku (kompatibilní režim) a do CSS přidat:
* {-moz-box-sizing: border-box; box-sizing: border-box;}
KristaX
Profil *
Moc díky, ale nějak se mi nedaří :-( Jak přesně upravit kód co jsem napsala aby se mi zobrazilo menu zarovnané stejně i v IE?
DTD na stránkách používám:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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