Search the Community
Showing results for tags 'left'.
Found 4 results
-
I am making this pointless thing where there is a blue square and the left of it moves into the right until you cant see it, and then the right side moves right to form a square again. After that, it does the same thing, but down, then left, and then back up to the starting point. I can't figure out what's wrong with my code though. So far I have until it goes left, but it doesn't finish. Try this out so you understand better. <!DOCTYPE html> <html> <head> <title>Square Matrix</title> </head> <body> <img id="BlueSquare" src="http://www.pd4pic.com/images/blue-square-color-block-background-pure-unicode.png" style="position:absolute; left:100px; top:100px" height="300" width="300"> <script type="text/javascript"> var blueHeight = 300; var blueWidth = 300; var blueX = 100; var blueY = 100; var blueNegX = 400; var blueNegY = 400; setInterval (function squareMatrix() { if (blueX < 400 && blueY == 100 && blueHeight < 301) { blueX += 1; blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } if (blueX > 399 && blueY == 100 && blueWidth < 301) { blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX == 400 && blueY < 400 && blueWidth > 299) { blueY += 1; blueHeight -= 1; document.getElementById("BlueSquare").height = blueHeight; document.getElementById("BlueSquare").style.top = blueY + "px"; } if (blueX == 400 && blueY > 399 && blueHeight < 301) { blueHeight += 1; document.getElementById("BlueSquare").height = blueHeight; } if (blueX > 399 && blueY == 400 && blueHeight > 299) { blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX < 401 && blueY == 400 && blueWidth < 301) { blurX -= 1; blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } }, 10); </script> </body> </html>
-
Hello, Recently i faced a problem which seems very odd to me and I would like to find the answer or at least acceptable explanation. But let's go straight to it. Let's have two divs one inside the other - the code is something like: <div id="imgframe"> <div id="innercont" class="dragme"> <a class="marker" style="left: 1060px; top:658px;" onclick="movepos(1060, 658)"></a> </div></div><button type="button" onclick="displayattr()">Test</button> they are styled with css like this: #imgframe { width: 950px; height: 600px; overflow: hidden;}#innercont { width: 1994px; height: 1144px; position: relative; left: -600px; top: -300px;} And with javascript I am trying to find the top and left values of the #innercont. I have written the following functions: function getx() { var bg = document.getElementById("innercont"); var xs = bg.style.left; var x = Number(xs.replace("px","")); return x;}function gety() { var bg = document.getElementById("innercont"); var ys = bg.style.top; var y = Number(ys.replace("px","")); return y;}function displayattr() { var sum = getx() + ", " + gety(); alert(sum);} Everything so far seems fine, but when I use displayattr() just after the page has been loaded it returns 0, 0. The code works fine when I use javascript to set the position of the #innercont: function reset() { var bg = document.getElementById("innercont"); bg.style.left="-600px"; bg.style.top="-300px";} They say that element.style.top sets or returns the top position of a positioned element, but it appears that it is not the same if we set the position by using css or javascript. So far I have managed to solve the problem by using "getComputedStyle" or adding onload="reset()" to the body tag but I don't want to use either since they mess my code later. If anyone has an explanation why does it happen so I'll be very grateful. Thanks in advance.
-
Hi there! I was just wondering, there is a theme named 'Tetris' for wordpress. (Link) When posts are placed they float to the left and line up to the top neatly. Well currently i am creating a wordpress based website, and on the pages i use '#homediv' to id the div's that i want to do the same. Problem with how i coded it: they do float left, but do not line up to the top... I tried to search the code of 'Tetris' how they manage to do it, but couln't figure it out. If you know how to make this happen please tell me (and the others that search for the same problem on Google and land here). Code as it is now: /*CSS OF HOMEDIV:*/ #homediv { width:45%; min-width:180px; float: inherit; border:solid 1px #7D1517 ; margin:1%; border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; -o-border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; -o-border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; padding-bottom:15px; } #homediv h5 { text-align:center; background:#7D1517; color:#FFF; } #homediv h6 { margin-left:3%; margin-right:2%; } #homediv p { margin-left:2%; margin-right:2%; } Image example: As you see, they do not line up to top. Thanks in advance! - Marcel
-
I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?
