After i add the Google pie chart to my page all the the top: values need be negative to put them in to the correct position. How can i avoid having these negative values. It makes all the other elements a mess.
These are css which i used. I have change the top value of the image2 to -500 i want to use a positive value.
.image1 {
position: relative;
z-index: 1;
width: 350px;
height: 400px;
left: 0;
top: 0;
float: left;
}
.image2 {
position: relative;
z-index: 1;
width: 350px;
height: 400px;
left: 795px;
top: -500px;
float: left;
}
#piechart_3d {
width: 700px;
height: 500px;
position: relative;
left: 220px;
top: -40px;
margin-right: 0px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Person', 'Votes'],
['h', 10],
['b', 10]
]);
var options = {
is3D: true,
colors: ['#FC0', '#09F']
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<img class="image1" src="http://www.photographyblog.com/images/sized/images/uploads_ee2/camera_preview_images/nikon_d810_photos-550x389.jpg" alt="Mountain View" width="300px" Height="350px">
<!--image1 end-->
<div class="piechart" id="piechart_3d"></div>
<div class="image2">
<img src="http://www.photographyblog.com/images/sized/images/uploads_ee2/camera_preview_images/nikon_d810_photos-550x389.jpg" width="300px" Height="350px">
</div>
</body>
</html>
The pie chart is a
<div>, a block element. As block elements take up the entire width, this pushes your second image down.You try to fix this by adding a
position: relativewith a negativetopproperty. It's a good sign that you don't like this approach. I think solving it like this will lead to fragile code where you need more and more positioning hacks.In general try to use the default document layout as much as possible, and try to stay away from
floatand positioning properties liketopunless they're needed. I would suggest you to first create the general layout, Learn CSS Layout and CSS Positioning are good resources that might help, and afterwards start filling it with the images and the pie chart.