Stránka 1 z 1
Vycentrování lišty
Napsal: 18 čer 2014 16:04
od kuxik009
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>
Re: Vycentrování lišty
Napsal: 18 čer 2014 21:58
od JacobCZ
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...
Re: Vycentrování lišty
Napsal: 22 čer 2014 12:20
od kuxik009
Díky, vyzkouším to. A proč nesmí být 100%? Může být třeba 99%?
edit: nefunguje :(
Re: Vycentrování lišty
Napsal: 22 čer 2014 13:46
od CZechBoY
č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, ...)?
Re: Vycentrování lišty
Napsal: 01 črc 2014 11:07
od kuxik009
Č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
Re: Vycentrování lišty
Napsal: 01 črc 2014 11:13
od CZechBoY
Dej si to menu do jednoho divu a jednoho seznamu... potom tomu divu dej margin: 0 auto
Re: Vycentrování lišty
Napsal: 01 črc 2014 11:23
od kuxik009
Jestli to chápu správně, tak jsem to udělal takto, ale stejně to nefunguje:
CSS
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>
Re: Vycentrování lišty
Napsal: 01 črc 2014 11:24
od CZechBoY
nedávej do LI další div...
kouknu na to ještě za chvíli
Re: Vycentrování lišty
Napsal: 01 črc 2014 11:25
od kuxik009
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.
Re: Vycentrování lišty
Napsal: 01 črc 2014 13:44
od CZechBoY
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ý
Re: Vycentrování lišty
Napsal: 02 črc 2014 12:03
od kuxik009
Počkat, to je na mě už trochu složité (promiň, jsem někdy dost nechápavej
).
Aby se ta lišta a rozbalovací menu správně vykreslili, potřebuju mít takovejhle kód:
► Zobrazit spoiler
Kód: Vybrat vše
<?
@session_start();
$url = "http://" . $_SERVER["HTTP_HOST"] . "/";
if (isset ($_SESSION["prihlaseni"]))
{?>
<div id="lista">
<div>
<ul id="centered">
<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>
</li>
</ul>
</div>
</ul>
</div>
</div>
<?
}
?>
A takovýto CSS
► Zobrazit spoiler
Kód: Vybrat vše
#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;}
#vodorovne_menu2 ul{margin: 0px; padding: 0px;}
#vodorovne_menu2 {width: 100%;}
#vodorovne_menu2 li {float:left;list-style-type:none;}
#vodorovne_menu2 li a {background: #FFE100; display:block; height:24px;width: 110px; line-height: 24px; text-align: center; text-decoration: none; color: black;}
#vodorovne_menu2 li a:hover { background: Orange; color: black;}
#vodorovne_menu2 li ul {display: none;}
#vodorovne_menu2 li:hover ul { display:block; position:absolute; border: solid black; border-width: 0 1px 1px 1px;}
#vodorovne_menu2 li:hover ul li { display:block; float: none; height:24px; width: 110px; border-top: 1px solid white;}
#vodorovne_menu2 li:hover ul li a {background: black; color: white;}
#vodorovne_menu2 li:hover ul li a:hover {background: Red; color:#fff; font-weight: bold;}
a {
/* display:block; min-height:100px; */
}
a:hover #jedna{
display:none;
}
a:hover #dva {
display:inline;
}
a #dva {
display:none;
}
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
Re: Vycentrování lišty
Napsal: 02 črc 2014 12:04
od CZechBoY
No když máš css i html daný tak s tim se těžko něco dělá...