Diskuze: Menu

HTML a CSS HTML a CSS Menu American English version English version

Avatar
KiRoS
Člen
Avatar
KiRoS:

Ahoj

Zdravím všechny pomocníky a doufám že mi někdo pomůže. Tvořím sestře webové stránky a potřeboval bych vycentrovat druhý řádek menu - stránky http://coursinglovcistrapce.cz/ Celý druhý řádek menu je na levé straně a já bych ho potřeboval vycentrovat aby byl uprostřed. Koukal jsem na google atd.. ale nenašel jsem to. Moc prosím o radu. Pokud budete něco potřebovat pro radu klidně dodám. Moc díky

Odpovědět 18.7.2013 12:48
Programování a informační technologie má budoucnost.
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

nemáš ukončený jeden seznam v menu. Chybí ti tam </li>.

Nahoru Odpovědět 18.7.2013 13:19
Čím víc vím, tím víc věcí nevím.
Avatar
KiRoS
Člen
Avatar
KiRoS:

Všechny jsou zakončené </li> kromě kolonek kde je vysouvací menu.

Nahoru Odpovědět 18.7.2013 13:39
Programování a informační technologie má budoucnost.
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

když myslíš...

<nav>
        <ul class="sf-menu" id="nav">
          <li><a href="blog.php">NOVINKY</a></li>
          <li><a href="treninky.php">TRÉNINKY</a> // tenhle ukončen není...
          <ul>
              <li><a href="treninky.php">Přihlášení na trénink</a></li>
              <li><a href="pravidla.php">Pravidla tréninků</a></li>
              <li><a href="cenik.php">Ceník</a></li>
              <li><a href="kdetrenujeme.php">Kde trénujeme</a></li>
            </ul>
            <li><a href="vice.php">VÍCE O COURSINGU</a>
            <ul>
              <li><a href="cojeto.php">Co je to coursing?</a></li>
              <li><a href="otazky.php">Nejčastější otázky</a></li>
              <li><a href="rady.php">Coursingové řády</a></li>
              <li><a href="licence.php">Licence</a></li>
            </ul>
            <li><a href="uspechy.php">ÚSPĚCHY</a></li>
            <li><a href="behaji.php">BĚHÁJÍ U NÁS</a></li>
            <li><a href="toplovec.php">TOP LOVEC STŘAPCE</a></li>
            <li><a href="foto.php">FOTOGALERIE</a></li>
            <li><a href="video.php">VIDEOGALERIE</a></li>
            <li><a href="kalendar.php">ZÁVODNÍ KALENDÁŘ 2013</a></li>
            <li><a href="odkazy.php">ODKAZY</a></li>
           </li>
        </ul>
Editováno 18.7.2013 14:02
Nahoru Odpovědět 18.7.2013 14:01
Čím víc vím, tím víc věcí nevím.
Avatar
KiRoS
Člen
Avatar
KiRoS:

No ano ale to je na vysouvací menu když to tam dám to to menu nebude vysouvat. Teď to na indexu je a menu pro tréninky to nevysouvá.

Nahoru Odpovědět 18.7.2013 14:09
Programování a informační technologie má budoucnost.
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

A jaký k tomu máš důvod, že nejsou ukončené </li> ? :)

tak hele, trochu sem se v tom vrtal a povedlo se mi to zarovnat na střed:

ul.sf-menu * {

width: 950px; /* Jako je šířka layoutu
text-align: center;

}

 
Nahoru Odpovědět  +1 18.7.2013 14:14
Avatar
KiRoS
Člen
Avatar
KiRoS:

Je tp možné, že to zarovná ale koukni na výslednou verzi.

Nahoru Odpovědět 18.7.2013 14:25
Programování a informační technologie má budoucnost.
Avatar
Kit
Redaktor
Avatar
Kit:

Musíš to li ukončit za tím vysouvacím menu.

Nahoru Odpovědět 18.7.2013 14:31
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na KiRoS
David Hynek:
<li><a href="vice.php">VÍCE O COURSINGU</a>
            <ul>
              <li><a href="cojeto.php">Co je to coursing?</a></li>
              <li><a href="otazky.php">Nejčastější otázky</a></li>
              <li><a href="rady.php">Coursingové řády</a></li>
              <li><a href="licence.php">Licence</a></li>
            </ul>
// sem zkus vrazit </li>
Nahoru Odpovědět 18.7.2013 14:31
Čím víc vím, tím víc věcí nevím.
Avatar
KiRoS
Člen
Avatar
KiRoS:

Myslím, že je to hezčí než to co tam bylo. Já se v tom budu ještě vrtat třeba na to příjdu.

Nahoru Odpovědět 18.7.2013 14:31
Programování a informační technologie má budoucnost.
Avatar
KiRoS
Člen
Avatar
KiRoS:

</li> za koncem vysouvacího menu je ale žádnou změnu nevidim. Podle mě to musí být nastavený v CSS

Nahoru Odpovědět 18.7.2013 14:34
Programování a informační technologie má budoucnost.
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

Já vim takhle je to špatně, musel jsem se v tom pohrabat víc.

ul.sf-menu li

  • žádný float, nedávat do bloku

do ul.sf-menu * { přidat ještě display: inline

to by myslím mělo řešit vycentrování ( pokud jsem na něco nezapoměl )
musíš si pak ale dostylovat hover menu

 
Nahoru Odpovědět 18.7.2013 14:34
Avatar
KiRoS
Člen
Avatar
KiRoS:

Tak pro tomasf16:

Tak jsem to tam přidal ale změna žádná abys mohl kouknout přidávám kódy CSS menu
Je možné že tomu centrování tam vadí pozice které mám nastavené na left ??

ul.sf-menu {
width: 950px;
text-align: center;
display: inline;}

ul.sf-menu li {
list-style: none;
float: left;
position: relative;}

ul.sf-menu li:hover {
visibility: inherit; }

ul.sf-menu a {
display: block;
position: relative;}

ul.sf-menu ul {
position: absolute;
left: 0;
width: 150px;
top: auto;
left: -999999px;}

ul.sf-menu ul a {
zoom: 1; }

ul.sf-menu ul li {
float: left; /
width: 150px;}

ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;}

Editováno 18.7.2013 14:44
Nahoru Odpovědět 18.7.2013 14:42
Programování a informační technologie má budoucnost.
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

ul.sf-menu, ul.sf-menu * {
margin: 0;
padding: 0;
display: inline;
width: 950px;
text-align: center;
}

ul#nav li a - float left - smazat
ul.sf-menu li - float left - smazat
ul.sf-menu a - smazat display: block
ul#nav li a - smazat display block inline a float: left

tohle jsou v rychlosti úpravy co jsem udělal a tím se dosáhlo tvého požadovaného vycentrování

 
Nahoru Odpovědět 18.7.2013 14:46
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

Jak píšeš, zlobí tam to float:left , display: block
zkus to udělat jak jsem psal výše, mělo by se to vycentrovat ... dělal jsem to narychlo a nemám moc čas se v tom víc štourat, zkus si s tím takto pohrát ... ale jak sem psal, bude pak potřeba dostylovat hover menu , ale to by neměl být problém :)

 
Nahoru Odpovědět 18.7.2013 14:49
Avatar
David Hynek
Redaktor
Avatar
David Hynek:
ul.sf-menu ul li {
  float: left; //pryč
  width: 150px;}

ul.sf-menu li {
  display: inline; // přidat
  display: block; //pryč

ul#nav li a {
  font: normal 150% 'News Cycle', sans-serif;
  text-decoration: center;
  outline: none;
  text-align: center;
  z-index: 10;
  display: inline-block;
  float: left; // pryč
  height: 30px;
  padding:5px 14px 6px 15px;
  position: relative;
  overflow: hidden;}
  list-style: none;
  **float: left;** // pryč
  position: relative;
  text-align: center;
  }
Editováno 18.7.2013 14:54
Nahoru Odpovědět 18.7.2013 14:54
Čím víc vím, tím víc věcí nevím.
Avatar
KiRoS
Člen
Avatar
KiRoS:

Moc díky. Je to vycentrované a teď jdu dostylovat to ostatní. Moc díky za rady všem.

Nahoru Odpovědět 18.7.2013 14:55
Programování a informační technologie má budoucnost.
Avatar
martin1pokorny:

Jen pro pořádek, ukončení položky seznamu </li> není povinné. Podmínkou je že musí následovat buď další <li> nebo </ul>. Vede to i k určité přehlednosti.

 
Nahoru Odpovědět 19.7.2013 8:36
Avatar
Odpovídá na martin1pokorny
Michal Žůrek (misaz):

jenomže některé prohlížeče se z toho zblázní, oni to pak zobrazí nějak divně. A nevidím žádný důvod proč ty blbé 4 znaky nenapsat, tam kam jsou zamýšlené.

Nahoru Odpovědět 19.7.2013 8:42
Nesnáším {}, proto se jim vyhýbám.
Avatar
martin1pokorny:

A mohu požádat o příklad takového prohlížeče, protože jsem se zatím s žádným problémem nesetkal.

 
Nahoru Odpovědět 19.7.2013 8:59
Avatar
Odpovídá na martin1pokorny
Michal Žůrek (misaz):

staré IE.

Jinak využij tlačítka odpovědět.

Nahoru Odpovědět 19.7.2013 9:04
Nesnáším {}, proto se jim vyhýbám.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na martin1pokorny
Jiří Gracík:

otevři IE6 a setkáš se úplně se vším :) Budeš rád, když budou mít aspoň nadpisy stejnou barvu :D (samozřejmě u velice jednoduchých webů se to moc neprojeví, ale to se mi snad kromě mého prvního výtvoru ještě nestalo)

Nahoru Odpovědět 19.7.2013 9:41
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Michal Žůrek (misaz)
martin1pokorny:

Tak pokud myslíš starým IE => IE6 tak to bych asi ten problém sklidným svědomím přehlédl. Samozřejmě to nikomu nenutím pokud kodér chce ladit i pro IE6 je to jeho volba, ale myslím, že úsilí neodpovídá počtu uživatelů této verze. Pokud jsou to vyšší verze rád bych to někde dohledal, protože taková informace se hodí každému. A abych odpověděl na otázku proč nepsat 4 znaky navíc. Pokud máš vícenásobně vnořená menu udělaná pomocí seznamu tak tam už to na přehlednosti jde poznat opravdu hodně. To ale samozřejmě platí u ručně psaných kódů narozdíl od generovaných třeba pomocí PHP kde si s tím nikdo nedělá hlavu.

Ať si každý používá co je mu libo, jen je dobré vědět, že tam ta koncová značky být nemusí, ale může.

 
Nahoru Odpovědět 19.7.2013 10:07
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na martin1pokorny
Jiří Gracík:

ostupňuju ti to

IE 10 & 9 - téměř bez speciální péče
IE 8 - občas potřebuje v něčem popostrčit
IE 7 - předělat marginy a paddingy, občas má tendenci všechno rozházet
IE 6 - procházka mordorem ... průhledný PNG -> ne, průhlednost v css-> ne, css position -> ne, css display kromě blocku a inline -> ne, ... nebudu pokračovat, na to by tahle databáze nestačila :D

Pro větší srozumitelnost
IE 10 & 9 - http://goo.gl/6UWNn
IE 8 - http://goo.gl/rv1p2
IE 7 - http://goo.gl/ue2Uw
IE 6 - http://goo.gl/EAlgy

Ale třeba u E-Shopu je to potřeba řešit, teoreticky bys mohl přijít asi o procento zákazníků :P to by třeba při obratu 100.000 stálo za zvážení ;)

Editováno 19.7.2013 10:28
Nahoru Odpovědět 19.7.2013 10:27
Creating websites is awesome till you see the result in another browser ...
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

IE 6,7 jsou v dnešní době naprosto mrtvý prohlížeče. Není potřeba mořit se pro ně s optimalizací webu. Já například pracuju v jedný IT společnosti co vyrábí weby (webovky, eshopy, realitky) a tam jsme přestaly IE 7) úplně podporovat před víc jak rokem.

Je to jednoduchý, chceš moderně vyhlížející web, podporující nejnovější technologie, tak musíš mít taky zařízení schopné s nimi pracovat.

Je to jako s PC hrama, taky na 10 let starý mašině nerozjedeš nejnovější hry. Vážně nevidím důvod v dnešní době ( kdy i na starý PC s XP nasázíš aspon IE 8 ) podporovat x let zastaralý prohlížeče :)

Editováno 19.7.2013 20:58
 
Nahoru Odpovědět 19.7.2013 20:58
Avatar
Odpovídá na tomasf16
Michal Žůrek (misaz):

jenomže to nejsou hry, které si musíš kupovat. To je internet který je dostupný zdarma každému, tedy i uživatelům IE6.

Nahoru Odpovědět  +1 19.7.2013 21:06
Nesnáším {}, proto se jim vyhýbám.
Avatar
tomasf16
Redaktor
Avatar
tomasf16:

ano, však ti nikdo nebrání aby jsi navštěvoval internet prostřednictvím IE 6. Nemůžeš ale čekat že se ti bude vše zobrazovat korektně.

Optimalizace pro takhle zastaralý prohlížeče není kolikrát vůbec jednoduchá ( když máš statickou jednostránku, tak ok budiž), ale pro něco složitějšího jako např eshop už to taková sranda není.

Lepší řešení bych viděl udělat si nějaké prohlášení o přístupnosti ( např. odkaz v patičce ) a tam specifikovat, pro které prohlížeče je garantováno korektní zobrazení a jsi z obliga. Pokud bude mít zákoš specifický požadavek na korektní zobrazení pro starší prohlížeče, ok , za příplatek uděláme pokud je to možné. Standardně bych to ale neřešil.

 
Nahoru Odpovědět 19.7.2013 21:21
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na tomasf16
David Čápka:

Ano, někteří masochisté si prohlíží internet v konzoli :) Jinak IE 7 nepodporuje už ani Google, IE 6 je mrtvý prohlížeč.

Nahoru Odpovědět 19.7.2013 21:26
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Kit
Redaktor
Avatar
Odpovídá na tomasf16
Kit:

Podle mne je nejvhodnějším řešením udělat web tak, aby pro starší prohlížeče zůstával funkční, ale aby byl patřičně redukován design. To znamená nestarat se o kulaté rohy a barevné přechody, ale udělat ten web tak, aby si i zákazník se zastaralým prohlížečem mohl nakoupit.

Nahoru Odpovědět 19.7.2013 21:43
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
tomasf16
Redaktor
Avatar
Odpovídá na Kit
tomasf16:

No vystihl jsi to úplně přesně :)

V každým případě, každýmu kdo tvoří na zakázky weby vřele doporučuji, jasně definovat, které prohlížeče jsou 100% podporovány ( ale jen zaktualizované verze ) a které ne, ptž pokud to neudělá, tak jakoby říkal, můj web bude vypadat stejně v nové mozille tak i v IE 5.

 
Nahoru Odpovědět 19.7.2013 21:57
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Kit
Jiří Gracík:

Ono ten design občas není ani možné udržet (viz průhlednost u IE 6), takže "zhranatět", zjednodušit a přizpůsobit design je dost často nutnost :)

Nahoru Odpovědět 19.7.2013 23:23
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Žůrek (misaz):

zrovna průhlednost jde celkem jednoduše spravit.

filter: alpha(opacity=50);

a u PNG http://www.twinhelix.com/css/iepngfix/

Nahoru Odpovědět 20.7.2013 9:18
Nesnáším {}, proto se jim vyhýbám.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Jiří Gracík:

člověk to potřebuje a nikdo neví, jakmile se ale jde hádat tak se dozví úplně všechno :D

Nahoru Odpovědět  +1 20.7.2013 10:58
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 33 zpráv z 33.