Search the Community
Showing results for tags 'positioning'.
Found 14 results
-
How do you center/position a <script></script> within HTML5?
h2ochip.com posted a topic in Critiques
I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance. -
I have a site where I fetch a list of jobs from MYSQL and display them on the page. At the end of the row for each job I have a button that has a drop down menu, unique to the user. All this works fine, but if the lines of jobs get near the bottom of the page, the drop down menu goes off the screen and I cannot scroll up to see it. I need to make the position of the drop down menu change automatically depending on its position on the page. Can this be done in CSS or must I now go and learn javascript? You feedback will be most appreciated! Thank you. I am using W3Schools drop down menu script and it works perfectly well (thank you!) <div class="dropdown"> <button class="dropbtn">Options</button> <div class="dropdown-content"> Menu items go here </div> </div> This is the CSS (from W3) /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: fixed; top: 1; /*right:50px;*/ background-color: #f9f9f9; min-width: 220px; overflow: auto; /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); */ z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { padding: 2px 2px; text-decoration: none; display: block; } /* specify colour of headings as opposed to line items */ .dropdown-content span { background-color: #0000C1; color:#FFFFFF; font-weight:bold; padding: 2px 2px; text-align:center; text-decoration: none; display: block; }
-
Dear All: In a W3school's tutorial is this tip: Tip: When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers. Do we still need to do this if we have already declared the margin and padding for the whole page, e.g. *{margin: 0; padding:0;} and why?
-
Hello all, Context: I work at a small print shop; I'm in charge of my company's online storefronts where customers can order printed goods. We use EFI Digital StoreFront and just got a new extension/program/plugin called Directsmile that lets us offer products with variable data and mailing lists. The program works with InDesign; I build the art file in InDesign and Directsmile links to InDesign to add variable data fields to InDesign's text fields and image frames. When multiple data fields are used together, their rules need to be defined so if one field is not used, the others will move up to fill in the gap. Extra characters like divider characters and phone number labels (eg. "fax 123.456.7890") are also defined in the rules, so they only appear when the associated field is in use. I define those rules using Directsmile. I can choose to either use the built in tool to define the boolean properties of the variable data fields, or for more complicated formatting, I can use javascript. See below for an example of how phone numbers are formatted on a business card: The Problem: The people who designed Directsmile figured that if somebody wanted to use variable data for an image, it was going to be fixed in one place, and wouldn't be positioned in relation to the other fields. Directsmile supports variable data images placed in fixed positions on the page, and it supports very flexible variable data text with positioning relative to other variables in the same text box, but it does not support image frames inserted into text boxes. When I try it, the image frame vanishes. Because of this, there is a problem with variable images inserted between sections of variable text: The customer can choose to fill in any of the fields, or none, so the positioning of every element varies with each data merge record. I can't put the image inside the text box; they have to remain as independent elements. But as independent elements, they will not be placed properly on the page; the image will remain entirely static, and text that runs too short will leave a gap where text that runs long will run over/behind the image. Also, if the customer chooses not to use the image field, the second section of text will be orphaned down the page instead of moving up to fill in where the image would have been. The Solution? The only potential workaround I can think of would be to use js on a text box (like the "numbers" field in the business card example) to define: -placement of text and image -if there is an image, then insert appropriately sized space between sections of variable text -if there is text above the image, the image is moved down the page one line height for every line of text above Except, I don't know how to use javascript to place an image, or how to position it according to how many lines of text are preceding. I don't even know if that's possible. If I could be pointed in the right direction, I would be so grateful. I'm a print designer, not a programmer; I consider myself proficient at HTML and CSS but javascript is like trying to read a foreign language- I can pick up on the gist of things, but I have a LOT of difficulty writing it and knowing exactly what each bit does. I am learning, but commerce waits for no man and I will likely need a solution before I can come up with one independently so I'm trying to head this off. I've already talked to product support for help, and they didn't know of a way to achieve this, though they couldn't think of anybody who'd ever tried it, either, so I would really appreciate any help or tips you could give me. I'm sorry I don't have any script to show for this particular project, but I don't even know where to begin! Please bear with me in my ignorance. I know this is a really weird application of javascript and it doesn't help things any. Thank you all for reading that wall of text, and for any assistance!
-
So, yeah, I want to know your style. Maybe I can optimize mine from it. Here's mine:HTML <div id="wrap"> <div id="menu"> <a class="button" href="main.html" class="button">Button 1</a> <a class="button" href="" class="button">Button 2</a> <a class="button" href="" class="button">Button 3</a> <a class="button" href="" class="button">Button 4</a> </div></div> CSS #wrap { text-align: center; margin-top: -7px;}#menu { display: inline-block;}.button { background-color: #000000; color: #FFFFFF; width: 100px; padding: 5px; text-align: center; text-decoration: none; float: left;}
-
I'm having some trouble getting this picture of mars and the main links surrounding it to be positioned correctly. I've surfed the web for hours trying to find a solution, but I just can't. I assume it's something to do with the css and they way I've declared their positions, but I can't pinpoint it exactly. I've tried using both absolute, fixed, relative positioning, and changing the offsets from percentages to pixels and everything like that (including setting the overflow to scrolled and hidden etc), but still no luck. It looks fine on my monitor, but when I go to another computer or resize my browser, it acts up in unwanted ways. Can anyone help? Relevant HTML: <html><head><link type="text/css" href="main.css" rel="stylesheet"><script type="text/javascript" src="main.js"></script></head><body><h1>Generic Welcome Message Here</h1><img id="earth" src="images/globe.gif" width="150" height="150" alt="globe.gif" /><img id="mars" src="images/mars.png" width="800" height="800" alt="mars.png" /><!--Navigation Bar --><a id="indexNav" href="index.html">Home</a><a id="aboutUsNav" href="aboutUs.html">About Us</a><a id="coverageNav" href="coverage.html">Coverage</a><a id="productsNav" href="products.html">Product Info</a><a id="ordersNav" href="orders.html">Inquiries-Orders</a><a id="contactUsNav" href="contactUs.html">Contact Us</a><a id="supportNav" href="support.html">Support</a><p id="footer">Copyright ©2014 Generic Title, All rights reserved</p></body></html> Here is my CSS for the entire page: body {overflow:hidden;background-image:url("images/space.jpg");}#earth {position:absolute;padding:0;left:200px;top:150px;}#mars {position:absolute;padding:0;right:-200px;}h1 {font:Palatino Linotype;color:white;text-decoration:underline;text-align:center;}p {font:"Times New Roman";font-size:20px;color:white;}#footer {position:fixed;bottom:-10px;right:5px;background::#355E95;font-size:15px;font-style:italic;}/*Navigation link section for homepage*/#indexNav{position:absolute; top:150px; right:400px; z-index:2; font-size:30px; color:white;}#aboutUsNav{position:absolute; top:250px; right:450px; z-index:2; font-size:30px; color:white;}#coverageNav{position:absolute; top:350px; right:500px; z-index:2; font-size:30px; color:white;}#productsNav{position:absolute; top:450px; right:550px; z-index:2; font-size:30px; color:white;}#ordersNav{position:absolute; top:550px; right:500px; z-index:2; font-size:30px; color:white;}#contactUsNav{position:absolute; top:650px; right:450px; z-index:2; font-size:30px; color:white;}#supportNav{position:absolute; top:750px; right:400px; z-index:2; font-size:30px; color:white;}
-
How come when I use Position Fixed or Absolute, the element says relative to where it is placed until I specify top, down, left or right. <style> #paragraph { position:absolute; }</style><p>1</p><p id="paragraph" >2</p><p>3</p><p>4</p><p>5</p>
-
hi everyone, I just want to ask the professionals use is very simple question about CSS positioning step ahead of myself I started learning css a few months ago it was very very easy to me there was nothing complex about it at all. well not until I reach the positioning in CSS they will like a living ###### to me well of course I could understand that simple values which are fixed relative, absolute, and static and how the work and the relation between the relative and the absolute values. but one thing that I died understand in positioning is that when you position an element in html you need to position it according to let's say the full screen mood that's mean when you want to make the browser tab is in the full screen of your computer screen, but if you played with tab of the browser like you want to decrease or increase the size of tab the position will change now. so how does these positions work I don't know how they work when we can implement them in any HTML page. and also one more simple question is that if I want to center an elements like a box in the center of the HTML page but when I play with the tab at the dimensions it don't change from its position it stay and remains in the center of the HTML page not caring about the decreasing or the increasing of that tap dimensions.
-
Hi all! I have a problem I can't figure out at all. In the image provided below, (you can also check http://www.simuscape...utalk/index.php), I have some imagelinks, (marked in red), located below the header and above the gold/beige background. But only the top of those imagelinks are visible, rather than being positioned in the middle of that dark background, approx. 17 px up from their current positioning. However, no matter how I try to change what's in the stylesheet, it also affects the Simuscape Index and Logout navigations, (marked in blue). What am I doing wrong and what do I need to do? Codes in stylesheet; /* Navigation--------------------- */ #menu { padding: 8px 0 0 1px; overflow: hidden;} #nav { padding: 0; margin: 0 auto; list-style-type: none; float: left; position: relative; left: 50%;} #nav li { float:left; position:relative; right:50%; } #nav a { display: block; width: 24px; height: 19px; margin: 0 0px 0 0px; Edit to add 1// Made another change in the stylesheet for each imagelink; Code from; .home { background: url("{T_IMAGESET_LANG_PATH}/home.png") 0 0 no-repeat; to; .home { background: url("{T_IMAGESET_LANG_PATH}/home.png") 0 -18px no-repeat; The result; The images were placed more accurate, but parts of the top is cut off and the hover images are in the wrong position... Edit to add 2// Okey, by reducing the transparent area between the home.png and the hover effect on the same .png, I have managade to allign them. The only actual problem at the moment is that these image links are cut off on the top... How to address this issue?
-
Hi, I create a div and a button during runtime and try to center them. darken.appendChild(message);darken.appendChild(errbtn);document.body.appendChild(darken);hcenter(message);hcenter(errbtn); darken is another div, in which i put the massage und the button. Its all about error-handling.With hcenter I try to center both elements. function hcenter(element){ var parent = element.parentNode; var pWidth = getwidth(parent); var eWidth = getwidth(element); var x = (Math.round(pWidth/2))-(Math.round(eWidth/2)); element.style.left = x+'px';} With the first element it works without problem, but not for the button. I already had a look, if the button has no style.left but it seems to have. I alerted x and got the correct value for both elements.Has someone an idea?
-
hey guys, I seem to have a few problems with my divs. I've added my .html and .css file so you can check my code. It might be a bit messy in those files so i hope it's still understandable. here are my problems. First one: there's a small white space in between the upper 2 black bars. I want this space to be as wide all the way down to the footer. Somehow it won't work and I can't figure out why. It looks like the containing div is messing it up. second problem: the small divs on the right side seem to be a few pixels too big on the right and go outside of the containing div. How can i prevent this from happening? It looks like this is also happening to the 4 bigger divs on the right but I'm not sure. Last problem: The footer is acting weird and i just can't figure out how to fix it. I'm actually thinking all these problems have a single solution to make it all work. But at the moment i am just clueless. I hope some one can help me out here.It would be very appreciated. Thanks in advance! Porkypie style3.csstest.html
-
Hello, On my site the links are jumbled up, areas are clickable which should not be. anyone know a solution? http://chanarmstrong.com/clients/shortsweet/shop.html Thanks!
-
If an element is relatively positioned, its child is absolutely positioned (within the parent container), and the child has a child which is also absolutely positioned. Why is it that the child's child continues to be absolutely positioned relative to its parent container, when it's parent isn't relatively positioned? It seems to go on an on like this.I'm probably just thinking about this the wrong way, but I find it to be confusing. If someone could explain this to me, I would be greatful.
-
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?
