7 Replies - 486 Views - Last Post: 25 July 2014 - 03:33 PM

#1 AnthonyGuevara  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 01:49 PM

I have come across an issue with a canvas element. I have a bunch of divs that place fine but then I try and add a canvas element and it just sits in the top right corner no matter what I add to the corresponding CSS file. I would appreciate if someone could point out what I am doing wrong. Thank you.

MY CSS FILE:
div.Border {
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: -1;
	height: 130px;
	position: absolute;
	background-color: rgb(224,224,224);
	}
	 
p.Header1 {
	//top: 100; doesnt matter what number I give it. It stays in the same place.
	left: 50px; //same as above
	z-index: 100;
	font-size: 38px;
	font-weight: bold;
	position: absolute;
	color: rgb(255,0,0);
	}
	 
p.Header2 {
	top: 47px;
	left: 320px;
	font-weight: 500;
	font-size: 18px;
	position: absolute;
	}	 

p.Head  {
	top: 150px;
	left: 50px;
	font-size: 40px;
	position: absolute;
	}
	
p.Help  {
	top: 350px;
	left: 50px;
	font-size: 20px;
	position: absolute;
	}	
	
select.helpSelector {
	top: 400px;
	left: 50px;
	height: 30px;
	width: 210px;
	position: absolute;
	}	
		    
select option {
	color: blue;
	}		    
	
div.vBorder {
	top: 200px;
	width: 1px;
	height: 300px;
	right: 350px;
	position: absolute;
	background: rgb(192,192,192);
	}	
	
p.Info  {
	top: 200px;
	right: 80px;
	float: right;
	font: Arial 14px;	
	position: absolute;
	}



MY HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/ContactMe.js"></script>
<link rel="stylesheet" href="CSS/ContactMe.css"></link>
</head>
	<body>

<div class="Border">
  </div>
  
<div class="vBorder">
  </div>
    
 <p class="Header1">
  HEADING <!--This string sits all the way to the left and cannot be moved-->
 </p>
 
 <p class="Header2">
  One & TWO
 </p>
  
 <p class="Head">
  BLANK
 </p>
 
 <p class="Help">
  What can I help you with?
 </p>
 
 <select id="help" class="helpSelector">
  <option id="Null" value="0">Select Topic</option>
  <option id="one" value="1">option 1</option>
  <option id="two" value="2">option 2</option>
  <option id="three" value="3">option 3</option>
 </select>
 
 <p class="Info">
  <b>Name:</b> john doe
  <br> 
  <b>Tel:</b> (555) 555-5555
  <br>
  <b>Email:</b> email@gmail.com
  <br>
 </p>

</body>
</html>



I seem to have forgotten the canvas element in both the CSS and HTML files. Sorry. Here they are.

#myCanvas {
    top: 260;
    left: 365;
    width: 565;
    height: 335;
    z-index: -1;
    position: relative;
    }

<canvas id="myCanvas">
  </div>



Is This A Good Question/Topic? 0
  • +

Replies To: html canvas not positioning or expanding. Stuck in top right corner.

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,769
  • Joined: 12-December 12

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:07 PM

Where is the canvas positioned in your html?

For the Header1 question you need to supply units, top: 100px;

The same for your canvas, provide units.

However, the width and height of the canvas should preferably be supplied using html-attributes. The canvas also requires a closing tag:
<canvas id="myCanvas" width="565" height="335"></canvas>

These html-attributes do not require (or use) units.

This post has been edited by andrewsw: 25 July 2014 - 03:08 PM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,769
  • Joined: 12-December 12

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:13 PM

You might also add an outline around your canvas (until it has some content) otherwise you won't see it on the page:
#myCanvas {
    top: 260px;
    left: 365px;
    z-index: -1;
    position: relative;
    outline: 1px solid red;
}

This post has been edited by andrewsw: 25 July 2014 - 03:13 PM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,769
  • Joined: 12-December 12

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:19 PM

Note that absolute-positioning should be used sparingly, particularly for layout: favour floats.

You can discover problems with absolute-positioning by resizing the browser, or testing with different screen resolutions.
Was This Post Helpful? 1
  • +
  • -

#5 AnthonyGuevara  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:27 PM

Setting the attributes through the HTML directly overrode the default properties. Thank you for that! In doing so, I have found that I have set the height and width far to big. Which resulted in the canvas being stuck at the top right hand corner. Such a dumb mistake and that has left me feeling pretty stupid lol. Thanks you AndrewSW.

This post has been edited by andrewsw: 25 July 2014 - 03:28 PM
Reason for edit:: Removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,769
  • Joined: 12-December 12

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:29 PM

No worries ;)
Was This Post Helpful? 0
  • +
  • -

#7 AnthonyGuevara  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:29 PM

Not sure if my terminology is correct for I am fairly new to web dev. My previous experience was in languages like Perl and C. Sorry and thanks again.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3467
  • View blog
  • Posts: 11,769
  • Joined: 12-December 12

Re: html canvas not positioning or expanding. Stuck in top right corner.

Posted 25 July 2014 - 03:33 PM

I didn't notice anything odd in your use of terminology. I probably would have commented on it if I had ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1