Autor Zpráva
klasounek
Profil
#1 · Zasláno: 15. 3. 2006, 17:22:47
Odpovědět Citovat
Chtěl bych se optat, zda je možné obsah - jednotlivé položky menu vycentrovat na střed modrého rámečku UL.MENU, nebo aby byly jednotlivé položky rozmístěné po celé šířce UL.MENU?

www 



<style type="text/css">

   a { font-weight:bold; text-decoration:none; color: blue; }

   a:hover { text-decoration:none; color: white;}   

   ul.menu { width: 550px; height:1.2em; list-style-type:none; padding:0;     margin:0; background:white; border:1px solid blue; }

   ul.menu li { float: left; display:block; border-right:0px solid blue; }

   ul.menu li a { display:block; color:#blue; padding:0 1.5em 0 1.5em; }

   ul.menu li a:hover { color:#blue; background: blue; }

</style>

<title>Horizontálne menu</title>

</head>



<body>





   <ul class='menu'>

    <li><a href='a.html'>web</a></li>

    <li><a href='a.html'>obrázky</a></li>

    <li><a href='a.html'>skupiny</a></li>

    <li><a href='a.html'>katalog</a></li>

   </ul>

</body>


Díky
INSiGHT
Profil
#2 · Zasláno: 15. 3. 2006, 20:53:13 · Upravil/a: INSiGHT
Odpovědět Citovat
Asi by bylo vhodnější, jako rámeček použít div a v něm teprve centrovat menu pomocí text-align: center;.
Tak jako na http://css.maxdesign.com.au/listamatic/horizontal16.htm
klasounek
Profil
#3 · Zasláno: 15. 3. 2006, 23:37:35
Odpovědět Citovat
Jo, udělal jsem si to sám, ale bere mi to jen IE, FFx ne. Koukal jsem i na ten příklad, ale tam je taková zváštní mezera na levé straně každého aktivního ahover podbarvení...
Chamurappi
Profil
#4 · Zasláno: 15. 3. 2006, 23:43:02 · Upravil/a: Chamurappi
Odpovědět Citovat
Reaguji na klasounka:
Zkus toto:
<style>

a { font-weight: bold; text-decoration: none; }

menu { padding: 0; margin: 0; background: white; line-height: 1.5em; border: 1px solid blue; text-align:center }

menu li { display: inline; }

menu li a { color: blue; padding: 0 1.5em; }

menu li a:hover { color: white; background: blue; }

</style>

<menu>

  <li><a href="a.html">web</a>

  <li><a href="a.html">obrázky</a>

  <li><a href="a.html">skupiny</a>

  <li><a href="a.html">katalog</a>

</menu>
klasounek
Profil
#5 · Zasláno: 16. 3. 2006, 00:09:20
Odpovědět Citovat
To vypadá dobře, ale já bych si ještě představoval mezi jednotlivé li vložit čárky, aby to vypadalo, že každá položka je ve své buňce. Např pomocí border-left: 1px solid. Pak už to nesedí...jde mi o to rozdělit to ještě do těch "jakoby" buněk.
INSiGHT
Profil
#6 · Zasláno: 16. 3. 2006, 07:53:31 · Upravil/a: INSiGHT
Odpovědět Citovat
Tady je komplet řešení http://css.maxdesign.com.au/listamatic/horizontal31.htm

Stačí trochu hledat a jít o pár stránek dál;-)
klasounek
Profil
#7 · Zasláno: 16. 3. 2006, 11:06:39
Odpovědět Citovat
Nevím jak je to v tomto příkladu, ale ja to už vyřešil takto: 



 <style type="text/css">

   a { font-weight:bold; text-decoration:none; color: blue; }

   a:hover { text-decoration:none; color: white;}   

   ul.menu {  width: 730px; height: 40px; list-style-type:none; padding:0px; margin:0px; background:white; border:1px solid blue; border-right:0px solid blue; }

   ul.menu li { clear:right; float: left; display:block;   width:20%; text-align:center;}

   ul.menu li a { position:relative; display:block; color:blue; padding:10px 10px 10px 10px; border-right:1px solid blue;}

   ul.menu li a:hover { color:white; background: blue; }

   body {font-family: arial;}	  

</style>
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0