Autor | Zpráva | ||
---|---|---|---|
krkus Profil |
#1 · Zasláno: 20. 5. 2013, 22:33:11
Mám problém se stránkou na ročníkovou práci, layout mam tak, jak jsem chtěl, ale když tam přidám menu , tak se mi to celé rozhodí
Zde je html a css, prosil bych najít nějakou chybu, co popřípadě předělat <!Doctype html> <head><!-- ščřžýŠČŘŽÝ --> <meta name="generator" content="PSPad editor, www.pspad.com" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./style.css" /> <title>Dota2</title> </head> <body> <div id="main"> <div id="logomenu"> <div id="hornipanel"> <div id="logo"><a href="./index.html"><img src="./hlavicka1.png" /></a></div> <div id="login"></div> </div> <div id="menu"> <ul> <li><a href="@">Úvod</a></li> <li><a href="@">Galerie</a></li> <li><a href="@">Formulář</a></li> <li><a href="@">Kontakt</a></li> </ul> </div> </div> <div id="hlavni"> <div id="pravypanel"> <div id="novinky"></div> <div id="reklama"></div> </div> <div id="obsah"></div> </div> <div id="pata"></div> </div > </body> </html> body{ background-color:black; } #main{ width:1024px; height:1080px; background-color:#111111; margin:auto; } #hornipanel{ width:1022px; height:231px; border-width:1px; border-color:red; border-style:solid; border-bottom-style:none; } #logo{ height:231px; width:742px; float:left; background-repeat: repeat; background-image: url(pozadi.jpg); } #login{ height:231px; width:280px; float:right; background-repeat: repeat; background-image: url(pozadi.jpg); } #menu{ width:1023px; height:49px; background-color:red; border-width:1px; border-color:red; border-right-style:solid; } #hlavni{ height:750px; width:1023px; border-width:1px; border-color:red; border-right-style:solid; } #pravypanel{ width:223px; height:750px; float:left; background-color:pink; } #obsah{ width:800px; height:750px; float:right; background-color:#111111; } #pata{ height:50px; width:1023px; background-color:navy; clear:both; border-width:1px; border-color:red; border-right-style:solid; } img{ border:0px; } #menu ul{ list-style:none; display:block; float:left; position:relative; } a{ text-decoration:none; } li{ float:left; text-align:center; color:white; } #logomenu{ width:1023px; height:280px; } |
||
margin Profil * |
#2 · Zasláno: 20. 5. 2013, 22:59:32
Menu nemá ukončené obtékání: kouknu na Jak funguje "float" a "clear"
Ale dostaneš jinou, jednodušší, radu, než je v článku, do pravidla pro #menu přidej deklaraci: overflow: hidden; Nechápu smysl deklarací na řádcích 74, 75, 76, můžeš je s klidem vymazat. |
||
Trejpa Profil |
#3 · Zasláno: 20. 5. 2013, 23:12:07
krkus:
Tím, že do #menu zadáš rámečky, projeví se na vnitřním elementu UL jeho výchozí svislý margin. Seznam je se svým marginem vyšší, než vymezená výška #menu, takže z něj přetéká dolů přes #hlavni. V něm obsažený #pravypanel plovoucí vlevo musí na přetečený obsah počkat a tak se posune doprava. Následující plovoucí #obsah nemá dost místa, tudíž odskočí na další volný řádek, na který se vleze. Vynuluj si výchozí margin pro seznam a pokud se chceš zbavit i té mezery vlevo, tak i jeho padding. Svislé vyrovnání položek v menu proveď pomocí line-height na odkazech v menu. Proti případnému přetékání do budoucna uřízni #menu pomocí overflow. #menu { overflow: hidden; } #menu ul { margin: 0; padding:0; } #menu a { line-height: 49px; padding: 0 10px; } |
||
krkus Profil |
#4 · Zasláno: 20. 5. 2013, 23:23:19
moc děkuji za rady, jak říkám zrovna to děláme ve škole, ale ten jejich výklad není úplný
|
||
krkus Profil |
ok zase nevím co dál, menu mám ale nevím, jak ho dát vysouvací položku doprava, a celkově to nějak nefunguje
body{ background-image: url(dota-2-wallpaper-w-o-logo-by-archangelx2-wide.jpg); background-repeat:no-repeat; background-color:black; color:white; } #main{ width:1024px; height:1080px; background-color:#111111; margin:auto; } #logologin{ width:1022px; height:231px; border-width:1px; border-color:red; border-style:solid; border-bottom-style:none; } #logo{ height:231px; width:742px; float:left; background-repeat: repeat; background-image: url(pozadi.jpg); } #login{ height:231px; width:280px; float:right; background-repeat: repeat; background-image: url(pozadi.jpg); } #menu{ width:1023px; height:49px; background-color:red; border-width:1px; border-color:red; border-right-style:solid; } #hlavni{ height:750px; width:1023px; border-width:1px; border-color:red; border-right-style:solid; } #pravypanel{ width:223px; height:750px; float:left; background-color:pink; } #obsah{ width:800px; height:750px; float:right; background-color:#111111; } #pata{ height:50px; width:1023px; background-color:red; clear:both; border-width:1px; border-color:red; border-right-style:solid; } img{ border:0px; } table{ margin:auto; position:absolute; top:70px; } .red{ color:red; } .registrace{ color:red; } a:hover{ text-decoration:none; color:red; } a:visited{ color:red; } li{ float:left; text-align:center; color:white; } #logomenu{ width:1023px; height:280px; } #menu ul{ margin:0px; padding:0px; } ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; padding: 15px 25px 15px 25px; background: red; } ul li a:hover { background: white; color:red; } li:hover ul { display: block; position: absolute; } li:hover a { background: red; } li:hover li a:hover { background: white; color:red; } <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head><!-- ۨɘϝ --> <meta name="generator" content="PSPad editor, www.pspad.com" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./style.css" /> <title>Dota2</title> </head> <body> <div id="main"> <div id="logomenu"> <div id="logologin"> <div id="logo"><a href="./index.html"><img src="./hlavicka1.png" alt="Dota2" /></a></div> <div id="login"> <table align="center"> <tr> <td><span class="red">Jméno:</span></td> <td><input type="text" /></td> </tr> <tr> <td><span class="red">Heslo:</span></td> <td><input type="password" /></td> </tr> <tr> <td><input type="submit" value="Přihlásit se" /></td> <td><a href="@" class="registrace">Registrovat</a></td> </tr> </table> </div> </div> <div id="menu"> <ul> <li><a href="@">Úvod</a></li> <li><a href="@">DotA</a></li> <li><a href="@">Dota2</a> <ul> <li><a href="@">Hrdinové</a> <ul> <li><a href="@">Radiant</a></li> <li><a href="@">Dire</a></li> </ul> </li> <li><a href="@">Předměty</a></li> <li><a href="@">Tipy a Triky</a></li> <li><a href="@">HW nároky</a></li> </ul> </li> <li><a href="@">Turnaje</a> <ul> <li><a href="@">Amerika</a> <ul> <li>The International</a></li> </ul> </li> <li><a href="@">Evropa</a> <ul> <li><a href="@">Starladder</a></li> <li><a href="@">Premier Leadue</a></li> <li><a href="@">Raidcall ESM</a></li> </ul> </li> <li><a href="@">Čína</a> <ul> <li><a href="@">G-1 League</a></li> <li><a href="@">Super League</a></li> </ul> </li> </ul> </li> <li><a href="@">Galerie</a></li> <li><a href="@">Formulář</a></li> <li><a href="@">Kontakt</a></li> </ul> </div> </div> <div id="hlavni"> <div id="pravypanel"> <div id="novinky"></div> <div id="reklama"></div> </div> <div id="obsah"></div> </div> <div id="pata"></div> </div > </body> </html> |
||
Kubo2 Profil |
Dá sa to urobiť JavaScriptom, pomocou DHTML.
# HTML kód:<ul id="vysuvaci"> <li>Položka</li> <li>Ďaľšia položka</li> <li>Vysúvacia položka <ul> <li>Položka</li> <li>Položka 2</li> </ul> </li> <li>Ďaľšia vysúvačka <ul> <li>Vysunutá položka</li> <li>XXX</li> <li>YXY</li> </ul> </li> </ul> # JavaScript kód:var menu = document.getElementById("vysuvaci"); menu.onmouseover = (function (ev) { var omoEl = ev.toElement; if(omoEl.nodeName.toUpperCase()=="LI") { omoEl.children.item(0).style.display = 'block'; omoEl.children.item(0).onmouseout = (function () { this.style.display = 'none'; }); } }); # CSS kód:(iba ten najnutnejší, skryť vnorené zoznamy)ul#vysuvaci li ul { display: none; } |
||
krkus Profil |
#7 · Zasláno: 22. 5. 2013, 17:33:06
no rád bych, ale mohu použít jedině css
|
||
Kubo2 Profil |
krkus:
„mohu použít jedině css“ edit:// ale margin má pravdu, pomocou CSS sa dá ovplyvniť vzhľad podradených elementov, akurát ja som v CSS predsa len zisťujem, ešte stále nie taký zručný ako som si myslel, a nevedel som že sa dajú použiť také konštrukcie ako selektor podradeny-selektor :pseudotrieda > každé-dieťa-ktoré-je-priamym-potomkom-rodičovského-elementu { štýly }
Takže, prepáč mi to, moja chyba :( |
||
margin Profil * |
#9 · Zasláno: 22. 5. 2013, 20:14:41
Kubo2:
„No tak to máš smolu, pretože CSS nemá udalosti (napr. pri prechádzaní myšou nejakého elementu urob niečo s iným elementom)“ Pomocí CSS se dají ovlivnit vnořené elementy a pseudotřída :hover je v CSS odjakživa. krkus: Koukni na http://css.blbeckove.com/3.seznamy/3.resene-priklady.html, tuším, že hledáš "Horizontální menu, svisle rozbalovací, tříúrovňové", tak jich tam pár najdeš. |
||
Časová prodleva: 11 let
|
0