Vycentrování lišty

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Vycentrování lišty

Příspěvekod kuxik009 » 18 čer 2014 16:04

Zdravím,
na webu mám nahoře lištu, ve které mám rozbalovací menu (viz odkaz v podpisu). Jenže nevím, jak to menu dát na prostředek lišty. Můžete mi někdo prosím pomoct? Kódy přikládám níže. Děkuji.
CSS:

Kód: Vybrat vše

#lista
 {
   position: fixed;
   top: 0;
   left: 0%;
   background-color: #DDD;
   width: 100%;
   line-height: 30px;
   border: 1px solid gray;
   border-bottom: 0;
   }

#vodorovne_menu ul{margin: 0px; padding: 0px;}
#vodorovne_menu {width: 100%;}
#vodorovne_menu li {float:left;list-style-type:none;}
#vodorovne_menu li a {display:block; height:24px;width: 110px; line-height: 24px; text-align: center; text-decoration: none; color: black;}
#vodorovne_menu li a:hover { background: yellow; color: black;}
#vodorovne_menu li ul {display: none;}
#vodorovne_menu li:hover ul { display:block; position:absolute; border: solid black; border-width: 0 1px 1px 1px;}
#vodorovne_menu li:hover ul li { display:block; float: none; height:24px; width: 110px; border-top: 1px solid #F0F0F0;}
#vodorovne_menu li:hover ul li a {background: black; color: white;}
#vodorovne_menu li:hover ul li a:hover {background: OrangeRed; color:#fff; font-weight: bold;}


HTML:

Kód: Vybrat vše

<div id="lista">
    <div id="vodorovne_menu">
    <ul>
      <li><a href="<? echo $url; ?>index.php">Hlavní stránka</a>
      </li>
     <li><a href="<? echo $url; ?>greecegame">GreeceGame</a>
     <ul>
          <li><a href="<? echo $url; ?>greecegame"><span id="jedna">Tažení Ano</span><span id="dva">04:58</span></a></li>
          <li><a href="<? echo $url; ?>greecegame"><span id="jedna">Práce 1 Ano</span><span id="dva">06:07:43</span></a></li>
        <li><a href="<? echo $url; ?>greecegame"><span id="jedna">Práce 2 Ano</span><span id="dva">25:30:56</span></a></li>
          <li><a href="<? echo $url; ?>greecegame">Koloseum</a></li>
          <li><a href="<? echo $url; ?>greecegame">Tržiště</a></li>
        <li><a href="<? echo $url; ?>greecegame">Směnárna</a></li>
          <li><a href="<? echo $url; ?>greecegame">Chrám</a></li>
        <li><a href="<? echo $url; ?>greecegame">Legie</a></li>
          <li><a href="<? echo $url; ?>greecegame">Olymp</a></li>
        </ul>
      </li>
      <li><a href="<? echo $url; ?>greecegame"><? echo "Drachmy: " . $drachmy_db; ?></a>
      </li>
      <li><a href="<? echo $url; ?>greecegame"><? echo "Duhovky: " . $duhovky_db; ?></a>
      </li>   
     </ul></div>
     <div id="vodorovne_menu2">
     <ul>
      <li background="red"><a><b><? echo $_SESSION["prihlaseni"]; ?></b></a>
        <ul>
          <li><a href="<? echo $url; ?>uzivatele.php?id=<? echo $_SESSION["prihlaseni"]; ?>">Můj účet</a></li>
          <li><a href="<? echo $url; ?>odhlas.php">Odhlásit se</a></li>
        </ul>
      </li>      
    </ul> 
  </div></div>
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Reklama
JacobCZ
nováček
Příspěvky: 16
Registrován: červen 14
Pohlaví: Muž
Stav:
Offline

Re: Vycentrování lišty

Příspěvekod JacobCZ » 18 čer 2014 21:58

To menu uvnitř té lišty obal ještě jedním DIVem, a dej mu ID například "centered", v CSS potom použij toto:

Kód: Vybrat vše

#centered {
    width: 500px; //Tady si nastav šířku (nesmí být 100%!!)
    margin: auto; //Tímto vycentrujeme...
}

Píšu narychlo, tudíž bez testu, ale mělo by to víceméně fungovat...

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod kuxik009 » 22 čer 2014 12:20

Díky, vyzkouším to. A proč nesmí být 100%? Může být třeba 99%?
edit: nefunguje :(
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod CZechBoY » 22 čer 2014 13:46

čau,
který menu chceš na prostředek? To horní (registrovat, přihlásit, barvy) nebo to s floatem:right (hlavní strana, greece game, články, ...)?
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod kuxik009 » 01 črc 2014 11:07

Čau, vycentrovat chci horní lištu, která se zobrazí až po přihlášení. Můžeš se na to podívat sám zde. Jméno i heslo můžeš dát demo
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod CZechBoY » 01 črc 2014 11:13

Dej si to menu do jednoho divu a jednoho seznamu... potom tomu divu dej margin: 0 auto
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod kuxik009 » 01 črc 2014 11:23

Jestli to chápu správně, tak jsem to udělal takto, ale stejně to nefunguje:
CSS

Kód: Vybrat vše

#centered {
  margin: 0 auto;
}


HTML

Kód: Vybrat vše

   <div id="lista">
   <div id="centered">
   <ul id="centered">
   <li>
   <div id="vodorovne_menu">
      MENU - VIZ PRVNÍ PŘÍSPĚVEK
  </div>
  </li>
  </ul>
  </div>
  </div>
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod CZechBoY » 01 črc 2014 11:24

nedávej do LI další div...
kouknu na to ještě za chvíli :D
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod kuxik009 » 01 črc 2014 11:25

Díky, stějně to moc nespěchá. Ale ten div tam musí být(myslím), aby se pro to menu načetlo CSS.
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod CZechBoY » 01 črc 2014 13:44

Udělej to menu normálně...

Kód: Vybrat vše

<ul>
  <li><a href="fdfsdfds">bfdbdfbdf</a></li>
  <li><a href="fdsfsd">fdsfdsfd</a></li>
</
ul>
 

Ty uděláš menu, do něj dáš div a do něj další menu, to se hrozně blbě styluje. Lepší je to mít jednoduchý :-)
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
kuxik009
Level 2.5
Level 2.5
Příspěvky: 338
Registrován: únor 13
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod kuxik009 » 02 črc 2014 12:03

Počkat, to je na mě už trochu složité (promiň, jsem někdy dost nechápavej :D ).
Aby se ta lišta a rozbalovací menu správně vykreslili, potřebuju mít takovejhle kód:
► Zobrazit spoiler

A takovýto CSS
► Zobrazit spoiler

Mohl bys mi prosím napsat, kam přesně mám co napsat aby fungovala lišta i rozbalovací menu tak jak má a aby bylo to menu ve středu? Děkuji předem za trpělivost :-)
Moje portfolio
Český jazyk je freeware, ale nikoliv open source!!!

Sestava:
► Zobrazit spoiler

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Vycentrování lišty

Příspěvekod CZechBoY » 02 črc 2014 12:04

No když máš css i html daný tak s tim se těžko něco dělá...
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW


Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 7 hostů