Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Menu

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

Aktivity (1)
Avatar
Amomym
Člen
Avatar
Amomym:20.3.2013 21:29

Ahoj, dělám menu a nevím jak udělat aby se ikony vycentrovaly na střed.

nav#menu {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 35px;
        z-index: 200;
        background: #f9f9f9;
        padding: 15px;
        border-bottom: 1px solid #dcdcdc;

}

nav#menu ul {
        margin: 0px auto;
        list-style: none;
}

nav#menu ul li {
        float: left;
        margin-right: 5px;
  margin: 0px auto;
}

nav#menu ul li a {
        color: #999;
        text-decoration: none;
        font: 100 1.2em "Open Sans", sans-serif;
        display: block;
        padding: 5px 20px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;

}

nav#menu ul li a:hover {
        background: none;
        color: #000;
}

nav#menu ul li a.active {
        background: #f9f9f9;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
        background: -moz-linear-gradient(top,  #f9f9f9 0%, #dddddd 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f9f9f9 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f9f9f9 0%,#dddddd 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f9f9f9 0%,#dddddd 100%); /* IE10+ */
        background: linear-gradient(top,  #f9f9f9 0%,#dddddd 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */
        color: #000;
        border: 1px solid #dcdcdc;
        box-shadow: inset 0 0 1px #fff;
}

nav#menu ul li a img.menuIcon {
        display: none;
  margin: 0px auto;
}

#wrapper {
        width: 900px;
        margin: 0 auto;
}

#page {
        text-align: left;
}

#neviditelny  {
        height: 80px;
}

toto je kód který mám ve style.css, čili desingt webu. Od vás bych teda chtěl vědět jaky script dát na vycentrování ikon na střed

 
Odpovědět 20.3.2013 21:29
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:20.3.2013 21:38

za 1. .. na co máš id menu ? :)

když máš nav tak mu nedělej id .. ;)
nav použiješ 1x na stránce ... takže zbytečné ...

potom sem dej nějaký náhled abychom viděli jak to máš udělané :)

např přes http://prntscr.com/

Nahoru Odpovědět 20.3.2013 21:38
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Amomym
Člen
Avatar
Amomym:20.3.2013 21:46

http://prntscr.com/x4gh7 toto je odkaz na to jak to vypadá teď a chtěl bych aby ty ikony v menu, aby byly na středu stránky

 
Nahoru Odpovědět 20.3.2013 21:46
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Amomym
Honza Bittner:20.3.2013 21:49

OK, dáš do

nav ul
{
  margin: 0px auto;
}

mělo by to jít

Nahoru Odpovědět 20.3.2013 21:49
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Amomym
Člen
Avatar
Odpovídá na Honza Bittner
Amomym:20.3.2013 21:53

nejde to, udělal jsem jak jsi napsal, ale nic se nestalo

 
Nahoru Odpovědět 20.3.2013 21:53
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Amomym
Honza Bittner:20.3.2013 21:54

tak nastav

nav ul li
{
 width: auto;
}

mohlo by to pomoc

Nahoru Odpovědět 20.3.2013 21:54
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:20.3.2013 21:59

ještě dej

nav ul
{
  width: 300px;
}
Nahoru Odpovědět 20.3.2013 21:59
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Amomym
Člen
Avatar
Odpovídá na Honza Bittner
Amomym:20.3.2013 22:06

už to mám, akorád jsem musel dát

nav ul
{
  width: 400px;
}
 
Nahoru Odpovědět 20.3.2013 22:06
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 8 zpráv z 8.