NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
KiRoS
Člen
Avatar
KiRoS:18.7.2013 12:48

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
Tvůrce
Avatar
David Hynek:18.7.2013 13:19

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:18.7.2013 13:39

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
Tvůrce
Avatar
David Hynek:18.7.2013 14:01

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:18.7.2013 14:09

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
Tvůrce
Avatar
tomasf16:18.7.2013 14:14

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
18.7.2013 14:14
Avatar
KiRoS
Člen
Avatar
KiRoS:18.7.2013 14:25

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
Tvůrce
Avatar
Kit:18.7.2013 14:31

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
Tvůrce
Avatar
Odpovídá na KiRoS
David Hynek:18.7.2013 14:31 
<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:18.7.2013 14:31

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:18.7.2013 14:34

</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
Tvůrce
Avatar
tomasf16:18.7.2013 14:34

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:18.7.2013 14:42

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
Tvůrce
Avatar
tomasf16:18.7.2013 14:46

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
Tvůrce
Avatar
tomasf16:18.7.2013 14:49

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
Tvůrce
Avatar
David Hynek:18.7.2013 14:54 
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:18.7.2013 14:55

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
Člen
Avatar
martin1pokorny:19.7.2013 8:36

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
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na martin1pokorny
Michal Žůrek - misaz:19.7.2013 8:42

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
Avatar
martin1pokorny
Člen
Avatar
martin1pokorny:19.7.2013 8:59

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
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na martin1pokorny
Michal Žůrek - misaz:19.7.2013 9:04

staré IE.

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

 
Nahoru Odpovědět
19.7.2013 9:04
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na martin1pokorny
Neaktivní uživatel:19.7.2013 9:41

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
Neaktivní uživatelský účet
Avatar
martin1pokorny
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
martin1pokorny:19.7.2013 10:07

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na martin1pokorny
Neaktivní uživatel:19.7.2013 10:27

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
Neaktivní uživatelský účet
Avatar
tomasf16
Tvůrce
Avatar
tomasf16:19.7.2013 20:58

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
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na tomasf16
Michal Žůrek - misaz:19.7.2013 21:06

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
19.7.2013 21:06
Avatar
tomasf16
Tvůrce
Avatar
tomasf16:19.7.2013 21:21

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 Hartinger
Vlastník
Avatar
Odpovídá na tomasf16
David Hartinger:19.7.2013 21:26

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
New kid back on the block with a R.I.P
Avatar
Kit
Tvůrce
Avatar
Odpovídá na tomasf16
Kit:19.7.2013 21:43

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
Tvůrce
Avatar
Odpovídá na Kit
tomasf16:19.7.2013 21:57

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Kit
Neaktivní uživatel:19.7.2013 23:23

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
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:20.7.2013 9:18

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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:20.7.2013 10:58

č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
20.7.2013 10:58
Neaktivní uživatelský účet
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.