Author Topic: Div problems  (Read 3006 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 »

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?^^

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

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8209
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Div problems
« Reply #3 on: March 07, 2011, 08:39:28 pm »
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.




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.

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8209
  • 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 »




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)

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 ;)

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...

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.

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.

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 »
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

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

  • Former TI programmer
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55847
  • Rating: +3151/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • DJ 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
In case you are wondering where I went, I left Omni back in 2015 to form CodeWalrus due to various reasons explained back then, but I stopped calc dev in 2016 and am now mostly active on the CW Discord server at https://discord.gg/cuZcfcF



Official Website |T-Shirt store | Reverbnation | Facebook | Youtube | Twitter | Spotify

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 »

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 »