TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
#4 peter
Tak tos mi fakt pomohl... Tyhle rádoby hrozně chytrý komentáře si nech. Vím jaký to je pomáhat druhým a to moc dobře. Jsem moderátor na fóru zaměřeném na Hardware, ale asi máš pravdu. Bude lepší poradit si sám a někde jinde než tady :) Díky moc za upozornění, že tady to patří ignorantovi ..
Příspěvky odeslané z IP adresy 78.156.40.–
Jakub
Jakub
#2 peter
To jsem zkoušel, jenže nevím, jak to mám skloubit s tím, že mi to písmo mění barvu. Bohužel to tu není vidět, ale použil jsem metodu, že mám světlý a tmavý text nad sebou v jednom obrázku. Při najetí na odkaz se obrázek posune o 50px dolů. Ale teď nevím jak mám na to dodělat prolínání. V javascriptu jsem nikdy nedělal. Doufal jsem, že by někdo poradil konkrétní postup :) Každopádně díky za radu. Zkusím ty odkazy :)
Jakub
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.
