Stránka 1 z 2
HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 20 dub 2013 12:06
od Veterans
Zdravím. Mám problém s týmto HTML/CSS/jQuery
http://www.extremestudio.ro/blog/how-to-create-a-clean-windows-8-animated-colorful-menu-with-html-css-and-jquery/Ide o to že mám portfólio na ktoré keď prídete tak sa Vám ukáže podobné menu (2/3 kocky) a s nich sa dostanete na rôzne weby. Lenže mám problém okým tam je originálne čierne pozadie tak je všetko OK lenže ja tam potrebujem dať obrázok .jpeg/png ktorý ma 3 farby (biela/šedá/čierna) keď ho tam vložím tak menu ide celkom dobre na to len je problém v tom že ak Vám ide to menu z Alfa/prehľadnosť 50% na 100% tak má ostať ale mne sa na tom pozadí (3 farebnóm) po cca pol sekunde stratí (myška ukazuje že tam tlačítko stále je ale nieje ho vidno. Môžete mi niekto poradiť ako to spraviť aby to tlačítko nemizlo??? Ďakujem.
Re: Problém s Menu.
Napsal: 20 dub 2013 15:46
od CZechBoY
zdravím,
nejlepší by bylo poslat odkaz na živý web nebo alespoň zdrojový kod html, css, js
Re: Problém s Menu.
Napsal: 20 dub 2013 19:38
od Veterans
HTML+SCRIPT:
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('.menu a').hover(function() {
$(this).stop().animate({
opacity: 1
}, 300);
}, function() {
$(this).stop().animate({
opacity: 0.3
}, 300);
});
});
</script>
<body>
<div id="pozadie">
<img src="obrazok.png" alt="pozadie" title="pozadie" width="1024" height="768" />
</div>
<div class="menu">
<br /><br />
<br /><br />
<a class="yellow" href="#">Home</a>
<a class="green" href="#">Blog</a>
<a class="pink" href="#">Write for Us</a>
<a class="purple" href="#">Themes</a>
<a class="blue" href="#">Portfolio</a>
<a class="orange" href="#">Contact</a>
</div>
</body>
</html>
CSS:
Kód: Vybrat vše
/* CSS Document */
*{
margin: 0;
padding: 0;
}
body{
background: #111;
color: #FFF;
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-size: 16pt;
}
#pozadie img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
a{
color: #FFF;
text-decoration: none;
}
.menu{
width: 570px;
margin: 30px auto;
}
.menu a{
width: 180px;
line-height: 180px;
display: block;
margin: 4px;
text-align: center;
float:left;
opacity: 0.3;
}
.yellow{ background: #fdd22a; }
.blue{ background: #009fe3; }
.purple{ background: #574696; }
.orange{ background: #ee7202; }
.pink{ background: #e61c67; }
.green{ background: #96c11f; }
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 20 dub 2013 22:55
od CZechBoY
pošli to pozadí ještě, mě to s nějakým pozadím z googlu funguje normálně...
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 21 dub 2013 09:18
od Veterans
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 16:24
od Veterans
Niekto/CZechBoY nič???
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 16:26
od CZechBoY
nevim, asi chyba prohlížeče
koukni se co, dělá ta jquery funkce, jestli tam někde neblbne
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 17:01
od Veterans
Nakoniec jquerry tam nieje..... Je to vraj len ces HTML/CSS ..... ale v IE, Mozila, GoChrome to robí to iste.
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 17:39
od CrazyC0de
No, jestli neví CZechBoY, tak na to těžko příjde někdo jiný....
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 18:35
od neudy
Ahoj!
Řešením by mohlo být zanoření menu do divu s id=pozadie. Následně bych ještě pozadí nevkládal přes tag img. Jde přece o pozadí, takže bych použil css a background-image:url('obrazok.png').
HTML kód
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('.menu a').hover(function() {
$(this).stop().animate({
opacity: 1
}, 300);
}, function() {
$(this).stop().animate({
opacity: 0.3
}, 300);
});
});
</script>
<body>
<div id="pozadie">
<div class="menu">
<br /><br />
<br /><br />
<a class="yellow" href="#">Home</a>
<a class="green" href="#">Blog</a>
<a class="pink" href="#">Write for Us</a>
<a class="purple" href="#">Themes</a>
<a class="blue" href="#">Portfolio</a>
<a class="orange" href="#">Contact</a>
</div>
</div>
</body>
</html>
CSS kód
Kód: Vybrat vše
/* CSS Document */
*{
margin: 0;
padding: 0;
}
body{
background: #111;
color: #FFF;
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-size: 16pt;
}
#pozadie {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
background-image:url('obrazok.png');
}
a{
color: #FFF;
text-decoration: none;
}
.menu{
width: 570px;
margin: 30px auto;
}
.menu a{
width: 180px;
line-height: 180px;
display: block;
margin: 4px;
text-align: center;
float:left;
opacity: 0.3;
}
.yellow{ background: #fdd22a; }
.blue{ background: #009fe3; }
.purple{ background: #574696; }
.orange{ background: #ee7202; }
.pink{ background: #e61c67; }
.green{ background: #96c11f; }
Ten obrázek na pozadí má rozlišení 1024 px x 768 px takže na monitorech s vyšším rozlišením to nebude vypadat kvůli opakování moc dobře :) V příloze posílám složku s mnou upravenými soubory.
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 20:17
od CZechBoY
pokud tam není jquery tak jak teda zprůhledňuješ tu položku menu?
dovolíš si upozornit na jednu (2) chybu: pokud máš někde dvakrát za sebou odřádkování (<br>) tak je něco špatně (pozicování je otázka CSS); pokud hned na začátku nějakýho bloku máš odřádkování, je to taky chyba, viz. předchozí věta
Re: HTML - Tlačítko menu se stane zcela průhledné*
Napsal: 22 dub 2013 20:22
od CrazyC0de
Á, no vidíš, toho <br> jsem si ani nevšiml, co třeba takhle : position: relative;top: 50px;, nebo margin ?
