Need the top div looking exactly like the bottom div. Is this possible without tables?
http://www.austinmetrobaseball.com/xtest2.html
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
#scroller {
background-color:#CB0017;
position: absolute;
width: 175px;
height: 72px;
top: 50px;
left: 75px;
}
#division {
background-color:#F9DFB2;
position: relative;
top: 2px;
left: 2px;
height: 20px;
width:171px;;
color:#CB0017;
font-size:10pt;
font-weight:bold;
font-family:verdana;
vertical-align: middle;
}
#gamedate {
text-align: left;
background-color:#00318C;
position: relative;
top: 0px;
left: 0px;
height: 14x;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gamescore {
position: relative;
top: 2px;
left: 0px;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gameinfo {
top:4px;
left: 2px;
position: relative;
height:50px;
width:171px;
background-color:#CB0017;
}
#visitorscore {
top:0px;
left: 0px;
position: relative;
height:14px;
width:171px;
background-color:#cb0017;
}
#homescore {
top:2px;
left: 0px;
position: relative;
height:14px;
width:171px;
background-color:#cb0017;
}
.scorelosern {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left: 2px;
width:57px;
height:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorelosers {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left:4px;
height:14px;
width:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:right;
}
.scoreloserr {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left: 6px;
height:14px;
width:65px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
}
.scorewinnern {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left: 2px;
width:57px;
height:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorewinners {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left:4px;
height:14px;
width:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:right;
}
.scorewinnerr {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left: 6px;
height:14px;
width:65px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
}
.scoreloser {
color:#ffffff;
background-color:#00318C;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorewinner {
color:#f9dfb2;
background-color:#00318C;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorerecordl {
color:#ffffff;
background-color:#000000;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: center;
}
.scorerecordw {
color:#f9dfb2;
background-color:#000000;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: center;
}
#scroller2 {
background-color:#CB0017;
position: absolute;
width: 175px;
height: 72px;
top: 200px;
left: 75px;
}
#division2 {
background-color:#F9DFB2;
position: relative;
top: 2px;
left: 2px;
height: 20px;
width:171px;;
color:#CB0017;
font-size:10pt;
font-weight:bold;
font-family:verdana;
vertical-align: middle;
}
#gamedate2 {
text-align: left;
background-color:#00318C;
position: relative;
top: 0px;
left: 0px;
height: 14x;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gamescore2 {
position: relative;
top: 2px;
left: 0px;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gameinfo2 {
top:4px;
left: 2px;
position: relative;
height:48px;
width:171px;
background-color:#CB0017;
}
.scoreborder {
background-color:#CB0017;
}
//-->
</style>
</head>
<body>
<div id="scroller">
<div id="division"> Lone Star</div> <!-- division -->
<div id="gameinfo">
<div id="gamedate"> Wednesday, April 11</div> <!-- gamedate -->
<div id="gamescore">
<div id="visitorscore">
<span class="scorelosern">Diamondbacks</span><span class="scorelosers">99</span><span class="scoreloserr">(99-99-9)</span>
</div> <!-- visitorscore -->
<div id="homescore">
<span class="scorewinnern">Salty Dawgs</span><span class="scorewinners">99</span><span class="scorewinnerr">(99-99-9)</span>
</div> <!-- homescore -->
</div> <!-- gamescore -->
</div> <!-- gameinfo -->
</div> <!-- scroller -->
<div id="scroller2">
<div id="division2"> Lone Star</div> <!-- division2 -->
<div id="gameinfo2">
<div id="gamedate2"> Wednesday, April 11</div> <!-- gamedate2 -->
<div id="gamescore2">
<table border="0" cellpadding="0" cellspacing="0" width="171">
<tr>
<td class="scoreloser"> Diamondbacks</td>
<td class="scoreloser">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordl">(99-99-9)</td>
</tr>
<tr>
<td class="scorewinner"> Salty Dawgs</td>
<td class="scorewinner">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordw">(99-99-9)</td>
</tr>
</table>
</div> <!-- gamescore2 -->
</div> <!-- gameinfo2 -->
</div> <!-- scroller2 -->
</body>
</html>
|
It seems stupid to me to not use tables to present tabular data like you are trying. Divs are really only good for layout in my opinion and to present tabular data, you should really use tables. On the other hand, if you NEED for some reason or another to use divs to display tabular data, you can check this page out for info... http://snook.ca/archives/html_and_css/getting_your_di/
Looking at the code though, the table just makes the tabular data seem much more readable instead of using divs.
| Quote: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div id="scroller">
<div id="division"> Lone Star</div> <!-- division -->
<div id="gameinfo">
<div id="gamedate"> Wednesday, April 11</div> <!-- gamedate -->
<div id="gamescore">
<div id="visitorscore">
<span class="scorelosern">Diamondbacks</span><span class="scorelosers">99</span><span class="scoreloserr">(99-99-9)</span>
</div> <!-- visitorscore -->
<div id="homescore">
<span class="scorewinnern">Salty Dawgs</span><span class="scorewinners">99</span><span class="scorewinnerr">(99-99-9)</span>
</div> <!-- homescore -->
</div> <!-- gamescore -->
</div> <!-- gameinfo -->
</div> <!-- scroller -->
<div id="scroller2">
<div id="division2"> Lone Star</div> <!-- division2 -->
<div id="gameinfo2">
<div id="gamedate2"> Wednesday, April 11</div> <!-- gamedate2 -->
<div id="gamescore2">
<table border="0" cellpadding="0" cellspacing="0" width="171">
<tr>
<td class="scoreloser"> Diamondbacks</td>
<td class="scoreloser">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordl">(99-99-9)</td>
</tr>
<tr>
<td class="scorewinner"> Salty Dawgs</td>
<td class="scorewinner">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordw">(99-99-9)</td>
</tr>
</table>
</div> <!-- gamescore2 -->
</div> <!-- gameinfo2 -->
</div> <!-- scroller2 -->
</body>
</html> |
Also, if you don't like all that CSS there, put it in a .css file and make a stylesheet link in the head section after the title. like would look something like
<link rel="stylesheet" type="text/css" href="whateveryounamethefile.css />
it just makes coding the page SO much easier and less cluttered
| Quote: |
| Need the top div looking exactly like the bottom div. Is this possible without tables? |
the answer is YES.
you can create it without table 
here is the code:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
#scroller {
background-color:#CB0017;
position: absolute;
width: 175px;
height: 72px;
top: 50px;
left: 75px;
}
#division {
background-color:#F9DFB2;
position: relative;
top: 2px;
left: 2px;
height: 20px;
width:171px;;
color:#CB0017;
font-size:10pt;
font-weight:bold;
font-family:verdana;
vertical-align: middle;
}
#gamedate {
text-align: left;
background-color:#00318C;
position: relative;
top: 0px;
left: 0px;
height: 14x;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gamescore {
position: relative;
top: 2px;
left: 0px;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gameinfo {
top:4px;
left: 2px;
position: relative;
height:50px;
width:171px;
background-color:#CB0017;
}
#visitorscore {
top:0px;
left: 0px;
position: relative;
height:14px;
width:171px;
background-color:#cb0017;
}
#homescore {
top:2px;
left: 0px;
position: relative;
height:14px;
width:171px;
background-color:#cb0017;
}
.scorelosern {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left: 2px;
width: 57px;
height:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorelosers {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left:4px;
height:14px;
width:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:right;
}
.scoreloserr {
position: relative;
color:#ffffff;
background-color:#00318C;
top: 0px;
left: 6px;
height:14px;
width:65px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:right;
}
.scorewinnern {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left: 2px;
width:57px;
height:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorewinners {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left:4px;
height:14px;
width:14px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:right;
}
.scorewinnerr {
position: relative;
color:#f9dfb2;
background-color:#00318C;
top: 0px;
left: 6px;
height:14px;
width:65px;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
}
.scoreloser {
color:#ffffff;
background-color:#00318C;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorewinner {
color:#f9dfb2;
background-color:#00318C;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: left;
}
.scorerecordl {
color:#ffffff;
background-color:#000000;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: center;
}
.scorerecordw {
color:#f9dfb2;
background-color:#000000;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align: center;
}
#scroller2 {
background-color:#CB0017;
position: absolute;
width: 175px;
height: 72px;
top: 200px;
left: 75px;
}
#division2 {
background-color:#F9DFB2;
position: relative;
top: 2px;
left: 2px;
height: 20px;
width:171px;;
color:#CB0017;
font-size:10pt;
font-weight:bold;
font-family:verdana;
vertical-align: middle;
}
#gamedate2 {
text-align: left;
background-color:#00318C;
position: relative;
top: 0px;
left: 0px;
height: 14x;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gamescore2 {
position: relative;
top: 2px;
left: 0px;
width:171px;;
font-size:8pt;
font-weight:bold;
font-family:arial;
vertical-align: middle;
color:#ffffff;
}
#gameinfo2 {
top:4px;
left: 2px;
position: relative;
height:48px;
width:171px;
background-color:#CB0017;
}
.scoreborder {
background-color:#CB0017;
}
#scroller3 {
background-color:#CB0017;
position: absolute;
width: 175px;
height: 72px;
top: 300px;
left: 75px;
}
#table-row {
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
padding: 0; width: 100%;
}
#col1L {
background-color:#00318C;
border: none; float: left; width: 60%;
}
#col2L {
background-color:#00318C;
border: none; float: left; margin: 0; padding: 0; width: 10%;
}
#col3L {
border: none; float: left; margin: 0; padding: 0; width: 3px;
}
#col4L {
background-color:#000000;
border: none; float: right; margin: 0; padding: ; width: 28%;
}
#col1W {
background-color:#00318C;
color:#f9dfb2;
border: none; float: left; width: 60%;
}
#col2W {
background-color:#00318C;
color:#f9dfb2;
border: none; float: left; margin: 0; padding: 0; width: 10%;
}
#col4W {
background-color:#000000;
color:#f9dfb2;
border: none; float: right; margin: 0; padding: ; width: 28%;
}
//-->
</style>
</head>
<body>
<div id="scroller">
<div id="division"> Lone Star</div> <!-- division -->
<div id="gameinfo">
<div id="gamedate"> Wednesday, April 11</div> <!-- gamedate -->
<div id="gamescore">
<div id="visitorscore">
<span class="scorelosern">Diamondbacks</span>
<span class="scorelosers">99</span>
<span class="scoreloserr">(99-99-9)</span>
</div> <!-- visitorscore -->
<div id="homescore">
<span class="scorewinnern">Salty Dawgs</span><span class="scorewinners">99</span><span class="scorewinnerr">(99-99-9)</span>
</div> <!-- homescore -->
</div> <!-- gamescore -->
</div> <!-- gameinfo -->
</div> <!-- scroller -->
<div id="scroller2">
<div id="division2"> Lone Star</div> <!-- division2 -->
<div id="gameinfo2">
<div id="gamedate2"> Wednesday, April 11</div> <!-- gamedate2 -->
<div id="gamescore2">
<table border="0" cellpadding="0" cellspacing="0" width="171">
<tr>
<td class="scoreloser"> Diamondbacks</td>
<td class="scoreloser">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordl">(99-99-9)</td>
</tr>
<tr>
<td class="scorewinner"> Salty Dawgs</td>
<td class="scorewinner">99</td>
<td class="scoreborder"><img src="spacer.gif" width="3" /></td>
<td class="scorerecordw">(99-99-9)</td>
</tr>
</table>
</div> <!-- gamescore2 -->
</div> <!-- gameinfo2 -->
</div> <!-- scroller2 -->
<!----- WITHOUT TABLE -->
<div id="scroller3">
<div id="division2"> Lone Star</div> <!-- division2 -->
<div id="gameinfo2">
<div id="gamedate2"> Wednesday, April 11</div> <!-- gamedate2 -->
<div id="gamescore2">
<div id = "table-row">
<div id = "col1L">Diamondbacks</div>
<div id = "col2L">99</div>
<div id = "col3L"></div>
<div id = "col4L">(99-99-9)</div>
</div>
<div id = "table-row">
<div id = "col1W">Salty Dawgs</div>
<div id = "col2W">99</div>
<div id = "col3L"></div>
<div id = "col4W">(99-99-9)</div>
</div>
</div> <!-- gamescore2 -->
</div> <!-- gameinfo2 -->
</div> <!-- scroller2 -->
</body>
</html>
|
| ALostSoul wrote: |
..., put it in a .css file
<SNIP>
|
Yes, I know that. It is easier to put it in the code while developing
because it is all there. | meejoku wrote: |
| Quote: | | Need the top div looking exactly like the bottom div. Is this possible without tables? |
the answer is YES.
you can create it without table
<SNIP>
|
Perfect, with a little tweeking. Thanks a million. Now I can finish
my scroller.But why would you remove the tables for tabular data? That's what tables are for. If your css is removed, or replaced by an alternative css-file (f.eks. for a mobile phone), your tabular data would be messy and practicly "unreadable".
Uh, the W3C says that tables *should* be used for presenting tabular data. IIRC, tables are the *only* recommended way to present tabular data...
Why did it suddenly become trendy not to use tables for presenting tabular data? I've seen all kinds of coding to try to eliminate them - but I think it's more of an intellectual exercise rather than being of significant value.
As qscomputing said, W3C & IIRC recommend the use of tables. They're easy and versatile so use them!
first of all i would like to comment on css used by you.. there are so many repetitive properties used.. you are repeating css properties for each class selector. i think this code is generated by some html editor.
anyways i am a hadocre fan of using divs instead of tables. but what you are trying to do is must be developed in tables.
otherwise you will suffer a lot in setting display properties to block for covering entire background color then. then floating them left to setting them in one line..
i think you should use table for this formatting.. only tables are a perfect solution to this problem
zanetine makes a good point. Whilst you should always strive to follow the W3C's recommendations, if it's technically too difficult to do so there is almost always a fallback that is standards-compliant but not recommended. To use CSS for layout is highly commendable; tables not so much so - but not to use tables for tabular data is just, well, silly (OK, using <pre> is another technique for tabular data, provided that aesthetic design is not your first aim). HTH.
