TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Zdravím. V CSS umím takové ty základy a chtěl bych se naučit, jak vytvořit FADE IN/OUT efekt. Česky postupné hasnutí nabídek. Našla by se nějáká dobrá duše co by poradila ? Zkoušel jsem to sám, ale nikdy se mi to nepovedlo napasovat přímo na můj web(na kterém se učím)
CSS:
#body {
margin: 0;
font-family: Arial, Verdana, sans-serif;
font-size: small;
margin: 0;
}
#obal {
width: 1024px;
margin: 0 auto;
position: relative;
}
#zahlavi {
width: 100%;
height: 150px;
background-image: url("zahlavi_hover.png");
}
h1 {
margin-top: 0;
display: none;
}
h2 {
margin-top: 0;
}
a {
display: block;
}
a:hover {
background-position: 0 -150px;
}
#obsah {
width: 75%;
float: left;
background-image: url("obsah_poz_velke.png");
background-repeat: repeat-y;
min-height: 1000px;
}
#panel {
width: 25%;
float: right;
background-image: url("panel_poz_1_mod.png");
background-repeat: repeat-y;
min-height: 1000px;
margin: 0;
padding: 0;
}
#panel li {
list-style-type: none;
height: 50px;
width: 256px;
}
#panel ul {
margin: 0;
padding: 0;
}
#panel a {
display: block;
width: 256px;
height: 50px;
}
#p-novinky {
background: url(Menu/novinky.png);
}
#p-projekty {
background: url(Menu/projekty.png);
}
#p-historie {
background: url(Menu/historie.png);
}
#p-kontakt {
background: url(Menu/kontakt.png);
}
#panel a:hover {
background-position: left -50px;
}
#panel a span {
display: none;
}
#panel h2 {
display: none;
}
#menu h2 {
display: none;
}
#menu ul {
width: 1024px;
height: 50px;
float: left;
padding: 0;
margin: 0;
background-image: url("menu.png");
list-style-type: none;
}
#menu ul li {
float: left;
}
#menu a {
display: block;
color: black;
font-size: 105%;
font-weight: bold;
text-decoration: none;
padding: 5px 20px;
}
HTML:
<body id="novinky">
<div id="obal">
<head>
<link rel="stylesheet" type="text/css" href="s_index.css">
</head>
<div id="zahlavi"><a id=zahlavi href=novinky.html> <h1>Scherby webdesign</h1></a></div>
<div id="menu"> <h2>Navigace:</h2>
<ul>
<li> <a href="http://www.seznam.cz/">Seznam 2010</a> </li>
<li> <a href="http://www.seznam.cz/">Seznam 2011</a> </li>
<li> <a href="http://www.seznam.cz/">Seznam 2012</a> </li>
<li> <a href="http://www.seznam.cz/">Seznam 2013</a> </li>
</ul>
</div>
<div id="obsah"> <h2>Novinky</h2>
<p>28.10.2014</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula venenatis, posuere nulla nec, ultrices elit. Phasellus at leo a nunc lobortis rutrum. Duis a hendrerit purus. Quisque neque eros, gravida eu elit ac, pharetra elementum lectus. Pellentesque a tempor nisl. Vestibulum in augue nec massa egestas vestibulum sed ac neque.
<br> Donec in nisl vitae diam venenatis sollicitudin. Vivamus in nisi in est porta efficitur. Sed eleifend cursus augue non aliquet. In egestas finibus sem, non cursus velit posuere non. Duis vel rutrum diam. Quisque justo leo, sodales et suscipit in, euismod a ipsum. Suspendisse laoreet consectetur porta. Donec eleifend erat ligula, at egestas dolor
<br>sagittis a.
</p>
<endora>
</div>
<div id="panel">
<h2>Postraní panel</h2>
<ul>
<li> <a id="p-novinky" href="novinky.html"> <span>Novinky </span> </a> </li>
<li> <a id="p-projekty" href="projekty.html"> <span>Projekty </span> </a> </li>
<li> <a id="p-historie" href="historie.html"> <span>Historie </span> </a> </li>
<li> <a id="p-kontakt" href="kontakt.html"> <span>Kontakt </span> </a> </li>
</ul>
</div>
</div>
</body>
Potřeboval bych to v ID "PANEL". Každá položka má přiřazené své vlastní id, protože místo textu jsem použil obrázek. Pokud by to šlo vyřešit nějak jednodušeji, jakože to určitě půjde, nebráním se tomu. Používal jsem jen selský rozum.
Nahlásit jako SPAM
IP: 78.156.40.–
Zjistit počet nových příspěvků
