Click to See Complete Forum and Search --> : Div Problem - HELP PLEASE!


Wasiu0607
07-08-2003, 02:56 PM
I have a problem with DIV. I try to have a DIV above my other DIV >> http://www16.brinkster.com/animeng/layout1.html
BUT my DIV gets out of the place I set it to. Any ideas? Thanks

http://www16.brinkster.com/animeng/layout.html is the page before adding the SECOND DIV.

Ignore the next post pls. Thanks!

Wasiu0607
07-08-2003, 02:59 PM
Sorry about that. http://www16.brinkster.com/animeng/layout.html is the page after adding the OTHER DIV. THANKS AGAIN!

DaveSW
07-08-2003, 03:21 PM
which div where?

Wasiu0607
07-08-2003, 04:20 PM
The DIV after my left menu table. Under the LINKS HERE. It is:
<DIV style="position:absolute; left:397; top:223">
<td><marquee behavior="scroll" direction="up" scrollAmount="4" style="width:'148';height:'88'" onmouseover='this.stop()' onmouseout='this.start()'>

<FONT SIZE="1" COLOR="#FFB400" FACE="Verdana">
<center>Anime nG Headlines</center>

<br>7/8/03
<br>Headlines Here</a>
</font></marquee>
</div></table></tr></td>
</div>

and the one below it:

<!----FRAME STARTS HERE----!>
<DIV style="position:absolute; left:300; top:340">
<table width=152 height=88 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td>
<FONT SIZE="1" COLOR="#FFB400" FACE="Verdana">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe name="I1" width="560" height="444" scrolling="yes" border="0" frameborder="0" src="test.htm">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<center>
<!----FRAME ENDS HERE----!></font></td>

DaveSW
07-08-2003, 04:29 PM
shouldn't the distances be the same from the left and x for the top one, x + height of upper div for bottom one?

Wasiu0607
07-08-2003, 05:50 PM
Lol.. What? I dont quite understand sorry.. :)

Aronya1
07-08-2003, 06:01 PM
I think we need a better description of what you are trying to accomplish. I just looked at your page & don't see anything obviously wrong.

Wasiu0607
07-08-2003, 06:04 PM
Um you see the frame with the scrollable on the bottom in layout1.html? Its suppose to be where layout.html is .. It happened because I added a DIV before that.. Geez its hard to explain.

DaveSW
07-09-2003, 07:07 AM
I may (probably) be misunderstanding you, but you have

1) <DIV style="position:absolute; left:397; top:223">
2) <DIV style="position:absolute; left:300; top:340">

And you want them one under the other. Shouldn't the 'left' values be the same?? ie both at 397 or both at 300?

If that's not what you mean, how about chucking the second div inside the first and taking the positioning off the second one?

Wasiu0607
07-10-2003, 03:19 PM
Sorry about that guys.. Um I gave up on that layout and now I made a totally new one.
http://www.animeng.vzz.net/index2.html

I wanted the News table to be in my middle content. But it doesn't work! I tried to change my left DIV from 500 to like 100, and then 200, or something like that. But the table stays there just like that!
-------------------------------
<DIV style="position:absolute; left:100; top:100">
<table width=152 height=88 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td>
<FONT SIZE="1" COLOR="#FFB400" FACE="Verdana">
<iframe name="I1" width="560" height="800" scrolling="no" border="0" frameborder="0" src="news.php">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

DaveSW
07-11-2003, 08:46 AM
Ok I'm currently sifting through your code and I have to ask, Why have you got so many completely empty divs?

I've also noticed that you need to brush up on your css. That will reduce your code and make it easier to figure out what's wrong. Go here http://www.w3schools.com/css/default.asp or just use the code below to style all your hyperlinks for now.

<style type="text/css"><!--
BODY{font-family:serif;}
A:link {text-size:10px; color:#000000; }
A:visited {text-size:10px; color:#000000; }
A:hover {text-size:10px; color:#000000; }
A:active {text-size:10px; color:#000000; }
-->
</style>

That will emulate what you currently have declared in those few thousand font tags (deprecated) and span tags.

And don't forget to change the color of the hover, so everyone knows it's a link.

Now you can go through your code and remove all the font and span tags you have surrounding your hyperlinks... Which will probably halve the length of your code.


Having sifted through your 3 miles of code, I noticed this.

<div
style="position: absolute; left: 263px; top: 343px; width: 603px; height: 329px;"> (open div 1)
<table width="535" height="329" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr valign="top">
<td><font color="#000000"><font face="Arial" size="-2"><span
style="font-size: 10px;">
<!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-FRAME STARTS HERE-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!>
<DIV style="position:absolute; left:100; top:100"> (open div 2)
<table width=152 height=88 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<td>
<FONT SIZE="1" COLOR="#FFB400" FACE="Verdana">
<iframe name="I1" width="560" height="800" scrolling="no" border="0" frameborder="0" src="news.php">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<center>
<!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-FRAME ENDS HERE-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!></font></td></span></font></font><br>
</td>
</tr>
</tbody>
</table>
</div> (close div 2)
missing </div> (close div 1?)

Anyway. Your div is nested. normally anything that is positioned absolutly is positioned relative to the outside of the viewport, but when it's nested, it's positioned according to the object it's nested in.
Try moving your iframe div outside of your table completely and putting it on it's own at the end.

You appear not to fully understand the purpose of css. CSS will position all your code, and then you have no need for a table. Almost every element in your table is positioned absolutely from the top left of the viewport. The table is therefore nearly superfluous. It just adds to your code length.

DaveSW
07-11-2003, 08:50 AM
Reading my post I see another table tag that hasn't been closed.

Also, where you have Your browser does not support inline frames or is currently configured not to display inline frames you should insert a hyperlink to the contents of the iframe.

spufi
07-11-2003, 10:27 AM
And you might just want to look at your site in more than one resolution. Oh like, 800X600 for instance. ;)

Wasiu0607
07-12-2003, 08:04 PM
Originally posted by spufi
And you might just want to look at your site in more than one resolution. Oh like, 800X600 for instance. ;)
How do I do that? Thanks

spufi
07-12-2003, 10:36 PM
Originally posted by Wasiu0607
How do I do that? Thanks

This is for Windows.

1. Click on Start.
2. Select Settings and then Control Panel.
3. Double click on Display.
4. Click on the Settings tab.
5. You should have a sliding bas in an area called Screen Area.
6. Move the sliding bar around to set your PC to the new resolution.
7. Click ok.
8. If you get a message thet pops up, just click "ok".
9. Select the window that has your web page on it and see the difference.
10. Your resolution should go back to normal after a short period of time.

Wasiu0607
07-13-2003, 02:19 PM
But what if the visitor that is visiting my website has a resolution of 800x640 or something like that... Do I have to tell them to do all those stuff?: Click on start > Settings >>> ..... ??
Isn't there a way so that it automatically changes the website size when the visitor visits the website?

kipkreations
07-13-2003, 06:56 PM
users dont have to change the resolution, you only do in order to test your site.
noone really uses 640x480res anymore, and the lowest these days is 800x600. so if using a fixed width for your site, a good tip is to never set the width higher than 775px..
or you can set the page borders as 0 and then the table width as 100% so it will always change with different resolutions.

spufi
07-13-2003, 10:42 PM
Originally posted by kipkreations
then the table width as 100% so it will always change with different resolutions.

This being when you have tabular data and not content in general in which case you aren't using tables. ;) Beyond that, yeah, you are correct. Most people aren't going to change thier resolution at all. Whatever the resolution thier computer was set up with is the one most people are going to use.

Also note Wasiu0607, I'm looking into your reply about your CSS thread. I might PM you to ask somw questions about it though before I give a full answer.

Wasiu0607
07-15-2003, 03:11 PM
Is there another way like it automatically changes the layout to fit your resolution? I mean I don't want to tell my visitors to do all that just to view my website..

DaveSW
07-15-2003, 03:28 PM
In your case that background graphic makes it nigh on impossible to have a page narrower than it.

It might be possible to use some fancy css, but that might be a bit difficult for you at this present moment.

Incidentally I've reworked your old page here:
http://www.emdevelopments.co.uk/anime/anime.html

basically you had a redundant table layout in there holding all the css apart.

If you're interested in learning css properly I can give you a list of sites to visit.

Wasiu0607
07-15-2003, 06:01 PM
Thanks a lot! I'm trying to view source that page, but the HTML codes aren't appearing.. :/
Sure I would like some CSS sites.. Please :D

DaveSW
07-16-2003, 05:57 AM
I don't know why the source code doesn't appear, but if you still have that trouble I can send you a text file of it.

CSS Sites:

Normal css:
The validator: http://jigsaw.w3.org/css-validator/validator-uri.html
Some tutorials: http://www.w3schools.com/css/default.asp (you should whizz through these really quickly - a lot of it you know already)
This is a simple reference for CSS: http://www.w3schools.com/css/css_reference.asp

However, this one's far better, once you figure out how to use it: http://www.w3.org/TR/REC-CSS2/

This site will mention a few of the above, but is worth a look anyway: http://www.thenoodleincident.com/tutorials/css/index.html

css layout sites
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www.glish.com/css/

http://www.bluerobot.com/web/layouts/

Hope these help you

Dave