Search the Community

Showing results for tags 'position'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 35 results

  1. Hello, I try to place meshs on sphere depending on their rank in a json file. I am looking for a way to define the position of my meshs in my loop in order to prevent them to be created on each other. function onMouseGauche(event) { event = event || window.event; if (event.button == 0) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // update the picking ray with the camera and mouse position raycaster.setFromCamera(mouse, camera); // calculate objects intersecting the picking ray var intersects = 0; intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { if (intersects[0].object.userData.bool != true) { // Scalar = Scalar + 400; Scalar = Scalar / 1; Scale = Scale / 1; console.log(intersects[0].object.userData) if (intersects[0].object.userData.children) { var loop = 0; intersects[0].object.userData.children.forEach(function(element) { var sphereMaterial2 = new THREE.MeshBasicMaterial({ color: element.group }); var mesh = new THREE.Mesh(sphereGeometry, sphereMaterial2); var phi = ( 2 * Math.PI) var theta = (2 * Math.PI) var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; var z = Math.random() * 2 - 1; // if (loop == 0) { // var x = Math.random() * 2 - 1; // var y = Math.cos(theta) * Math.random(); // var z = Math.cos(phi) * Math.random() // } // if (loop == 1) { // var x = Math.cos(phi) * Math.random(); // var y = Math.random() * 2 - 1; // var z = Math.cos(theta) * Math.random() // } // if (loop == 2) { // var x = Math.tan(phi) * Math.random(); // var y = Math.tan(theta) * Math.random(); // var z = Math.random() * 2 - 1 // } mesh.position.x = x; mesh.position.y = y; mesh.position.z = z; mesh.userData.children = element.children; mesh.userData.name = element.label; mesh.userData.rang = element.rang; mesh.position.normalize(); mesh.position.multiplyScalar(Scalar / element.rang); mesh.scale.set(Scale / element.rang, Scale / element.rang, Scale / element.rang) mesh.position.x = mesh.position.x + intersects[0].object.position.x; mesh.position.y = mesh.position.y + intersects[0].object.position.y; mesh.position.z = mesh.position.z + intersects[0].object.position.z; console.log(element) scene.add(mesh); // lines var material = new THREE.LineBasicMaterial({ color: 0xffffff }); var geometry = new THREE.Geometry(); geometry.vertices.push( intersects[0].object.position, mesh.position ); var line = new THREE.Line(geometry, material); scene.add(line); intersects[0].object.userData.bool = true; loop = loop + 1 }); } } } } // ajouter position de caméra actuelle camera.userData.push([Math.round(camera.position.x), Math.round(camera.position.y), Math.round(camera.position.z)]) } Here is the function that draw the sphere meshs. How can i define my coordinates more efficiently? Thank you
  2. Hey there, So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great! To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">&#8226;</a> <a class="imageAnchor" href="#test-image-two">&#8226;</a> <a class="imageAnchor" href="#test-image-three">&#8226;</a> <a class="imageAnchor" href="#test-image-four">&#8226;</a> </li> </ul> <div class="gallary"> <div class="container"> <div id="test-image-one" class="image"></div> <div id="test-image-two" class="image"></div> <div id="test-image-three" class="image"></div> <div id="test-image-four" class="image"></div> </div> </div> </section> <footer></footer> </body> </html> CSS: html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: visible; } .gallary .container { width: 1000px; position: relative: } .image { width: 50px; height: 50px; margin: 35px; background-color: grey; display: inline-block; position: absolute; left: 120px; transition: left .1s linear; } #test-image-one { background-color: pink; } #test-image-two { background-color: green; } #test-image-three { background-color: purple; } #test-image-four { background-color: blue; } .image:target { left: 0; } Thanks for any help!
  3. For whatever reason, anytime I use "position: sticky" in whatever form whether it's browser supported or through the Stickyfill.js it breaks the w3-bar navigation menu. w3schools.com obviously has a way to make it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON and the menu button clicks but the dropdown content is not displayed. Or at the very least it's not visible if it is. http://dev.daellusknights.com/index.html <-- Sticky ON (broken) http://dev.daellusknights.com/index2.html <-- Sticky OFF (works) Is this a known issue or am I just missing something. Currently working with MS Edge and latest Chrome on Win 10 Pro (dev)
  4. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  5. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  6. Hi all I have a html code: <a href="link" > <img style="position:absolute; top:400px; left:150px; width:200px; height:100px" src="images/funk.jpg" /> </a> I want to write a text below this image. How can i do this? Regards
  7. I know there are a lot of topics out there about the CSS position: fixed not working, but those solutions do not work for me. Here is the CSS code: #slideshow{ height: 200px; width: 1308px; background-color: #dbdbdb; top: 800px; left: -100px; border-style: solid; border-color: #b0adb0; border-width: 03px; position: fixed; } In the screenshot (slideshowDIVhidden), the div is supposed to show up between the very top box and the two bottom boxes, while still being still relative to the viewport. When it is hidden, this is because the position: fixed; code is on. The slideshowDIVshown is what it is meant to look like (doesn't use position: fixed;) but is not relative to the viewport, and for some reason, I cannot move it. The slideshow DIV is not a "child" DIV. Any ideas how to fix the position: fixed, and why the div won't move?
  8. Hey, so this is my code: <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src='script.js'></script><style>.character{ height: 10px; width: 10px; background-color: red; margin-top: 50px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.character2{ height: 10px; width: 10px; background-color: blue; margin-top: -16px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.outerbox{ width: 400px; height: 400px; border: 2px solid black;}.innerbox{ width: 200px; height: 200px; border: 2px solid black; margin-left: 95px; margin-top: 20px;}</style><script>$(document).ready(function(){ var thing = $(".character"); var position = thing.position(); var thing2 = $( ".character2" ); var position2 = thing2.position(); if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } if (e.keyCode == 38){ $('.character').animate({top:'-=30px'}, 200); } if (e.keyCode == 39){ $('.character').animate({left:'+=30px'}, 200); } if (e.keyCode == 40){ $('.character').animate({top:'+=30px'}, 200); } if (e.keyCode == 65){ $('.character2').animate({left:'-=30px'}, 200); } if (e.keyCode == 87){ $('.character2').animate({top:'-=30px'}, 200); } if (e.keyCode == 83){ $('.character2').animate({left:'+=30px'}, 200); } if (e.keyCode == 90){ $('.character2').animate({top:'+=30px'}, 200); } if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } });});</script></head><body> <div class = "outerbox"> <div class = "character"></div> <div class = "character2"></div> <div class = "innerbox"> <p id = "thing">Hello</p> <p id = "other"></p> <p id = "other2"></p> <p id = "collision"></p> </div> </div></body></html> What I want to do is for something to happen when the positions of the two character divs are the same, but I am not quite sure how. Please help.
  9. Hi all, I want to know, where should i use css position property instead of using float left and right, inline block etc. Is there any benefits to use css absolute value property?
  10. I would appreciate your help with layering a widget title with a background over a slider. The demo site appears here: http://acceleratedpowermarketing.com/reicher/ I want it to look like this: http://www.standrewsch.org/ Where the bar with the title doesn't move when the screen is zoomed. Using this code, I'm able to get it to look like I want if it's zoomed at the correct place. Otherwise the bar, is out of place. I want to learn how to do this with blocking if that is possible and will solve the problem. Thanks #it_widget_content-5 .widget-title { background: url("images/Home-Page-Banner.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; font-size: 2em; font-weight: normal; padding: 0.35em 0.5em; position: absolute; right: 15%; text-indent: 0; top: 30%; z-index: 995; }
  11. I have a piece of CSS as following (in order to align a div vertically center) #center { position:relative; height:200px; width:500px; top:50%; margin:-100px auto 0px auto; border-radius:10px; border:1px solid white;} In Chrome, it works well, as in the first illustration: but in Firefox, it's displayed as following: Please, explain to me the reason of the issue. You can check this issue in your browser by link: http://thichtomo.com/example/
  12. Hi guys. I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve: 1. Navbar on top. 2. Content with no margin to the navbar. 3. Footer just below the content, no margin. 4. Show the whole page on the screen without the need to scroll. 5. No change in the navbar-content-footer connection when zooming. 6. Keep the footer to the bottom, and keeping content from bleeding into the footer. Thanks for your time! HTML <!DOCTYPE html><html><head> <title>NAME</title> <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <!-- check if screen is no more than 480: if( screen.width <= 480 ) { location.href = '/mobile.html';}--> </style></head><style> body { background-color: blue; background-repeat: no-repeat; background-attachment: fixed; background-position: left; background-size: cover; } li#nameofmine a p{ border-bottom: 1px solid white; font-weight: 700;} li#nameofmine:hover > a p{ color: black; border-bottom: 1px solid black;}</style><body> <div id="wrap"> <div id="main"> <nav> <ul> <li id="nameofmine"><a href="#"><p>NAME</p></a></li> <li><a href="#"><p>Read</p></a></li> <li><a href="#"><p>Listen</p></a> <ul> <li><a href="#"><p>Videos</p></a></li> <li><a href="#"><p>Recordings</p></a></li> </ul></li> <li><a href="#"><p>Look</p></a></li> <li><a href="#"><p>Contact</p></a></li> </ul> </nav> <div id="flags"> <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a> <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a> </div><div id="leftbar"> <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div> </div> </div></div> <footer> <p>© Copyright 2014 NAME. All rights reserved.</p> </footer> </body></html> CSS html {height: 100%}body{ font-family: 'open sans', 'courier'; font-size: 16px; color: white; text-align: center; margin: 0; font-weight: 100; height: 100%;}body a{ color: white; text-decoration: none;}h1{ font-size: 5em; line-height: 0.2em; color: white;}h3{ font-size: 18px; font-weight: 100; color: white; text-align: center; text-decoration: underline;}h2{ font-size: 20px; font-weight: 100; color: white;}#wrap{ min-height: 100%;}#main{ overflow: auto; padding-bottom: 3em; }#flags{ height: 2em; width: 6em; position: absolute; right: 0%; top: 0%; font-size: 16px;}#flag1{ height: 2em; width: 49%; float: right; border-left: 1px solid white; background-size: cover; background-position: center; background-color: red;}#flag2{ height: 2em; width: 49%; float: left; background-size: cover; background-position: center; background-color: green;}#flag1:hover{ opacity: 0.5;}#flag2:hover{ opacity: 0.5;}nav ul { position: relative; width: 100%; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; color: white; font-family: 'Open Sans'; font-size: 16; background-color: rgba(255, 255, 255, 0.3); }nav ul li{ text-align: center; display: inline-block; position: relative;}nav ul a{ display: inline-block; float: none; padding: 1em 3em; letter-spacing: 1px; color: #eaebed;}nav ul li:hover > a{ color: black;}li#nameofmine{ text-align: center; display: inline-block; }li#nameofmine a p{ display: inline-block; float: none; font-weight: 700; color: white;}li#nameofmine:hover > a p{ color: black;}*html nav ul li a:hover/* IE6 */{ color: #000;}nav ul li:hover > ul { display: block;}/* Sub-menu */nav ul ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 99;}nav ul ul li { float: none; margin: 0; display: block;}nav ul ul li:last-child { box-shadow: none;}nav ul ul a { padding: 0.2em 1em; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;}*html nav ul ul a { /* IE6 */ height: 10px; width: 150px;}*:first-child+html nav ul ul a { /* IE7 */ height: 10px; width: 150px;}nav ul ul a:hover { }nav ul ul li:first-child a { }nav ul ul li:first-child a:after{ content: ''; position: absolute; left: 45%; top: -10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after { border-bottom-color: black; }nav ul ul li:last-child a { }/* Clear floated elements */nav ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{ float: left; left: 0; top: 0; width: 20%; height: 100%;}#news{ height: 100%; width: 98%; margin-left: 2%; border-left: 0px; border-top: 0px; border-right: 1px; border-bottom: 0px; border-color: white; border-style: solid; font-weight: 100; text-align: left; overflow: auto;}footer{ height: 3em; width: 100%; background-color: rgba(255, 255, 255, 0.3); text-align: center; clear: both; position: relative; margin-top: -4em;}
  13. I have a problem When I put a background image and after I put a padding value The position of the pictures changes. I do this: .actual { height: 255px; width: 805px; margin-left: 329px; margin-top: -255px; background-color: #555555; position: absolute; background-image: url(imagens/menu_actual_02.jpg); padding: 20px; } how I can fix this?
  14. Hi there!!Is there any way to find the absolute position of an element? (Element.offsetTop, Element.style.top etc, are all give the relative position of the element related to its parent element).Thanks in advance!!Atar.
  15. Hello, a complete beginner here - I have just built my first website, but to my horror I realized that if I view it with another screen resolution, or on someone else's computer, it changes the whole appearance of the site, esp. the flow of the paragraphs, often to a very ugly result. Images start to overlap paragraph, and paragraphs suddenly look extremely narrow. I am happy to restructure the website, (built in html without Dreamweaver's help) but have no idea how - especially how to make the main structure adjust to different views (larger/smaller screens, i-pads etc) Thank you! You can view the website and its source here - http://www.aidanandrewdun.com/ I'd be grateful if you viewed the page source and let me know what I've been doing wrong.
  16. I want to make a site, with a wrapper centered on the screen, with contnet in the wrapper.This works with plain text in the wrapperhttp://www.captain-africa.com/CSSProblem...This works well. Now i want to positionthe content in a specific place: the wrapper does not reacht the bottom of the pageThis happens if want want to position content in a div-containerhttp://www.captain-africa.com/CSSProblem...As you can see, if you scroll down, things go wrong.What did i do wrong?
  17. Hi!I am working at a wordpress theme and I have a problem that I can't figure out.This is the the HTML code I have: <!-- this is in the header.php file --> <div class="logo"> <div class="logo-inner"> <a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a> <span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span> </div> </div><div id="page-wrap"> <div class="content"><!-- this is in index.php, single.php, page.php and so on --><div class="leftside-content"><!-- the loop here --></div><!-- and this is in the footer.php file --></div><?php get_sidebar(); ?> <div id="footer"> <center>©<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/> <?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center> </div></div> And here is my CSS code: #page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;top:100%;clear: both;position: absolute;z-index: 10;} I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer, I also put the footer div after the page-wrap div.Here is a picture of the design with the current code: Thanks in advance for your help!
  18. I have been struggling on this for a while now, I cant get my images to position correctly. My header image need to be centred and my buttons need to sit underneath next to each other neatly. Please help :-) its on my booking form. http://www.sunseavip.co.uk or direct link http://www.sunseavip.co.uk/booking/index.php
  19. The website is www.cleantelligent.com/tour/This image, as a background, has tooltips and links on it.The issue is that, if you re-size the window, the image and title (the main div, I think) moves left and right. This means that the "Take the Tour" sub-head isn't always aligned perfectly underneath the "Tour" Title in the black bar above. They should be lined up down the left so that the image is centered underneath the header content.Is it my positioning that's causing this? If so, how can I fix it? I've tried positioning it absolutely, but that collapses the page and the footer pops up to the middle.Any ideas would be helpful. Thanks!
  20. I'm trying to implement the sliding transparent overlay on my sight but I'm having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved? This is what I'm trying to emulate.......http://www.daphnes-restaurant.co.uk/general-information/ Here's my website.........http://www.galu.co.uk/newsite/goforitg.html The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object on window re-size. If that makes sense.
  21. Possible with CSS/JS?? WITHOUT jQuery !!! Hi, I need a technique to have a special position of elements inside of scrolling elements. For instance: many words ordered alphabetically in a scrollable container beside the list appears the actual First Letter at the top level of the first word with this letter ...but max. at top of the scrollable box scrolling by user moves the next First Letter closer to the previous one and pushes it sometime out of the box WITHOUT jQuery !!! Thanks for your help. My base code: (without the needed functionality) <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Mover</title> <style> body > div { width:200px; height:300px; overflow-y:scroll; border:1px solid red; } body > div > ul > li > div { float:left; width:50px; height:50px; background:#69c; } body > div > ul > li > p { margin-left:60px; } </style></head> <body> <div> <ul> <li> <div>A</div> <p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p><p>Anton</p> </li> <li> <div>B</div> <p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p><p>Berta</p> </li> <li> <div>C</div> <p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p><p>Clara</p> </li> </ul> </div></body></html>
  22. Hi everyone, I'll keep this short. And I appologise in advance because I'm sure this problem has been solved before (I just can't seem to figure it out). I am not great with HTML but I would say I'm decent. The first picture you can see my header goes the full 100% width. The second picture shows that if you minimize the browser so that you have to horizontally scroll that the header disappears behind the navigation. If you want you can go to my site now and test it out (It's still being created so bare with me). www.bbeckwithdesign.com I want the header to always be at the top with the navigation (not fixed where it stays at the top of the window, but instead at the top of the page) I want the header to always be 100% width of the page no matter what size. I guess I should also mention I want my navigation and title along with my main body to be relative where they stay centered on the screen (960px) One last thing, my favorite icon work on all browsers except for IE. Any code snippits that would take care of that??? Thanks for the help guys. Brad B.
  23. Hi all, I'd need to position two background-images in one element seperately.Is this possible in css3? E.g: I've got a div and two background images. Now I'd need to position them seperately. One images in the left, the other one in the right corner. Thanks! Raphael
  24. Hi all. I'm pretty new to web design with CSS, so bear with me if this is a really basic question. I'm having trouble getting my positioning right. Here's the webpage so far:http://studentaccess...site/index.html I want the tabs to sit on top of the image. Even though they are before the <div id="content"> part in my HTML, they are still overlapping the image, as you see.I also want them to be flush with the left edge of the image (which is centered). Here's the relevant part of the HTML:<body bgcolor="#EDEDED"> <div id="header"><p><span id="title"> AVA </span><br> my challenge for the 2013 year is to record one original song or musical piece per month.</p></div> <div id="Tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions </a></li><li><a href="Covers.html">Covers </a></li><li><a href="hire.html">Hire AVA to sing </a></li></ul> </div> <!– End of Tabs Div –> <div id="content"> <div id="Content_Area"><p>...the text...</p></div> <div id="followbox">links to RSS feeds, etc., here</div></div> <!-End of content-> </body> And the relevant CSS:body {font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;} #Tabs {display: block;position: relative;margin: 0;margin-right: auto;margin-left: auto;} #Tabs ul {padding: 0px;list-style-type: none;} #Tabs ul li {display: inline-block;clear: none;float: left;} #Tabs ul li a {position: relative;margin-top: 0px;display: block;margin-left: 5px;line-height: 1em;padding-left: 10px;background: #f6f6f6;border: 1px solid #ccc;border-bottom: 0px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;/* end of rounded borders */ width: 150px;height: 50px;color: #000000;text-decoration: none;font-style: italic;} #Tabs ul li a:hover {text-decoration: underline;} #content {background-image: url(images/bg_image_med.jpg);background-repeat: none;border: 1px solid #000000;height: 500px;width: 900px;margin-left: auto;margin-right: auto;} #Content_Area {padding: 15px;overflow: hidden;position: relative;width: 620px;height: 500px;overflow: hidden;} p { padding: 15px; } What am I doing wrong?Thanks in advance!
  25. I seem to be having problems positioning my background image and colors. body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x; } That is the current code. Right there in chrome and firefox, the image "blinder1.png" is normal. However, as we all know, this is just going to repeat across the top of the page from left to right. Whenever I add the following stipulation background-position:bottom; it seems to warp the image to a fraction of its' size, let alone not align to the "bottom" of the page. Using the left, it still warps the image but not as much. The latent function, the image warping, is really not a main issue for me right now. I am really wondering how to properly align my image across the bottom of the page. I have used the search function, and searched for about an hour or more today but I havent seen any documentation anywhere about this happening. Can anyone help?