While some HTML elements accept a width and height as attribute (canvas, img…), others don’t (like div). You should in the last case use CSS to set those dimensions. Like so:
#mycanvas {
box-sizing: border-box;
position : relative;
top: 100;
left: 0;
}
#base_map {
box-sizing: border-box;
position : relative;
top: 100;
left: 0;
width:850px;
height:250px;
}
<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map" style="border: 1px solid #000000;"></div>
In your case you are not seeing the div‘s border, because it doesn’t have any height, since it’s empty.
hi i tried your question and you done two mistakes .
first in div you have to write anything like 1 2 or any alphabet .
and second try to give value in pixcel or in percentage no in just 840 0r something .
best of luck.
I solved the problem by relocating #base_map { ... } in <style> in <head>.
But why ?
<head>
<link rel="stylesheet2" href="style.css" />
<style>
#base_map {
margin: 50px 100px;
width: 100%;
height: 100vh;
width:850px;
height:250px;
}
</style>
</head>
<body>
<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map" style="border: 1px solid #000000;"></div>
</body>
The css file only contains:
#mycanvas {
box-sizing: border-box;
position : relative;
top: 100;
left: 0;
}
The result is shown as below:
#mycanvas {
box-sizing: border-box;
position : relative;
top: 100;
left: 0;
}
#base_map {
box-sizing: border-box;
position : relative;
top: 100;
left: 0;
}
<h1>hello world</h1>
<canvas id="mycanvas" width="850" height="250" style="border: 1px solid #000000;"></canvas>
<div id = "base_map" width="850" height="250" style="border: 1px solid #000000;"></div>
The result is the webpage can show the border of mycanvas and base_map, but the shape of base_map is not correct.
I don’t why since the attributes of canvas and div are the same in the css file.
can your code work on ur machine? I tried your code on my machine, sorry to say the result is not improved, same result as shown in the question.
@Justin it’s working, in my computer and also here in Stack Overflow’s code snippet. Make sure you don’t have a typo.
could you show your code? I am very rookies to web developement.
