Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Broseph Radson on March 07, 2011, 11:51:12 am
-
Ok, so i have 2 divisions inside a table:
div#ball {background-image:url('gr/ball.png');
position:relative;
width:600;
height:600;
z-index:1;
}
div#reply{position:relative;
top:315;
z-index:2;
}
<div id="reply"><img src="gr/nothing.png"> (it changes when you click the button)</div>
<div id="ball"></div>
As you see in the attached pic, there is a giant space above the ball thats the same size as the image in the reply div. Can anyone help me with this?
-
Could you upload both the Source code and the images?^^
-
Tomorrow morning ill be able to. Its on my classroom computer
-
Ok, so i have 2 divisions inside a table:
div#ball {background-image:url('gr/ball.png');
position:relative;
width:600;
height:600;
z-index:1;
}
div#reply{position:relative;
top:315;
z-index:2;
}
<div id="reply"><img src="gr/nothing.png"> (it changes when you click the button)</div>
<div id="ball"></div>
As you see in the attached pic, there is a giant space above the ball thats the same size as the image in the reply div. Can anyone help me with this?
Could be just the ball being vertically aligned to the bottom. Try adding vertical-align: top; to the #ball definition.
-
It always has the space above it no matter where i put it. When i highlight the reply div it also highlights the space above the ball, which is why i think its related.
-
Did you try the vertical-align?
-
Ok im back in class. Lucky for me, its a 3 hour class for computers :thumbsup:
So here's the full page:
<html>
<head>
<title>Magic 8 Ball</title>
<script type="text/JavaScript">
function answer()
{
now = new Date();
num = now.getSeconds() % 16;
document.ans.src=("gr/pic" + num + ".png");
}
function check()
{
if (document.ask.question.value.length == 0)
{
alert("Please enter a question!");
document.ask.question.focus;
}
else
{
answer();
}
}
</script>
<style type="text/css">
body {background-image:url('gr/8ball.png');
background-repeat:no-repeat;
background-position:left top;
}
.pies {font-family:Arial;
font-size:22px;
}
div#ball{background-image:url('gr/ball.png');
position:relative;
width:600;
height:600;
z-index:1;
}
div#reply{position:relative;
top:315;
padding:0;
z-index:2;
}
</style>
</head>
<body bgcolor="#aaaaaa">
<table border="2" cellpadding="2" cellspacing="0" width="60%" align="center" bordercolor="#777777">
<tr>
<td bgcolor="#999999" align="center" valign="top">
<div id="reply"><img src="gr/nothing.png" name="ans"></div>
<div id="ball"></div>
<br>
<form name="ask" action="">
What is your question?<br>
<input type="text" name="question" size="45"><br>
<input type="button" value="Shake!" onMouseDown="check()">
</form>
<br>
</td>
</tr>
</table>
</body>
</html>
Adding vertical-align didnt work either :(
Im thinking my only choice is to do absolute positioning instead of relative, but that could cause compatibility issues with some browsers, and i need to figure out how to get it horizontally centered.
Attached is the images as requested :) (theres a total of 16 answers but theyre about the same size so i only included one)
-
You are using position:relative I see,
relative looks at the last item in the HTML, and check the coordinates from there...
You might consider using position:absolute, as it then uses the coordinates from the top left of the screen :)
Hope that helps ;)
-
I guess i have to. Now off to google to figure out how to center...
-
You could do that using JavaScript...
<div id="myDiv" style="position:absolute;width:50px;height:50px;"></div>
<script type="text/javascript">
function $(e) { return document.getElementById(e); }
$('myDiv').style.left = ( (screen.width / 2) - ( $('myDiv').style.width / 2 ) );
$('myDiv').style.top = ( (screen.height / 2) - ( $('myDiv').style.height / 2 ) );
</script>
Haven't tested it, but should work.
-
Lordy i think thats a bit beyond my level...my teacher might get suspicious. I decided to just put a big header on top of the blank space.
-
Lordy i think thats a bit beyond my level...my teacher might get suspicious. I decided to just put a big header on top of the blank space.
Oh, its a school project, nevermind then :P
I honestly don't know how to center it then xD
-
Just don't use this. O.O
http://ourl.ca/9036
-
Just don't use this. O.O
http://ourl.ca/9036
This^
-
Just don't use this. O.O
http://ourl.ca/9036
lol no way
-
(http://img88.imageshack.us/img88/6965/fireshotprocapture023ma.jpg)
<html>
<head>
<title>Magic 8 Ball</title>
<script type="text/JavaScript">
function answer()
{
now = new Date();
num = now.getSeconds() % 16;
document.ans.src=("gr/pic" + num + ".png");
}
function check()
{
if (document.ask.question.value.length == 0)
{
alert("Please enter a question!");
document.ask.question.focus;
}
else
{
answer();
}
}
</script>
<style type="text/css">
body {background-image:url('8ball.png');
background-repeat:no-repeat;
background-position:left top;
}
.pies {font-family:Arial;
font-size:22px;
}
div#ball{background-image:url('gr/ball.png');
position:relative;
width:600;
height:600;
z-index:1;
}
div#reply{
margin-top: 210px;
z-index:2;
}
#main{
background-image: url(gr/ball.png);
background-repeat: no-repeat;
height: 700px;
width: 600px;
background-color: #777777;
border: medium solid #444444;
padding: 15px;
background-position: top;
}
</style>
</head>
<body bgcolor="#aaaaaa">
<center>
<div id="main">
<div id="reply"><img src="gr/nothing.png" name="ans"></div>
<br>
<form name="ask" style='margin-top: 260px'>
What is your question?<br>
<input type="text" name="question" size="45"><br>
<input type="button" value="Shake!" onMouseDown="check()">
</form>
<br>
</div></center>
</body>
</html>
-
margin: 0 auto should center a div.
-
Ive tried that but it only works in relative positioning, which i can already do with html. :(
And thx Aichi :D