Jump to content

terryds

Members
  • Posts

    174
  • Joined

  • Last visited

Everything posted by terryds

  1. This is my HTML <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"><title>My WebPage</title></head><body><div class="headerwrap"><div class="topbar"><a href="mysite" class="site"><h1>Title Site</h1></a></div></div></body></html>
  2. Hey, everyone... Can you please help me...My topbar isn't at the top This is the screenshot : See that? the black topbar isn't at the top... This is my code CSS body {margin: 0px;padding: 0px;background: url(files/batthern.png) #FF6600;} .headerwrap {height: 673px;background-image: -webkit-linear-gradient(top, #990000, #FF0033);background-color: red;padding: 0px;opacity: 0.7;} .headerwrap:hover {opacity: 1;} .topbar {height: 35px;background-color: black;opacity:1;} Any suggestions ? P.S. By the way please help me too on opacity
  3. Hello, everyone... I have set the opacity of my headerwrap (the red one) to 0.7, then automatically, my topwrap (the black one) also gets transparent... Look at this : This is my code : CSS body {margin: 0px;padding: 0px;background: url(files/batthern.png) #FF6600;} .headerwrap {height: 673px;background-image: -webkit-linear-gradient(top, #990000, #FF0033);background-color: red;padding: 0px;opacity: 0.7;} .headerwrap:hover {opacity: 1;} .topbar {height: 35px;background-color: black;opacity:1;} HTML <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"><title>My WebPage</title></head><body><div class="headerwrap"><div class="topbar"></div></div></body></html> Can you please me give the solutions so i can make the headerwrap get transparent but the topwrap wont.. ?Thank Sorry for bad English
  4. Good morning...I want to make a headerwrap like this site headerbar...Mine is below Can you make the red box placed at the top and cover all the width (like this w3schools forum's headerbar) This is the code i use .headerwrap {width: 100%;height: 50px;background-color: red;margin-left: auto;margin-right: auto;float: left;padding: 0px;} Thanks for any helps...
  5. Hello..Can someone please teach me how to change the <table> tag into <div> tag without changing the table style..I heard that <div> tag is more friendly than <table>.. Please give me an example.. Thank you..
  6. Hello guys.. I've a trouble in making a rainbow bokeh pattern as a background. Look at my code below : <!DOCTYPE HTML><html><head><style>body {/* Chrome */background-image:-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.14902) 30%, rgba(255, 255, 255, 0.298039) 32%, rgba(255, 255, 255, 0) 33%),-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.0980392) 11%, rgba(255, 255, 255, 0.298039) 13%, rgba(255, 255, 255, 0) 14%),-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.431373) 19%, rgba(255, 255, 255, 0) 20%),-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%),-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%),-webkit-radial-gradient(center, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.0980392) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%),-webkit-linear-gradient(45deg, rgb(52, 55, 2) 0%, rgb(24, 69, 0) 20%, rgb(24, 117, 70) 30%, rgb(0, 103, 130) 40%, rgb(11, 18, 132) 50%, rgb(118, 14, 161) 60%, rgb(131, 9, 110) 70%, rgb(132, 11, 42) 80%, rgb(177, 62, 18) 90%, rgb(226, 116, 18) 100%);background-attachment: initial, initial, initial, initial, initial, initial, initial;background-origin: initial, initial, initial, initial, initial, initial, initial;background-clip: initial, initial, initial, initial, initial, initial, initial;background-color: rgb(132, 11, 42);background-size: 470px, 970px, 410px, 610px, 530px, 730px, 100%;background-position: 0px 0px, 0px 0px, 0px 110px, -130px -170px, 130px 370px, 0px 0px;/* Firefox */background:radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) repeat scroll 0 0 / 470px 470px,radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) repeat scroll 0 0 / 970px 970px,radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) repeat scroll 0 110px / 410px 410px, radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) repeat scroll -130px -170px / 610px 610px,radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) repeat scroll 130px 370px / 530px 530px,radial-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) repeat scroll 0 0 / 730px 730px,linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0B1284 50%, #760EA1 60%, #83096E 70%, #840B2A 80%, #B13E12 90%, #E27412 100%) repeat scroll 0 0 / 100% 100% #840B2A}</style></head><body></body></html> The code is bad for firefox, very bad for chrome.. I don't know why it doesnt look like http://lea.verou.me/css3patterns/#rainbow-bokeh Can someone please fix the code for me, and make it better ?
  7. Hello all...Could you tell me the code to make the screen fading in when the page loads?It's like in santa-mars.blogspot.comThe screen fades in when the browser loads it.. For example, could you give me a code that the screen and a rectangle fades in when the browser loads the page ?
  8. Hello..I suggest that w3schools has a lesson concerning OOP in PHP..Coz i think it is also important in PHP programming
  9. Yeah.. That's working.. Thank you.. But, i have something to ask...I see that the second function of toggle is below.. function(){ $('div').eq(0).stop(true,true).fadeToggle(function() { $('div').eq(0).removeClass('show').addClass('hide') } ); $('div').eq(1).stop(true,true).fadeToggle("slow",function() { $('div').eq(1).removeClass('show').addClass('hide') }); $('div').eq(2).stop(true,true).fadeToggle(3000, function() { $('div').eq(2).removeClass('show').addClass('hide') }); Why is that different from this one below $('div').eq(0).stop(true,true).removeClass('show').addClass('hide').fadeToggle(); $('div').eq(1).stop(true,true).removeClass('show').addClass('hide').fadeToggle("slow"); $('div').eq(2).stop(true,true).removeClass('show').addClass('hide').fadeToggle(3000); } ); This code above isn't working.. Can you explain me why ? :D
  10. Could you tell me why this code isn't working : <!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ $("button").toggle(function(){ $('div').eq(0).fadeToggle(function() { $('div').eq(0).removeClass('hide').addClass('show') }); $('div').eq(1).fadeToggle("slow",function() { $('div').eq(1).removeClass('hide').addClass('show') }); $('div').eq(2).fadeToggle(3000, function() { $('div').eq(2).removeClass('hide').addClass('show') }); ) , function(){ $('div').eq(0).removeClass('show').addClass('hide').fadeToggle(); $('div').eq(1).removeClass('show').addClass('hide').fadeToggle("slow"); $('div').eq(2).removeClass('show').addClass('hide').fadeToggle(3000); }); });</script><style>.hide{display:block !important; visibility:hidden;}.show{display:none; visibility:visible;}</style></head><body> <p>Demonstrate fadeToggle() with different speed parameters.</p><button>Click to fade in/out boxes</button><br><br> <div class="hide" style="width:80px;height:80px;background-color:red;"></div><br><div class="hide" style="width:80px;height:80px;background-color:green;"></div><br><div class="hide" style="width:80px;height:80px;background-color:blue;"></div> </body></html>
  11. If i use that, the toggle won't work..Just give me a working code..I want to make the rectangle are invisible first, then when i click the toggle, it fades in and fades out without jumping up
  12. How to make it invisible at the first look ?
  13. But, the first visibility of the rectangles are visible.. How to make ithem invisible at the first time i see them?
  14. Hellooo.. :DCould you please tell me the difference between id and class?I think that it is the same..Take a look ! Using ID : <!DOCTYPE html><html><head><style>#center{text-align:center;}</style></head> <body><h1 id="center">Center-aligned heading</h1><p id="center">Center-aligned paragraph.</p> </body></html> Using Class : <!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head> <body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p> </body></html> I see there's no difference, but in w3schools.com,It says that The id SelectorThe id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#". The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.This allows you to set a particular style for many HTML elements with the same class.The class selector uses the HTML class attribute, and is defined with a "." But, i think the id selector can also be for a group of elements.. Please explain this !
  15. Could you please give the code for me?
  16. Hi, i want to ask about fadetoglgle in jQuery..See this <!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });});</script></head><body> <p>Demonstrate fadeToggle() with different speed parameters.</p><button>Click to fade in/out boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body></html> What i see first is the three rectangles are visible.. How to make it invisible ?So, when i click the toggle, it fades in and when i click the toggle again, it fades out.. How to make it?
  17. Hi, i wanna ask how to make a dropdown menu using bootstrap ?Tell me how to make it step by step ( coz i'm a newbie in javascript hehe..)Thanks for any helps
  18. Yeah it works.. But, what i want is to make it resume the stopped timer, not the present time..By the way, it's nice too
  19. Hey, everyone. :DCould you please help me on making a timer with a stop and resume function ?Look at this <!DOCTYPE html><html><body> <p>A script on this page starts this clock:</p><p id="demo"></p><button onclick="myStopFunction()">Stop time</button> <script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}function myStopFunction(){clearInterval(myVar);}</script> </body></html> That's a timer with a stop function.. Please tell me how to resume the timer ?
  20. terryds

    About classes

    Hey, everyone.. :DI want to ask something about classes..Can you tell me the difference between p class, span class, and other classes?Thx before
×
×
  • Create New...