« 1 2 »
Autor Zpráva
lukyno010
Profil
Nazdar začal som robiť svoje prvé rozbaľovacie menu.
Moja stránka vyzerá asi takto: Stránka.
Kód toho menu je:
<nav>
<a class="block-button1" href="uvod.html" target="hlavne"><img src="images/home.png">&nbsp;&nbsp;&nbsp;&nbsp;Domov</a>
<a class="block-button1" href="kontakt.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Kontakt</a>
<nav>
<a class="block-button1" href="uvod.html" target="hlavne"><img src="images/home.png">&nbsp;&nbsp;&nbsp;&nbsp;Domov</a>
</nav>
<a class="block-button1" href="video.html" target="hlavne"><img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Video</a>
</nav>

a css som začal robiť ale neviem pokračovať aby sa to zobrazovalo pod tým:
nav {
    display:block;
}
nav > nav {
    display: none;
}

nav a:hover > nav a{
    display: block;
    position: absolute;
}

tie buttony mám robené osobitne:
.block-button1,
.block-button:visited,
.wpsc_buy_button {
    background: url(images/bg-block-button.png) left bottom repeat-x #1C5FA5;
    background: linear-gradient(#999999, #333333);    
    border: 0px solid #333333;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: bold 12px arial;
    padding: 5px 15px 6px;
    width: 120px;
    height: 18px;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: -2px;
    border-radius: 2px;

}

.block-button1:hover,
.wpsc_buy_button:hover {
    background: url(images/bg-block-button-hover.png) left bottom repeat-x #1C5FA5;
    background: linear-gradient(#999999, #000000);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

Ak by vedel niekto poradiť ako mám pokračovať s tým css toho nav tak by som bol rád.

vopred ďakujem
lionel messi
Profil
Základný princíp je napr. v článku Vyskakovací menu v CSS.
lukyno010
Profil
ale však ja to už mám ... viď v tom kóde čo som dával aj vyššie :
nav {
    display:block;
}
nav > nav {
    display: none;
}
 
nav a:hover > nav a{
    display: block;
    position: absolute;
}
lionel messi
Profil
Neprebíja náhodou display triedy .block-button ten, kt. nastavuješ cez selektory?
Prepáč, moja chyba, idem sa na to pozrieť lepšie.
lukyno010
Profil
No to by som bol rád keby si sa na to pozrel :D
lionel messi
Profil
Skús použiť
nav a:hover ~ nav a{
    display: block;
    position: absolute;
}
selektor tildy.

Živá ukážka

Za chyby sa veľmi ospravedlňujem, ale naozaj mám za sebou jedno katastrofálne predpoludnie.
lukyno010
Profil
áno ide to, ale zobrazí sa to aj pri tom keď nabehnem myšou ku Kontakt aj Domov, a keď už chcem na to kliknúť tak to hneď zmizne.
Tomáš123
Profil
lukyno010:
nav {
    display:block;
    margin: 0;
    padding: 0;
}
nav nav {
    display: none;
}
 
nav:hover nav {
    display: block;
    position: absolute;
}

Použi toto...Nikde nie je napísané "zložitý selektor, dokonalá funkcia". :-)
lukyno010
Profil
Tomáš123:
nav {
display:block;
margin: 0;
padding: 0;
}
nav nav {
display: none;
}
>
nav:hover nav {
display: block;
position: absolute;
}
ďakujem ide mi to len stále nechápem prečo mi ten pod odkaz zobrazí aj pri nabehnutí na Domov aj Kontakt aj Video... malo by to zobraziť iba pri Kontakt.. ( všetko je len skúšobné odkazy sa ešte pomenia)
Tomáš123
Profil
lukyno010:
len stále nechápem prečo mi ten pod odkaz zobrazí aj pri nabehnutí na Domov aj Kontakt aj Video
Selektor nav:hover nav hovorí, že keď nájdeš myšou na hlavný nav, zobrazí sa vysúvací nav.
Nepomáha ani pridávanie tried. Možno by sa to dalo vyriešiť zložitými štýlmi v CSS, ale lepšie bude použiť <ul> a <li>.
lukyno010
Profil
len ja to pomocou <ul> a <li> neviem spraviť :D a nechcem len prosto kopírovať z webu :D
Tomáš123
Profil
lukyno010:
Tu je to:
Kód: http://kod.djpw.cz/fmdb
Ukážka: http://kod.djpw.cz/fmdb-

Namiesto &nbsp;&nbsp;&nbsp;&nbsp; radšej používaj vlastnosť text-align

Ak nechceš iba kopírovať, povedz čomu nerozumieš a ja ti to rád vysvetlím.
lukyno010
Profil
no tak toto by som možno aj porozumel, ja som väčšinou na internete našiel zložitejšie priklady jeden som si aj trochu skúšal upraviť :

nav ul ul{
    display: none;
}

nav ul li: hover > ul{
    display: block;
}

nav ul {
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-block;
}

nav ul li {float: left; margin-right: 5px;}
 
nav ul li a{ display: block; padding: 5px 10px 5px 10px;}


nav ul li:hover > ul {margin:0px; padding: 0px;}
nav ul li:hover > ul li {float: none; display: block;}

nav ul li { position:relative;}
nav ul li ul { position: absolute; top: 30px, left: 0px;}
ale nefungoval mi preto som skúšal iné možnosti.... ale ten tvoj kód vyzerá dobre aj tomu celkom chápem a nieje to ani zložité :D

ale mám ešte jeden problém ... zvyšok stránky mám pomocou divov a má ich odsunuté marginom, len včera som bol u kamaráta ktorý má väčší monitor tak mu moju stránku dobre nezobrazilo hlavne to odsúvanie od kraja... dá sa to nejako spraviť aby to nerobilo ?
Tomáš123
Profil
lukyno010:
Keď nájdeš na internete menu, vyzerá brutálne zložito, lebo sú tam aj farby, marginy, paddingy, pozície... A ten základ si z toho nevieš vytiahnuť, ak nevieš, čo naozaj potrebuješ.

dá sa to nejako spraviť aby to nerobilo ?
Pomôže, ak v margin-right namiesto percent, použiješ pixely.
lukyno010
Profil
práveže mal som tam pixely a to mi nespravilo dobre, tu je kód síce s percentami:
HTML:
<div class="bocne" style="border-top: 5px solid grey;">
<a href="kontakt.html" target="hlavne" class="block-button">
<img src="images/kontakt.png">&nbsp;&nbsp;&nbsp;&nbsp;Kontakt</a></div>
<div class="bocne">
<a target="hlavne" href="uvod.html" class="block-button"><img src="images/home.png">&nbsp;&nbsp;&nbsp;&nbsp;Domov</a>
<hr id="ciara" color="#000000" style="opacity: 0.2" size="1">
</div>
<div class="bocnezv">
<br />
<br />
<br />
<br />
<hr id="ciara" color="#000000" style="opacity: 0.2" size="1">
<a class="block-button"><center>Reklama</center></a></td></tr>
<center><img src="http://skola.extrem-host.eu/skola/images/reklama.jpg" alt="Banner"></center>
</div>
</nav>
          
<div class="ram">
<iframe height="750" width="801" name="hlavne" scrolling="auto" src="uvod.html" frameborder="0"></iframe>
</div>

CSS:
.bocne
{
    float:none;
    margin-left: 24%; /*309px*/
    padding-bottom: 5px;
    padding-left: 2px;
    border: 5px solid; 
    border-color: grey;
    border-bottom: 0px;
    border-right: 0px;
    border-top: 0px;
    width: 156px;
    height: 28px;
    background-color: #FFFFFF;

}

.bocnezv {
    background-color: #FFFFFF;
    height: 684px;
    margin-left: 24%;  /*309px*/
    width: 156px;
    border: 5px solid; 
    border-color: grey;
    border-bottom: 0px;
    border-right: 0px;
    border-top: 0px;
}

.ram { 
    margin-right: 15%;  /*309px*/
    margin-top: -755px;
    border: 5px solid; 
    border-bottom: 0px;
    border-left: 0px;
    float: right;
    border-color: grey;
    width: 801px;
}

a mne vlastne oddeľovalo ten div s rámom doprava na monitore s väčším rozlíšením
Tomáš123
Profil
lukyno010:
Chyba je v tom, že ty zarovnáš div.ram pravým marginom. Takýmto spôsobom dosiahneš akurát to, že spomínaný div bude na každom monitore rovnako vzdialený od pravej strany. Ty však potrebuješ div zarovnať vzhľadom na ľavú stranu, použi teda margin-left.
lukyno010
Profil
aha už by to malo fungovať ďakujem :D ale predsa mám ešte jednu otázku a nechcem otvárať novú tému .... keby že chcem na stránke v hlavnej časti aby sa striedali príspevky ktoré boli pridané musel by som mať k tomu javascript? príklad je na: http://extrem-host.eu/
Tomáš123
Profil
lukyno010:
keby že chcem na stránke v hlavnej časti aby sa striedali príspevky ktoré boli pridané musel by som mať k tomu javascript?
Samozrejme, bez neho sa nepohneš.
lukyno010
Profil
ok skúsil som to dať spolu a v pondelok asi pôjdem do kancelárie k bratovi tak to pozriem že ako to zobrazí

zatiaľ ďakujem za pomoc
Chamurappi
Profil
Reaguji na lukyna010:
Proč používáš <nav>? Explorer 8 ho nezná a v prohlížečích, které ho znají, nepřináší žádnou přidanou hodnotu.
lukyno010
Profil
<nav> používam ako sémanticky tag pretože mi poradili že to je dobré používať keď chcem pridávať k tomu CSS. a predpokladám že väčšina ľudí majú už IE8+ a tam to už podporuje a ostatné prehliadače to tiež podporujú.
_es
Profil
lukyno010:
a predpokladám že väčšina ľudí majú už IE8+ a tam to už podporuje
IE8 to „nepodporuje“, tvoj web je v ňom „rozbitý“.
Tomáš123
Profil
lukyno010:
Chamurappi má pravdu, ale ak si použil kód menu, ktorý som ti napísal, tak sa ti bude menu vysúvať aj bez elementu <nav>. Stačí z HTML vybrať všetky elementy <nav> a v CSS prepísať selektory z nav ... na ... (proste bez nav vpredu).

A len pre info, ja mám IE8, stránky by si mal robiť pre všetkých.
lukyno010
Profil
áno ja viem že web mám robiť pre všetkých ... tak som to už upravil
CZghost
Profil
Aplikace Internet Explorer nemůže zobrazit tento web.
Zobrazeno v IE 9, systém Windows Vista Home Basic. Zkoušel jsem to dvakrát. Zkotroluj, jestli funguje DNS (nejlépe pomocí pingu - cmd).
lukyno010
Profil
ale ten web skola.extrem-host.eu/skola už neexistuje :D
CZghost
Profil
lukyno010:
už neexistuje
To docela brzo :-)
lukyno010
Profil
lebo som to ja zrušil :D
CZghost
Profil
lukyno010:
tak som to už upravil
A tohle znamená, že jsi to opravil tak, že jsi to zrušil? To není moc hezký přístup.
lukyno010
Profil
nie ja som to opravil a je to presmerované na extrem-host.eu a nie na skola.extrem-host.eu/skola
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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