| Autor | Zpráva | ||
|---|---|---|---|
| jou222 Profil |
#1 · Zasláno: 29. 3. 2014, 17:07:37
Zdravím,
dělám menu a mám 6 hlavních odkazu v topu a když najedu tak mi vypíšou pododkazy. Prostě rolovací menu. Ale mám to tak, že ty odkazy jsou v divu a pododkazy taky v divu. Ale potřebuji aby velikost poddivu byla relativní a prostě podle délky textu v odkazu a rozšiřovala se a nebyla závislá na horním divu. Díky za pomoc |
||
| CZghost Profil |
jou222:
Není lepší to dělat přes seznam položek? Takhle: <ul class="menu">
<li><a href="index.php">Domů</a></li>
<li><a href="javascript:;" onclick="return false;">Rozbalit</a>
<ul class="podmenu">
<li><a href="produkty.php">Produkty</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</li>
</ul>Pak si to nastyluješ, jak potřebuješ, ošetři hover (podmenu se má ukázat pouze při přejetí myší), a hotovo... Udělal jsem ještě živou ukázku, jak by mohlo výsledné menu vypadat: http://kod.djpw.cz/focb- - Živá ukázka http://kod.djpw.cz/focb - Kód |
||
| jou222 Profil |
#3 · Zasláno: 29. 3. 2014, 17:52:14
Aha, dobře děkuji předělám to podle toho co jsi mi poslal :)
|
||
| CZghost Profil |
#4 · Zasláno: 29. 3. 2014, 18:02:59
P.S. - Jestli chceš mít menu po celé šířce stránky, dej ho do divu a nastav mu stejné pozadí, jako celému bloku seznamu... Takhle to dělám já :)
|
||
| jou222 Profil |
Spíše to chci, aby ty horní To Domu,E-shop atd. měly stejnou šířku, ale ty co pododkazy měli furt šířku relativní.
Top: prostě mělo šířku 200px a pododkazy podle délky textu, ale furt mi to nejde prostě délka textu pododkazu mi nepřeteče tu délku 200px. A to je můj problém s kterým bojuji i když to dělám podle toho co jsi mi poslal. |
||
| Tomáš123 Profil |
jou222:
Ukáž tvoj kód alebo živú ukážku! Asi tam nemáš position: absolute;.
|
||
| jou222 Profil |
#7 · Zasláno: 29. 3. 2014, 18:49:27
.menu ul {
font-family: Verdana, "Arial CE", Arial, Helvetica, sans-serif;
font-size: 10pt;
width: 100%;
padding: 0px;
margin: 0px;
}
.menu ul li {
list-style-type: none;
float: left;
width: 200px;
}
.menu ul li a {
color: #fff;
text-decoration: none;
display: inline-block;
background-color: #006699;
}
.menu ul li A SPAN{
}
.menu ul li:hover {
}
.menu ul li:hover a {
color: white;
}
.menu ul li .menu-sub {
padding: 0px;
color: black;
display: none;
position: absolute;
}
.menu ul li:hover .menu-sub {
display: block;
}
.menu ul li .menu-sub li {
float: none;
}
.menu ul li .menu-sub li a {
color: #fff;
font-size: 18px;
min-width: 243px;
}
.menu ul li .menu-sub li:hover {
text-decoration: none;
}
.menu ul .menu-sub li:hover a {
color: #fff;
} |
||
| Tomáš123 Profil |
jou222:
myslím, že tvoja chyba spočíva v tom, že: .menu ul li {
list-style-type: none;
float: left;
width: 200px;
}Na tvojom mieste skúsim prepísať HTML podľa CZGhosta a a skopírovať jeho CSS a potom skúšať pomaly obmieňať, až zistíš kde je chyba. |
||
| CZghost Profil |
#9 · Zasláno: 29. 3. 2014, 19:11:38
jou222:
spíš bych to udělal takhle: ul.menu {
font-family: Verdana, "Arial CE", Arial, Helvetica, sans-serif;
font-size: 10pt;
width: 100%;
padding: 0px;
margin: 0px;
}
ul.menu li {
list-style-type: none;
float: left;
width: 200px;
}A HTML: <ul class="menu"> <li><a href="#">Nějaká položka</a></li> <li><a href="#">Další položka</a></li> </ul> Pak je jasný, že ti to bude házet na všechny seznamy v jakémkoliv elementu s třídou menu. Tomáš123: Hlavně má špatně selektory, viz výše uvedená reakce |
||
| Tomáš123 Profil |
#10 · Zasláno: 29. 3. 2014, 19:16:00
CZghost:
To tiež, ale nevidel som jeho HTML, tak to mohol mať aj inak. |
||
| CZghost Profil |
#11 · Zasláno: 29. 3. 2014, 19:24:54
Tomáš123:
No zřejmě se nechal inspirovat živou ukázkou, kterou jsem mu poslal. Tak předpokládám, že html bude velmi podobné, jenom provede obměnu položek a vzhledu. Syntaxi nechá tak, jak je. jou222: Když si nastuduješ třídy v CSS, pak pochopíš syntaxi toho, co jsem ti navrhnul. Vždycky, když se chci na něco zeptat, tak se nejdříve podívám, zda to není v příručce a když není nebo něčemu nerozumím, pak se ptám. Takhle ti to bude dělat neplechu... |
||
|
Časová prodleva: 5 měsíců
|
|||
| jirka0376 Profil |
#12 · Zasláno: 24. 8. 2014, 17:49:40
[#2] CZghost
Zdravím, k té ukázce Živá ukázka bychpotřeboval doplnit ještě kód pro další podmenu. Zatím jsem si jej udělal sám, ale má to jednu velikou chybu. Šířka je stále cca 50px i když je tam delší text a zalamuje se - tudíž je výška místo požadovaných 30px dvojnásobná případně vícenásobná. Mohl by mi někdo upravit kód? Děkuji mockrát Jirka ul.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #1C4E71;
width: 100%;
padding: 0px;
margin: 0px;
height: 30px;
line-height: 30px;
}
ul.menu li {
list-style-type: none;
float: left;
background-color: #1C4E71;
border-left: 1px #6E9DBE solid;
}
ul.menu li a {
color: white;
text-decoration: none;
display: inline-block;
padding: 5px 10px 5px 10px;
}
ul.menu li:hover {
background-color: #4B7A9B;
}
ul.menu li:hover a {
color: white;
}
ul.menu li ul.podmenu {
/*padding: 0px;*/
color: black;
background-color: #1C4E71;
display: none;
position: absolute;
/*margin: 0;*/
}
ul.menu li:hover ul.podmenu {
display: block;
}
ul.menu li ul.podmenu li {
background-color: #1C4E71;
float: none;
border-top: 1px #6E9DBE solid;
position: relative; /* změna */
}
ul.menu li ul.podmenu li a {
color: white;
}
ul.menu li ul.podmenu li:hover {
background-color: #4B7A9B;
}
ul.menu li ul.podmenu li:hover a {
color: white;
}
/* ------------------------------ Podmenu 2 ---------------------------- */
ul.podmenu li ul.podmenu2 {
/*padding: 0px;*/
color: black;
background-color: #1C4E71;
display: none;
position: absolute;
/*margin: 0;*/
top: 0; /* změna */
left: 100%; /* změna */
}
ul.podmenu li:hover ul.podmenu2 {
display: block;
}
ul.podmenu li ul.podmenu2 li {
background-color: #1C4E71;
float: none;
border-top: 1px #6E9DBE solid;
}
ul.podmenu li ul.podmenu2 li a {
color: white;
}
ul.podmenu li ul.podmenu2 li:hover {
background-color: #4B7A9B;
}
ul.podmenu li ul.podmenu2 li:hover a {
color: white;
}
/* --------------------------------------------------------------------- */ |
||
|
Časová prodleva: 10 let
|
|||
0