| Autor | Zpráva | ||
|---|---|---|---|
| lukyno010 Profil |
#1 · Zasláno: 23. 5. 2014, 12:00:16
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"> Domov</a> <a class="block-button1" href="kontakt.html" target="hlavne"><img src="images/kontakt.png"> Kontakt</a> <nav> <a class="block-button1" href="uvod.html" target="hlavne"><img src="images/home.png"> Domov</a> </nav> <a class="block-button1" href="video.html" target="hlavne"><img src="images/kontakt.png"> 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 |
#2 · Zasláno: 23. 5. 2014, 12:09:27
Základný princíp je napr. v článku Vyskakovací menu v CSS.
|
||
| lukyno010 Profil |
#3 · Zasláno: 23. 5. 2014, 12:20:42
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 |
display triedy .block-button ten, kt. nastavuješ cez selektory?Prepáč, moja chyba, idem sa na to pozrieť lepšie. |
||
| lukyno010 Profil |
#5 · Zasláno: 23. 5. 2014, 12:45:30
No to by som bol rád keby si sa na to pozrel :D
|
||
| lionel messi Profil |
#6 · Zasláno: 23. 5. 2014, 12:48:13
Skús použiť
nav a:hover ~ nav a{
display: block;
position: absolute;
}Živá ukážka Za chyby sa veľmi ospravedlňujem, ale naozaj mám za sebou jedno katastrofálne predpoludnie. |
||
| lukyno010 Profil |
#7 · Zasláno: 23. 5. 2014, 14:17:38
á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 |
#9 · Zasláno: 23. 5. 2014, 17:20:10
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 |
#11 · Zasláno: 23. 5. 2014, 17:36:06
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 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 |
#13 · Zasláno: 23. 5. 2014, 17:53:39
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 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 |
#14 · Zasláno: 23. 5. 2014, 18:24:21
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"> Kontakt</a></div>
<div class="bocne">
<a target="hlavne" href="uvod.html" class="block-button"><img src="images/home.png"> 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 |
#17 · Zasláno: 25. 5. 2014, 11:34:45
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 |
#19 · Zasláno: 25. 5. 2014, 12:45:43
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 |
#21 · Zasláno: 25. 5. 2014, 23:16:05
<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 |
#22 · Zasláno: 25. 5. 2014, 23:40:03
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 |
#23 · Zasláno: 26. 5. 2014, 14:59:48
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 |
#24 · Zasláno: 27. 5. 2014, 21:11:32
áno ja viem že web mám robiť pre všetkých ... tak som to už upravil
|
||
| CZghost Profil |
#25 · Zasláno: 28. 5. 2014, 10:38:16
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 |
#26 · Zasláno: 29. 5. 2014, 09:42:51
ale ten web skola.extrem-host.eu/skola už neexistuje :D
|
||
| CZghost Profil |
#27 · Zasláno: 29. 5. 2014, 10:04:02
lukyno010:
„už neexistuje“ To docela brzo :-) |
||
| lukyno010 Profil |
#28 · Zasláno: 29. 5. 2014, 21:24:58
lebo som to ja zrušil :D
|
||
| CZghost Profil |
#29 · Zasláno: 30. 5. 2014, 08:42:52
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 |
#30 · Zasláno: 30. 5. 2014, 13:25:53
nie ja som to opravil a je to presmerované na extrem-host.eu a nie na skola.extrem-host.eu/skola
|
||
|
Téma pokračuje na další straně.
|
|||
0