Search the Community
Showing results for tags 'block'.
Found 8 results
-
horizontal icon bar In this example I have a doubt. As far as i know <a> tags are inline elements. And we can only add left/right paddings to inline elements, and not top and bottom. But here it act as block level element as can be seen from this line of code which works : .icon-bar a{ padding: 12px 0; } So When I inspect the <a> tags, I found that it shows its computed value of display as block. So how does <a> tag has become block level without explicitly changing its display property?
-
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. -
Hello W3S! It's been a while since i've been online here... sorry about that Anyways. I have some trouble with a dynamic menu i'm trying to make with MySQLI... not sure if that is the problem anyhow... Here is the code as a start, i will explain under the code below what i'm trying to do: // File that we are on (viewing / watching)$tab = pathinfo( $_SERVER['SCRIPT_NAME'], PATHINFO_FILENAME );$menu_res = query("SELECT * FROM menu WHERE menu_file_url = ".$tab);$menu_row = mysqli_fetch_row($menu_res);if( $tab == $menu_row['menu_file_url'] || $menu_row['menu_accessible'] == "no" ) stderr("Page Error", "We are currently working on this page! Go to another page to keep browsing! Thanks for your patience! :)");if(isset($CURUSER)){ $menu_while_res = query(" SELECT * FROM menu WHERE menu_accessible = 'yes' AND menu_view = 'user' OR menu_view = 'both' ORDER BY menu_order_id ASC");}else{ $menu_while_res = query(" SELECT * FROM menu WHERE menu_accessible = 'yes' AND menu_view = 'guest' OR menu_view = 'both' ORDER BY menu_order_id ASC");}$HTMLOUT .= "<ul class='nav_first'>"; while ($menu_while_row = mysqli_fetch_array($menu_while_res, MYSQLI_ASSOC)) { // Menu Items Loaded Here $tabarray = array( $menu_while_row['menu_array_id_name'] => "<li><a href='".$menu_while_row['menu_file_url']."'>".$menu_while_row['menu_name']."</a></li>", ); // K = Key // V = Value foreach($tabarray as $k => $v) { if( $tab == $k ) $HTMLOUT .= str_replace("<li>", "<li class='nav_active'>", $v); else $HTMLOUT .= $v; } // Unset Menu For re-load again unset($tabarray); }$HTMLOUT .= "</ul>"; Currently i'm trying to make a dynamic menu with MySQLI! It's working perfectly... but when i tried to "expand" the project a bit longer and try to make a dynamic menu with errors on pages if the users are not allowed to view a specific file, then i get nothing... What i'm trying to do is to controle in the database with "Enum" as my DB setup that is "no" is has been set on one of the menu items (menu_accessible).. then the item will NOT show on the menu! AND if the user still tries to enter that specific page by URL, he will then get an error message saying that we are working on the website page... The code i'm trying to insert into this project is this little peace of code here: // File that we are on (viewing / watching)$tab = pathinfo( $_SERVER['SCRIPT_NAME'], PATHINFO_FILENAME );$menu_res = query("SELECT * FROM menu WHERE menu_file_url = ".$tab);$menu_row = mysqli_fetch_row($menu_res);if( $tab == $menu_row['menu_file_url'] || $menu_row['menu_accessible'] == "no" ) stderr("Page Error", "We are currently working on this page! Go to another page to keep browsing! Thanks for your patience! :)"); However, i get no respond on the code! Even when i have checked if the "$tab" variable is real and related to the name inside the DB (which it is!)... so if possible, can anyone help and tell me what i'm doing wrong here Oo? Thanks alot by the way! And sorry for the long goodbye hehe ...studies and all, killing me! -.-' Anyways, hope some answers or good tips... really need this one Thanks in advance! Mr rootKID
-
Hi guys! I have an issue with my webpages, from the homepage I can go to the page two without clicking on the link, just adding a #pagetwo on the address bar, have someone solved this using javascript or something like that? I'm attaching an example for those who will try to help me. Thanks! PageTransitionProblem.html
-
I want my links to be block-like. Instead, they look like this:http://i44.tinypic.com/20p7mg1.jpg That's not want I want. Instead, I want something more like this (http://i40.tinypic.com/2na76ys.jpg) (except not so big) and I want the set up the same. For example, BLOCK LINK wrote on BLOCK LINK And I want that all on one line. With regular block links though, it's usually one per line. So I need help, please. Site: http://sugar-baby.org/ <--- All of the coding regarding this can be seen there. [EDIT] I have found out that the <?php wp_head(); ?> has something to do with it. if I remove the wp_head, it works, if I keep it, than it doesn't work.
-
New to this, so pardon my verbal mistakes. Site Currently Being Worked On The problem is, is that all the products are in great placement, until you reach the 4th row down, where the style breaks and the hats on the bottom do "their own thing". I can't find anywhere in the break that would show this... /*============= Begin Products Grid Styles========================*/#products {background:none;display:inline;float:left;margin:0px;width:995px;}#products div.product { border: 0 none; display: block; float: middle; height: 200px; margin-bottom: 20px; margin-right: 20px; width: 171px;}#products div.product p {margin-bottom:5;}#products .product-img { border: 1px solid #bbbbbb; display: inline; height: 170px; float: middle; vertical-align: middle; width: 169px;}#products .product-info {border-top:2px solid #fff;float:middle;padding:5px 9px 11px;width:157px;}html #products .product-info {width:157px;}#products .product-a h3, #products .product-a p { color: #FFFFFF; text-align: middle;}#products .product-title { background: none repeat scroll 0 0 #000000; font-size: 10px; line-height: 16px; margin-top: 5px; margin-bottom: 5px; padding: 3px 0; position: relative; text-transform: normal; vertical-align: middle;}#products .product-title span {padding-left: 10px;padding-right: 10px;}#products .product-price {background:none repeat scroll 0 0 #000000;float:right;font-size:11px;font-weight:700;margin-left:176px;margin-right:0;margin-top:-25px;padding:5px;position:relative;}#products .product-status {font-size:10px;font-style:italic;}#products .product-a {clear:left;cursor:pointer;display:block;float:center;overflow:hidden;text-align:center;width:100%;}#products .product-a h3,#products .product-a p {color:#ffffff;font-weight:normal;text-align:center;}.pagination {background:none repeat scroll 0 0 #fffff;clear:both;float:middle;font-size:12px;font-weight:normal;margin-bottom:20px;margin-left:5px;margin-right:5px;padding:5px 0;text-align:center;}.pagination span,.pagination a {padding:0 3px 0 6px;}.pagination span.yadda {background:none;padding:5px 4px;}span.stilt {display:inline-block;vertical-align:middle;}.current-product-counter {display:none;} What could the issue be?
-
Dear W3School- Community, I have a problem with a form style. My form should fit in light blue box as you can see on the screenshot. The id tag is following: #register-form .fieldgroup { display: block; width: 340px;} If I change the display property to "inline-block" I achieve my concern but the form changed the position to the right and isn't centered anymore!Do I need other properties? I would appreciate a reply,PGCoder error.tiff
-
Hi! I have created a website with a number of games, media etc (tusw.tk) for use by people who have that content blocked normally by their school, work etc. So obviously I need some ways of making sure that mine isn't blocked either! The ones I have thought of and implemented so far are: 1 Changing the URL if someone reports the website blocked (and have a mailing list to all followers to notify them of the change)2 Avoid words like tank (from tank trouble) which could be blocked for including them Another possible one is that of redirecting the page to a copy of it but with a different URL if the page is refreshed (or just loaded) Basically I need some other ways of avoiding the blocking methods which are more automatic and less manual (like having to change the URL manually) to professionalise the system. Many thanks, Max
