We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Div & Table Help
Topic Started: Jan 27 2007, 02:05 AM (570 Views)
Vaminos
Member Avatar
10,000 Strong To Seize The Day
[ *  *  * ]
I am trying to work with Tables & DIV's. What I am trying to do is have at least 4 tables in one div. Is this possible? How would it be coded correctly? I've tried a few ways, and those ways haven't worked -_-

thanks for the help...
Offline Profile Quote Post Goto Top
 
DeltaOne
House Lucius {gone forever}
[ *  *  *  * ]
What's so hard about it?

Can you show us your code and explain how exactly you want those 4 tables to look in the div?
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
Code:
 
<div>
<table>
<tr>
<td>Column in Table I</td>
</tr>
</table>
<table>
<tr>
<td>Column in Table II</td>
</tr>
</table>
<table>
<tr>
<td>Column in Table III</td>
</tr>
</table>
<table>
<tr>
<td>Column in Table IV</td>
</tr>
</table>
</div>


Four tables in a DIV.
Offline Profile Quote Post Goto Top
 
acdcman
Member
[ *  *  * ]
Do you have a style sheet too? That would help a lot.

It's hard to tell you whether it would work or not, that is very basic coding. You should be able to fit anything you want into the DIVS if it's coded correctly. I use a container div that's 800 pixels wide in one of my layouts, and all of the content goes with-in that. Do you have a picture of what you want?
Offline Profile Quote Post Goto Top
 
Vaminos
Member Avatar
10,000 Strong To Seize The Day
[ *  *  * ]
I'm not familiar with DIV's is all :-/ so its hard for me -_- lol but it seems to work with the code FearKiller gave. Now my next question, how do you make images appear in a div? Here is a sample of what I have now:
Code:
 
<html>
<head>

<style>
BODY {
scrollbar-arrow-color: #FF0000;
scrollbar-3dlight-color: #003366;
scrollbar-highlight-color: #99CCFF;
scrollbar-face-color: #003366;
scrollbar-shadow-color: #003333;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #330000;
}
</style>

<title>Wrestling-Reviews</title>


</td></tr></table></td></tr></table></td></tr></table></div>
<style type="text/css">
body {background-color:#000000; background-image:url("http://www.banner.hotserv.dk/Wallpapers/2643DBackgroundz/Abstract%20Design1.jpg"); background-repeat: no-repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:#FFFFFF !important;}
a {color:#FFFF00 !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee, a.navbar { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed,  .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to show comments. }
.bbzsc { visibility:hidden; }
.herpe { You selected to hide friends. }
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; position:relative; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a {visibility:visible;} .comt td td td b {position:static; display:inline;} .comt td b, .blacktext10 {display:block;} .comt .orangetext15, .comt td td td table, .redlink, .comt .btext, .frnd{display:none;} .comt, .comt table {z-index:7;} .comt table {margin-top:-17px; _margin-top:-11px;} .comt b {position:relative; top:-17px;}
.herpe { This is where you control your top8 and comment position. }
.comt {
 visibility: visible; position:absolute; left:50%; top:0%;  overflow:none; width:450px; height:auto;
 border:1px dashed; border-color:#FF0000;
 margin-top:1000px; margin-left:-225px; background-color:#000000;
}
.comt span, .comt b {color:#FFFFFF !important; visibility:visible !important; display:inline !important; }
.comt table { width:400px !important; }
.comt table table { width:0px !important; }
.blacktext10 { width:350px; display:block; }
.comt a, .comt font, .comt span { visibility:visible !important; }

.div3 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:800px; height:205px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:50px; text-align:center;
visibility:visible;}

.div0 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:800px; height:100px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:690px; text-align:center;
visibility:visible;}

.div1 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:580px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:270px; text-align:center;
visibility:visible;}

.div2 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:200px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:200px; margin-top:270px; text-align:center;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
</td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzContainer">
<div class="div3">
<img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\Banner.png">

</div>

<div class="div0">
</div>

<div class="div1">
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\raw.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\smackdown.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\ecw.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\ppv.png" border='0'></a><br>
<hr size='1' color='#FF8800'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\movies.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian SImpson\My Documents\WrestleMedia\affiliates.png" border='0'></a>
<hr size='1' color='#0088FF'>
</div>

<div class="div2">
<font face="Grotto" size=5>Navigation</font><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\home.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\news.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\faq.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\music.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\misc.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\contact.gif" border='0'></a>
</div>

</div>

<div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>

<div class="comt"><table><tbody><tr><td><table>

</head>


<body>

</body>
</html>


Most of the Images are on my hard-drive...for now...
I saved the document, and when I go to test it in my default browser (FireFox), none of the image appear :O
Offline Profile Quote Post Goto Top
 
DeltaOne
House Lucius {gone forever}
[ *  *  *  * ]
This is one confusing html file!

Don't tell me that you made this all up by yourself, it's so clogged up.

I really don't even understand what you tried to do.
In your <head></head> section please don't use things that you would use in your <body></body> section.

You used all the html in your <head></head> section, while the actual page should be in the body. In the head section use only the style sheets.

ALSO, please try to clean your code up. Each opened tag MUST be closed. From the first lines of your code:
Quote:
 

</td></tr></table></td></tr></table></td></tr></table></div>

What the heck are you trying to do here?

You open a table tag by the <table>. You add a new line in the table with the <tr> tag. You put a new colon in that first line with the <td> tag. When you're done in that colon of text, CLOSE that colon tag, with </td>. If you want to add a new colon of text in that first line, add another <td>, but don't forget to close it when you're done writing in it.</td>.

If you're done writing in the first line of the table, CLOSE the first line of the table, </tr>. I so far have two colons in the first line of the table. If I want to add a new line, another <tr> tag, followed by a <td> tag. Once I write in this colon, I close it </td> and close the second line of the table </tr>. I have finished writing in this table, so I close it. </table>
Offline Profile Quote Post Goto Top
 
Vaminos
Member Avatar
10,000 Strong To Seize The Day
[ *  *  * ]
i guess having them html/site makers like Evrsoft First Page 2006 wasn't such a good idea :ermm:

EDIT: I guess it helps to actually sleep once in a great while before coding too :X
Offline Profile Quote Post Goto Top
 
DeltaOne
House Lucius {gone forever}
[ *  *  *  * ]
Well, depending on what you *planned to do*, things didn't turn up quite .. nice.


Use the plain old notepad file, it works wonders, I tell you! You can cut off most of the junk above if you write it on your own, because what you're planning to do isn't that hard at all, although unfortunately I do not know what exactly you want to do, and I can't guide you in the right direction :-/
Offline Profile Quote Post Goto Top
 
Vaminos
Member Avatar
10,000 Strong To Seize The Day
[ *  *  * ]
:-/ well I'll post my edited code here later after heavy editing.

EDIT: How does this look... :X :ermm:
Code:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>
BODY {
scrollbar-arrow-color: #FF0000;
scrollbar-3dlight-color: #003366;
scrollbar-highlight-color: #99CCFF;
scrollbar-face-color: #003366;
scrollbar-shadow-color: #003333;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #330000;
}
</style>

<title>WrestleMedia</title>
<style>
A:link{color:0000FF;text-decoration:none;}
A:visited{color:0000FF;text-decoration:none;}
A:hover{color:0055FF;text-decoration:underline;}
A:active{color:0000FF;text-decoration:none;}
</style>

<style type="text/css">
body {background-color:#000000; background-image:url("http://www.banner.hotserv.dk/Wallpapers/2643DBackgroundz/Abstract%20Design1.jpg"); background-repeat: no-repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:#FFFFFF !important;}
a {color:#FFFF00 !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee, a.navbar { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed,  .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to show comments. }
.bbzsc { visibility:hidden; }
.herpe { You selected to hide friends. }
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; position:relative; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a {visibility:visible;} .comt td td td b {position:static; display:inline;} .comt td b, .blacktext10 {display:block;} .comt .orangetext15, .comt td td td table, .redlink, .comt .btext, .frnd{display:none;} .comt, .comt table {z-index:7;} .comt table {margin-top:-17px; _margin-top:-11px;} .comt b {position:relative; top:-17px;}
.herpe { This is where you control your top8 and comment position. }
.comt {
visibility: visible; position:absolute; left:50%; top:0%;  overflow:none; width:450px; height:auto;
border:1px dashed; border-color:#FF0000;
margin-top:1000px; margin-left:-225px; background-color:#000000;
}
.comt span, .comt b {color:#FFFFFF !important; visibility:visible !important; display:inline !important; }
.comt table { width:400px !important; }
.comt table table { width:0px !important; }
.blacktext10 { width:350px; display:block; }
.comt a, .comt font, .comt span { visibility:visible !important; }

.div3 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:800px; height:205px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:50px; text-align:center;
visibility:visible;}

.div0 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:800px; height:100px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:690px; text-align:center;
visibility:visible;}

.div1 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:580px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:270px; text-align:center;
visibility:visible;}

.div2 {
background-color:#000000; color:#FFFFFF;
border:1px dashed; border-color:#FF0000;
width:200px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:200px; margin-top:270px; text-align:center;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>

</head>

<div class="bbzContainer">
<div class="div3">
<img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\Banner.png">

</div>

<div class="div0">
</div>

<div class="div1">
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\raw.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\smackdown.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\ecw.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\ppv.png" border='0'></a><br>
<hr size='1' color='#FF8800'>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\WrestleMedia\movies.png" border='0'></a><br>
<hr size='1' color='#FF0000'>
<a href="#"><img src="C:\Documents and Settings\Ian SImpson\My Documents\WrestleMedia\affiliates.png" border='0'></a>
<hr size='1' color='#0088FF'>
</div>

<div class="div2">
<font face="Grotto" size=5>Navigation</font><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\home.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\news.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\faq.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\music.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\misc.gif" border='0'></a><br>
<a href="#"><img src="C:\Documents and Settings\Ian Simpson\My Documents\Webtemplate\contact.gif" border='0'></a>
</div>

</div>

<div class="bbzsc"><table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>

<div class="comt"><table><tbody><tr><td>
<table><tr><td></td></tr></table></td></tr></tbody></table>


</body>
</html>
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
1. Your entire CSS can be between one set of style tags.
2. You're going to need to declare a charset and content type.
3. You have empty DIV elements... bad.
4. You're mixing content and style when it would be more efficient to separate them.
5. DIV elements are being used for something an unordered list can do much better.
6. There are open tags in your document.

For a small price I can fix all these problems for you as well as summarize your CSS and ensure proper rendering in all web browsers of your choosing. PM me if you're interested.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Technology Chat · Next Topic »
Add Reply