Autor Zpráva
jou222
Profil
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
Aha, dobře děkuji předělám to podle toho co jsi mi poslal :)
CZghost
Profil
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
.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;
}
nepoužívaš classy a tak máš určenú šírku 200px pre všetky ul, tak sa nemôžeš čudovať, že je to stále rovnako široké;

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
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
CZghost:
To tiež, ale nevidel som jeho HTML, tak to mohol mať aj inak.
CZghost
Profil
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...
jirka0376
Profil
[#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;
}

/* --------------------------------------------------------------------- */

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: