Topic: Help with Absolute Positioning $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22558" title="Pages that link to Topic: Help with Absolute Positioning" rel="nofollow" >Topic: Help with Absolute Positioning\$

Author	Thread
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 07-14-2004 18:32 Hello, I am embarking on a new project which will really !00% on CSS Absolute positioning - at least at this juncture it is looking this way. Just getting started... and I'm having troubles. In my example, you'll see two long vertical boxes "Outer box" with black border 2px and 2 sets of smaller boxes "Inner Box" with grey border 1px. The Outer Boxes appear to be positioned correctly. The inner boxes have somehow shifted to the right some amount (similar to the distance, if not exactly same, as the placing of the outer boxes). Also, you'll see that the top position of the inner boxes appears to be shifted down as well. The intent: position the inner boxes exactly within the corresponding outer boxes. THE LINK: http://www.meetscoresonline.com/test_sched.html Thanks for the help. Karl (Edited by Karl on 07-14-2004 18:33)
wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 07-14-2004 22:57 Hey Karl, don't know if there is a reason you have done it the way you have with classes, but I would propose you use divs that contain tables. the tables are for the tabular data you are showing, not for presentation purposes so it would be correct ccs-wise. css would look like this; <style type="text/css"> #schedsquad { position: absolute; top: 100px; left: 100px; width: 75px; height: 400px; border: 2px solid #000000; } #schedsquad table { border-top: 1px solid #cecece; border-left: 1px solid #cecece; width: 75px; height: 400px; } #schedsquad td { text-align: center; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; width: 75px; height: 100px; } #schedsquad2 { position: absolute; top: 100px; left: 200px; width: 75px; height: 600px; border: 2px solid #000000; } #schedsquad2 table { border-top: 1px solid #cecece; border-left: 1px solid #cecece; width: 75px; height: 600px; } #schedsquad2 td { text-align: center; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; width: 75px; height: 150px; } </style> html would loook like this: <div id="schedsquad"> <table cellspacing="0" cellpadding="0"> <tr> <td>G1 - S1</td> </tr> <tr> <td>G1 - S1</td> </tr> <tr> <td>G1 - S1</td> </tr> <tr> <td>G1 - S1</td> </tr> </table> </div> <div id="schedsquad2"> <table cellspacing="0" cellpadding="0"> <tr> <td>G2 - S2</td> </tr> <tr> <td>G2 - S2</td> </tr> <tr> <td>G2 - S2</td> </tr> <tr> <td>G2 - S2</td> </tr> </table> </div> (Edited by wcr one on 07-14-2004 23:35)
wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 07-14-2004 23:15 nevermind this, misread first post. (Edited by wcr one on 07-14-2004 23:36)
wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 07-15-2004 00:15 okay, here is something without tables that seems to work: <style type="text/css"> p { margin: 0; width: 75px; height: 100px; display:block; float:none; border:1px solid #cecece; } #schedule_squad1 { position:absolute; top: 100px; left: 100px; height: 400px; width: 77px; display:block; float:none; border:2px solid black; } #schedule_squad1 p { height: 100px; } #schedule_squad2 { position:absolute; top: 100px; left: 200px; height: 600px; width: 77px; display:block; float:none; border:2px solid black; } #schedule_squad2 p { height: 150px; } </style> </head> <body> <div id="schedule_squad1"> <p>G1 - S1</p> <p>G1 - S1</p> <p>G1 - S1</p> <p>G1 - S1</p> </div> <div id="schedule_squad2"> <p>G1 - S1</p> <p>G1 - S1</p> <p>G1 - S1</p> <p>G1 - S1</p> </div> css could probably be cleaned up a bit.
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 07-15-2004 00:32 wcr one: Thanks for the help! Why wouldn't it work with just DIV tags and absolute positioning? Keep the following in mind: The values for TOP and LEFT are dynamic. They actually are computed using XSLT and original vals are stored in an XML source. This is why you see the size of these elements expressed within the STYLE property. XML Source: http://meetscoresonline.com/SCHED.xml I am going to try your suggestion use P tags. Thanks again. Karl
wcr one Paranoid (IV) Inmate From: seattle Insane since: Mar 2001	posted 07-15-2004 00:41 It might be able to work with div tags and ab pos, but it was a lot of code using classes and maybe there was a glitch there. might as well use IDs, seems much better. the zeldman "designing with web standards" put across the reason much better than I ever could. as for the xslt and dynamic top/left thing I think it should still work, but know nothing about xslt so no guarantees, no money back. hope it works. nice thing about the table code, tho there was more of it, is that it centered the text in teh spce vertically, just looks a bit cleaner.

Topic: Help with Absolute Positioning\$

Author

Thread

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 07-14-2004 18:32

Hello,
I am embarking on a new project which will really !00% on CSS Absolute positioning - at least at this juncture it is looking this way.
Just getting started... and I'm having troubles.

In my example, you'll see two long vertical boxes "Outer box" with black border 2px and 2 sets of smaller boxes "Inner Box" with grey border 1px.

The Outer Boxes appear to be positioned correctly. The inner boxes have somehow shifted to the right some amount (similar to the distance, if not exactly same, as the placing of the outer boxes). Also, you'll see that the top position of the inner boxes appears to be shifted down as well.

The intent: position the inner boxes exactly within the corresponding outer boxes.

THE LINK: http://www.meetscoresonline.com/test_sched.html
Thanks for the help.
Karl

(Edited by Karl on 07-14-2004 18:33)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 07-14-2004 22:57

Hey Karl,

don't know if there is a reason you have done it the way you have with classes, but I would propose you use divs that contain tables. the tables are for the tabular data you are showing, not for presentation purposes so it would be correct ccs-wise.

css would look like this; <style type="text/css">
#schedsquad {
position: absolute;
top: 100px;
left: 100px;
width: 75px;
height: 400px;
border: 2px solid #000000;
}
#schedsquad table {
border-top: 1px solid #cecece;
border-left: 1px solid #cecece;
width: 75px;
height: 400px;
}
#schedsquad td {
text-align: center;
border-right: 1px solid #cecece;
border-bottom: 1px solid #cecece;
width: 75px;
height: 100px;
}
#schedsquad2 {
position: absolute;
top: 100px;
left: 200px;
width: 75px;
height: 600px;
border: 2px solid #000000;
}
#schedsquad2 table {
border-top: 1px solid #cecece;
border-left: 1px solid #cecece;
width: 75px;
height: 600px;
}
#schedsquad2 td {
text-align: center;
border-right: 1px solid #cecece;
border-bottom: 1px solid #cecece;
width: 75px;
height: 150px;
}
</style>

html would loook like this:
<div id="schedsquad">
<table cellspacing="0" cellpadding="0">
<tr>
<td>G1 - S1</td>
</tr>
<tr>
<td>G1 - S1</td>
</tr>
<tr>
<td>G1 - S1</td>
</tr>
<tr>
<td>G1 - S1</td>
</tr>
</table>
</div>
<div id="schedsquad2">
<table cellspacing="0" cellpadding="0">
<tr>
<td>G2 - S2</td>
</tr>
<tr>
<td>G2 - S2</td>
</tr>
<tr>
<td>G2 - S2</td>
</tr>
<tr>
<td>G2 - S2</td>
</tr>
</table>
</div>

(Edited by wcr one on 07-14-2004 23:35)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 07-14-2004 23:15

nevermind this, misread first post.

(Edited by wcr one on 07-14-2004 23:36)

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 07-15-2004 00:15

okay, here is something without tables that seems to work:

<style type="text/css">
p {
margin: 0;
width: 75px;
height: 100px;
display:block;
float:none;
border:1px solid #cecece;
}
#schedule_squad1 {
position:absolute;
top: 100px;
left: 100px;
height: 400px;
width: 77px;
display:block;
float:none;
border:2px solid black;
}
#schedule_squad1 p {
height: 100px;
}
#schedule_squad2 {
position:absolute;
top: 100px;
left: 200px;
height: 600px;
width: 77px;
display:block;
float:none;
border:2px solid black;
}
#schedule_squad2 p {
height: 150px;
}
</style>
</head>
<body>
<div id="schedule_squad1">
<p>G1 - S1</p>
<p>G1 - S1</p>
<p>G1 - S1</p>
<p>G1 - S1</p>
</div>
<div id="schedule_squad2">
<p>G1 - S1</p>
<p>G1 - S1</p>
<p>G1 - S1</p>
<p>G1 - S1</p>
</div>
css could probably be cleaned up a bit.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 07-15-2004 00:32

wcr one: Thanks for the help!

Why wouldn't it work with just DIV tags and absolute positioning?
Keep the following in mind: The values for TOP and LEFT are dynamic. They actually are computed using XSLT and original vals are stored in an XML source. This is why you see the size of these elements expressed within the STYLE property.

XML Source:
http://meetscoresonline.com/SCHED.xml

I am going to try your suggestion use P tags.
Thanks again.

Karl

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

posted 07-15-2004 00:41

It might be able to work with div tags and ab pos, but it was a lot of code using classes and maybe there was a glitch there. might as well use IDs, seems much better. the zeldman "designing with web standards" put across the reason much better than I ever could.

as for the xslt and dynamic top/left thing I think it should still work, but know nothing about xslt so no guarantees, no money back.

hope it works. nice thing about the table code, tho there was more of it, is that it centered the text in teh spce vertically, just looks a bit cleaner.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Help with Absolute Positioning

Insert Slimies »

Insert UBB Code »

Topic: Help with Absolute Positioning $Pages that link to <a href="https://ozoneasylum.com/backlink?for=22558" title="Pages that link to Topic: Help with Absolute Positioning" rel="nofollow" >Topic: Help with Absolute Positioning\$