« previous next »
Pages: [1] 2   Go Down

Author Topic: Div problems  (Read 6242 times)

0 Members and 1 Guest are viewing this topic.

Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Div problems
« on: March 07, 2011, 11:51:12 am »
Ok, so i have 2 divisions inside a table:
Code: (style) [Select]
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;
}
Code: (in the table) [Select]
<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?
« Last Edit: March 07, 2011, 12:01:53 pm by Broseph Radson »
Logged

Offline Aichi

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 290
  • Rating: +76/-3
    • View Profile
    • Devrays
Re: Div problems
« Reply #1 on: March 07, 2011, 01:45:31 pm »
Could you upload both the Source code and the images?^^
Logged

Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #2 on: March 07, 2011, 04:12:14 pm »
Tomorrow morning ill be able to. Its on my  classroom computer
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Div problems
« Reply #3 on: March 07, 2011, 08:39:28 pm »
Quote from: Broseph Radson on March 07, 2011, 11:51:12 am
Ok, so i have 2 divisions inside a table:
Code: (style) [Select]
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;
}
Code: (in the table) [Select]
<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.
Logged



Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #4 on: March 07, 2011, 09:09:24 pm »
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.
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Div problems
« Reply #5 on: March 07, 2011, 09:16:21 pm »
Did you try the vertical-align?
« Last Edit: March 07, 2011, 09:16:38 pm by Deep Thought »
Logged



Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #6 on: March 08, 2011, 08:42:01 am »
Ok im back in class. Lucky for me, its a 3 hour class for computers  :thumbsup:

So here's the full page:

Code: [Select]
<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)
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Div problems
« Reply #7 on: March 08, 2011, 11:09:27 am »
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 ;)
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #8 on: March 08, 2011, 11:11:16 am »
I guess i have to. Now off to google to figure out how to center...
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Div problems
« Reply #9 on: March 08, 2011, 11:31:07 am »
You could do that using JavaScript...
Code: (HTML/Javascript) [Select]
<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.
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #10 on: March 08, 2011, 11:41:06 am »
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.
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Div problems
« Reply #11 on: March 08, 2011, 11:52:32 am »
Quote from: Broseph Radson on March 08, 2011, 11:41:06 am
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
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Div problems
« Reply #12 on: March 08, 2011, 12:10:02 pm »
Just don't use this. O.O

http://ourl.ca/9036
Logged

Offline Ikkerens

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 378
  • Rating: +28/-9
  • JavaScript Magician
    • View Profile
    • Walotech
Re: Div problems
« Reply #13 on: March 08, 2011, 12:15:44 pm »
Logged

Splut for Android [----------]
Paused/halted indefinitely, might be abandoned, our graphic designer quit and the rest of us simply doesn't have the time to work on it...

Offline Broseph Radson

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 295
  • Rating: +20/-1
  • Its 0x1A4 somewhere
    • View Profile
Re: Div problems
« Reply #14 on: March 08, 2011, 12:16:24 pm »
Logged
Pages: [1] 2   Go Up
« previous next »