|
Div & Table Help
|
|
Topic Started: Jan 27 2007, 02:05 AM (570 Views)
|
|
Vaminos
|
Jan 27 2007, 02:05 AM
Post #1
|
10,000 Strong To Seize The Day
- Posts:
- 477
- Group:
- Members
- Member
- #138,302
- Joined:
- November 25, 2006
|
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...
|
|
|
| |
|
DeltaOne
|
Jan 27 2007, 06:51 AM
Post #2
|
House Lucius {gone forever}
- Posts:
- 767
- Group:
- Members
- Member
- #78,945
- Joined:
- November 8, 2005
|
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?
|
|
|
| |
|
FearKiller
|
Jan 27 2007, 04:15 PM
Post #3
|
- Posts:
- 1,257
- Group:
- Members
- Member
- #1,769
- Joined:
- May 21, 2003
- I'm Browsing With
- Firefox
|
- 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.
|
|
|
| |
|
acdcman
|
Jan 27 2007, 04:29 PM
Post #4
|
- Posts:
- 297
- Group:
- Members
- Member
- #96,152
- Joined:
- February 18, 2006
|
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?
|
|
|
| |
|
Vaminos
|
Jan 29 2007, 06:26 AM
Post #5
|
10,000 Strong To Seize The Day
- Posts:
- 477
- Group:
- Members
- Member
- #138,302
- Joined:
- November 25, 2006
|
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
|
|
|
| |
|
DeltaOne
|
Jan 29 2007, 11:27 AM
Post #6
|
House Lucius {gone forever}
- Posts:
- 767
- Group:
- Members
- Member
- #78,945
- Joined:
- November 8, 2005
|
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>
|
|
|
| |
|
Vaminos
|
Jan 29 2007, 11:53 AM
Post #7
|
10,000 Strong To Seize The Day
- Posts:
- 477
- Group:
- Members
- Member
- #138,302
- Joined:
- November 25, 2006
|
i guess having them html/site makers like Evrsoft First Page 2006 wasn't such a good idea 
EDIT: I guess it helps to actually sleep once in a great while before coding too :X
|
|
|
| |
|
DeltaOne
|
Jan 29 2007, 01:40 PM
Post #8
|
House Lucius {gone forever}
- Posts:
- 767
- Group:
- Members
- Member
- #78,945
- Joined:
- November 8, 2005
|
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 :-/
|
|
|
| |
|
Vaminos
|
Jan 29 2007, 06:29 PM
Post #9
|
10,000 Strong To Seize The Day
- Posts:
- 477
- Group:
- Members
- Member
- #138,302
- Joined:
- November 25, 2006
|
:-/ well I'll post my edited code here later after heavy editing.
EDIT: How does this look... :X
- 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>
|
|
|
| |
|
FearKiller
|
Jan 30 2007, 12:59 PM
Post #10
|
- Posts:
- 1,257
- Group:
- Members
- Member
- #1,769
- Joined:
- May 21, 2003
- I'm Browsing With
- Firefox
|
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.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|