Jump to content

mmmartin123456

Members
  • Content Count

    12
  • Joined

  • Last visited

Community Reputation

0 Neutral

About mmmartin123456

  • Rank
    Newbie
  1. i m try change background <div> element ... better say only style... i still dont read all tutorial... but was say javascript can only change elements what exist... i try make something like this http://www.animedreaming.tv/ some small picture and if mouse at it.. change background HTML <div id="javaefects"><div id="icone"><img id="logo_1" class="logo" onmouseover="changeImage1()" src="pictureicone bro.png" alt="icone bro"><img id="logo_2" class="logo" onmouseover="changeImage2()" src="pictureicone sister.png" alt="icone sister"><img id="logo_3" class="logo" onmouseover="changeImage3()" src="pictureicone princes.png" alt="icone princes"><img id="logo_4" class="logo" onmouseover="changeImage4()" src="pictureicone ted.png" alt="icone ted"></div></div> java function changeImage1() { var element = document.getElementById('javaefects'); //element.background:url('picture/bro.png'); element.innerHTML = "THIS IS SPARTA";} CSS #javaefects{background:url('picture/no game no life.jpg');background-size:564px 250px;width:564px;height:250px;} with experiments, i know java rewrite all element and keep only setting what is use at CSS setting, i m use for image css setting and need change only line background:url('picture/no game no life.jpg'); QUESTEN1: can javascript enter at CSS file ??? i was see some example change properity like: image.src = "pic_bulbon.gif"; image.width="100" image.height="180" QUESTEN2: is posible change HTML background properity only ??? but keep others with CSS like: background-size:564px 250px;
  2. i testing layout make... for now in my opinion are 2 case make for universal DISPLEY RESOLUTION with auto change "width" value % second way is make like fixed value body {width:1000px} and math conting ... value PX HTML <!DOCTYPE html><html><head><meta charset="UTF-8" /><!-- --> <meta http-equiv="refresh" content="5" /> <link rel="stylesheet" type="text/css" href="styles.css" /><script src="Javascripts.js"></script><title>AnimeFan.wz.sk</title><meta name="keywords" content="animefan" /><meta name="description" content="animefan" /><meta name="author" content="mmmartin123456" /></head><body><header><div class="left"><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button></div><div class="midle"><p>Anime Fan Wellcome ALL</p></div><div class="clear"></div></header><div class="clear"></div><nav><a class="bar" href="sub.html">Home</a><a class="bar" href="#">News</a><a class="bar" href="#">Contact</a><a class="bar" href="#">About</a><div class="clear"></div></nav><section><div class="clear"></div><p id="testbar_1">ANIME LIST</p><ul class="list"><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li></ul></section><article><div class="clear"></div><div id="javaefects"><a href="#"><img src="pictureno game no life-4.jpg" alt="NO GAME NO LIFE"></a></div><div id="text"><h1>ARTICLE</h1><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsdasdsadasdsadadsdasdsadasdsadadsdasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p></div><div><br /><br /><br /><br /><p>This is a paragraph11safasfasfasdsadsadas<br />dsadasdsadadsadsadadsadsad1.</p></div></article><aside><div class="clear"></div><h1>CSS example!</h1><p>This is a paragraph222.</p></aside><div class="clear"></div><footer><h1>This web started:</h1><p>8.5 2014</p></footer></body></html> CSS body {margin-left:13%;margin-right:13%;/*width-max:1000px*//*margin:auto;*//*width:1000px;*/ /*width:80%;*/background:#470000 url("girl.jpg") no-repeat fixed center top; /*SHORTCUT*//*background-color:#ffffff;background-image:url("paper.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:center top; */}p{color:blue;margin-left:2%;}h1{color:black;}div.clear{clear:both;}header,section,article,aside,footer,div.body{background: -webkit-linear-gradient(left top, red,orange,yellow); /*duha*/background: -o-linear-gradient(left top, red,orange,yellow);background: -moz-linear-gradient(left top, red,orange,yellow);background: linear-gradient(left top, red,orange,yellow);border:1px solid gray;margin:15px 0% 15px 0%;padding:0% 0% 0% 0%;}header{width:100%;/*height:50px;*/}div.left{width:33%;float:left;}div.midle{width:33%;float:left;text-shadow:2px 2px #FFFFFF;}div.midle p{text-align:center;padding:0px 0px 0px 0px;color:black;font-size:1.5em;}nav{/*margin-left:15px;*/}a.bar /*GLOBAL BAR*/{float:left; /*ALLOW USE width*/width:24.8%; border:1px solid gray; text-align:center;}a.bar:link,a.bar:visited /*NORMAL LINK SEE*/{color:#FF0000; /*number #B2FF99 ,name red , ........*/text-decoration:none; /*none, underline, ........*/background-color:#dddddd; /*number #B2FF99 ,name red , ........*/} /*font-family:monospace; ........*/a.bar:hover /*WHEN MOVY WITH MOUSE AT*/{color:#FF0000;text-decoration:none; background-color:#B2FF99;}a.bar:active /*AFTER CLICK AT LINK*/{color:#FF0000;text-decoration:none; background-color:#B2FF99;}section,article,aside{width:20%; overflow:hidden;float:left;/*display:block;*/ }#testbar_1{margin-left:0px;text-align:center;padding:5px 0px 0px 0px;color:black;}ul.list li{margin:0px 40px 3px 0px;list-style-type:none;/*;*/background-color:#ffffff;text-align:center;}a.bar_1{text-decoration:none;color:black;}a.bar_1:link,a.bar_1:visited {text-decoration:none;color:black;} a.bar_1:hover /*WHEN MOVY WITH MOUSE AT*/{text-decoration:underline;color:#FF0000;}article{margin:15px 15px 0px 15px;padding:0px 0px 0px 0px; width:564px;}#javaefects{margin:0px;/*padding:2px;*/width:474px;height:240px;}#javaefects img {/*outline-style:dotted;*/border:10px solid gray;width:544px;height:250px;}#text{margin:40px 15px 15px 15px;padding:0px 10px 0px 0px;height:300px;overflow-y:scroll;word-break:break-all;}aside{float:left;}footer{/*clear:both;*/} at CSS look line a.bar { width:24.8%; border:1px solid gray; } here border cant make with value % .... value PX is diferent at DISPLEY RESOLUTION so is 2000x768 or 1366x768 or 1024x768 is diferent in number pixels mean border take other value space in web
  3. mmmartin123456

    zoom at page

    zoom can change size when are fixed add ??? i make config like body {margin:auto;width:1000px;}header,section,article,aside,footer,div.body{border:1px solid gray;margin:15px 0px 15px 0px;padding:0px 0px 0px 0px;}section,article,aside{width:200px;overflow:hidden;float:left;}article{margin:15px 15px 0px 15px;padding:0px 0px 0px 0px;width:564px;} it make like 1000px is MAX 2x200 + 1x564 + left and right margin 15 15 (30) + all have border 1... (1+1) x 3 = 1000 my web looking like corect... http://postimg.org/image/4ijbdb4mj/ but if use zoom... http://postimg.org/image/9ldggml99/ http://postimg.org/image/u7eddu01x/ http://postimg.org/image/5cuf04iur/ why it change posicion ? section,article,aside are midle... and if zoom aside change posicion
  4. i have problem make web size... if make fixed value like body {width:1000px} it make bad if someone have DISPLEY RESOLUTION under 1000... so solution for it make value with % ... instant px body { margin-left:13%; margin-right:13%; } with this make my body like center and make for others ELEMENTS BLOCK corect width but... if want for some BLOCK add border it is like shorthand border:1px solid gray; i cant use value at %... and here i get problem if make PX value i get others posicions if use diferent DISPLEY RESOLUTION 1px at 1000xXXX is like 1% and 1px at 2000xXXX is diferent... example i make like some ... BAR PANEL with 5 buttons... and use width:19.9%; it make in end some space... 0,1 for border whatever it dont make corect width not use 100%.. space... or take more like 100% and droped under button... like make second bar a.bar {float:left; width:19.8%; border:1px solid gray; text-align:center;color:#FF0000; text-decoration:none; background-color:#dddddd; } diferent DISPLEY RESOLUTION make diferent effect is some way fixed it for corect ?? border:1px solid gray; here i cant use value %.... or some example some already make layout posicions with some ELEMENTS BLOCK ???
  5. where i can use this ???? Or you can put quotes inside a string by using the escape character: var answer = 'It's alright'; var answer = "He is called "Johnny""; if it work too without and is corect displey <p id="demo"></p><script>var carName1 = "Volvo XC60";var carName2 = 'Volvo XC60';var answer1 = "It's alright";var answer2 = "He is called 'Johnny'";var answer3 = 'He is called "Johnny"';document.getElementById("demo").innerHTML = carName1 + "<br>" + carName2 + "<br>" + answer1 + "<br>" + answer2 + "<br>" + answer3</script> why is this in special charakters table code ? ' single quote " double quote
  6. i was read about something <meta> is for search engine... i use like this <meta name="description" content="animefan" /> but i cant find it in google :/
  7. i make bar, at left side.. i was see somewhere example like this in tutorial for make BAR <ul class="list"><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li></ul> i was add style ul.list li{margin-right:40px;margin-bottom:3px;list-style-type:none;/*;*/background-color:#ffffff;text-align:center;}a.bar_1{text-decoration:none;color:black;}a.bar_1:link,a.bar_1:visited {text-decoration:none;color:black;} a.bar_1:hover {text-decoration:underline;color:#FF0000;} when i use <ul> or <ol> it add specials charater, i was make them off (list-style-type:none;) i here have problem with CENTER LINKS when i was off specials charater, it dont off SPACE... mean: if use center it make with more space at LEFT side and less at RIGHT... i use <section> with padding:15px; for this block how much space (pixels) take <ul> or <ol> effect (list-style-type:none;)at left side ??? is possible off too space ??? i was use this command margin-right:40px; for make center... and second when i use LINKS i can setting 4 mode link, visited, hover, active are here some RULES When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited a:active MUST come after a:hover http://www.w3schools.com/css/css_link.asp if i define this like ... global all links it make like all others type will same ??? like down ??? a.bar_1 {} = a.bar_1:link, a.bar_1:visited, a.bar_1:hover, a.bar_1:active {} will corect if delete style a.bar_1:link,a.bar_1:visited if have already a.bar_1 setted ?
  8. hi i want make like off all elements <div> and only few myself element keep i was make like div{display:none; /*it off all elements....*/} and now i want few elements on div.visible{display:XXXXXXXXXXX;} i want off effect in all div.visible what properity can rewrite display:none; ??? or delete it ???
  9. again me... i m try make some ... sematic WEB for elements... <!DOCTYPE html><html><head><meta charset="UTF-8"><title>ANIMEFAN</title><style>body {margin:auto;width:1000px; /*width:80%;*//*background-image:url("paper.jpg");background-repeat:no-repeat;*/}p {color:blue;margin-left:20px;}h1{color:RED;}header,nav,section,article,aside,footer,div.body{border:1px solid gray;margin:15px;padding:15px;}section{float:left;width:200px;}article{clear:both;}aside{}</style></head><body><header><h1>CSS example!</h1><p>This is a paragraph.</p></header><nav><h1>CSS example!</h1><p>This is a paragraph.</p></nav><div class="body"><section><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p><h1>CSS example!</h1><p>This is a paragraph.</p></section><article><h1>CSS example!</h1><p>This is a paragraph.</p></article><aside><h1>CSS example!</h1><p>This is a paragraph.</p></aside></div><footer><h1>CSS example!</h1><p>This is a paragraph.</p></footer></body></html> i was read about <div> is use for make web looking good ... later i see in HTML5 about use commands this... <header><nav><section><article><aside><figure><figcaption><footer><details><summary><mark><time> what is diferent <div> and this others commands???? if i use this commands they are not support in some brosers ... dont is better use old way only with <div>???? i want help in code above with part <div class="body"> i want make like this http://www.w3schools.com/html/img_sem_elements.gif some folder at LEFT and orther 2 at RIGHT <article> and <aside> elements in style are use other type comments before it was in file... like: <link rel="stylesheet" type="text/css" href="styles.css"> and about BODY STYLE body {margin:auto;width:1000px; /*width:80%;*/} width what is better use ? SETTING VALUE or make it like auto with % for diferent ... Resolution like 1024x768 or 1366x768.... 800x600 and others and about margin:auto; i was read some is not support for all broser Note: Using margin:auto; will not work in IE8 and earlier, unless a !DOCTYPE is declared. is it ok, keep margin for auto ??? or is some better way ? and more one questen: about: <style>........</style> and .CSS file i was testing something like this body {margin:auto;width:1000px; /*width:80%;*/background-image:url("paper.jpg");background-repeat:no-repeat;background-position:center; } in both way in FILE and in HTML in HEAD here was a bit diferent in posicion background ... in HEAD AT HTML FILE was FULL PICTURE and IN FILE WAS CUTTING PICTURE A BIT... WITH TOP... is here more diference in THIS 2 WAY ???? (in others commands (?)) about use background what is best way and where ? how make background in CSS without cutting picture ?
  10. hi, in tutorial HTML5 HTML5 Form Attributeshttp://www.w3schools.com/html/html5_form_attributes.asp in example autocomplete Attributehttp://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autocomplete was write about will add value, what was before add ... i was try refresh and too button for again load example but it dont add value (what i put before)... i use broser GOOGLE CHROME in setting dont think i have off this effect... how it work ? and second thing, i was look this section HTML5 Input Types http://www.w3schools.com/html/html5_form_input_types.asp and i was find strangle thing Input Type: telThe tel type is used for input fields that should contain a telephone number. what doing this command ??? (when it dont is support for ANYONE BROSER ?????)
×
×
  • Create New...