| 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: 13 let
|
|||
0