Ok, I've really been trying to become table-independant. Really.
I'm really having trouble understanding how SPAN and DIV are helping me, though.
It was my understanding that SPAN could be placed on the same line as another SPAN and they wouldn't break to the next line.
So I put two SPANs in a DIV and I got a line-break. I also continue to have to use relative positioning to get things where I want them ( as an direct result of the SPANs breaking lines).
I mean.. what am I doing wrong?
<STYLE>
.zeBox {display:box; font-size:12px; background-color:#007BF9; color:#FFFFFF; height:35px; width:140px; border: solid 1px #000000;}
.zeBox1 {display:box; font-size:12px; background-color:#007BF9; color:#FFFFFF; height:35px; width:180px; border: solid 1px #000000;}
.blank {list-style-image:url("/images/icons/structure/_blank.gif");}
</STYLE>
<DIV ALIGN="center">
<H1><STRONG>Information Systems Flight</STRONG></FONT></H1>
<DIV ALIGN="center" CLASS="zeBox">
<B>SCB</B> <BR>
Flight Commander</FONT>
</DIV>
<BR>
<DIV ALIGN="center" CLASS="zeBox">
<STRONG>SCB-1</STRONG><BR>
Flight Superintendent
</DIV>
<BR>
<DIV ALIGN="center">
<SPAN CLASS="zeBox1">
<STRONG>SCBA</STRONG><BR>
Admin Comm
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBB</STRONG><BR>
Network Operations
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBT</STRONG><BR>
Tech Control
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBI</STRONG><BR>
Info Security
</SPAN>
</DIV>
<DIV STYLE="text-align:left; position:relative; left:125px;">
<LI CLASS="blank"> Internet Services</LI>
<LI CLASS="blank"> Records Management</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"CSM/default.asp">Computer Systems Mgt</A></LI>
<LI CLASS="blank"> NATO Registry</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"Software_Training/default.asp">WGM/Software Training</A></LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-95px;left:315px;">
<LI CLASS="blank"> Network Control Ctr</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"NCC/DMS/default.asp">Electronic Message Ctr</A></LI>
<LI CLASS="blank"> Infostructure</LI>
<LI CLASS="blank"> Network Admin</LI>
<LI CLASS="blank"> Info Protection Ops</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"HelpDesk/default.asp">Help Desk</A></LI>
<LI CLASS="blank"> PC Maintenance</LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-228px;left:505px;">
<LI CLASS="blank"> Tech Control</LI>
<LI CLASS="blank"> Wideband Maintenance</LI>
<LI CLASS="blank"> C2 Systems Admin</LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-285px;left:695px;">
<LI CLASS="blank"> COMSEC</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"IA/default.asp">Info Assurance</A></LI>
</DIV>
<DIV STYLE="position:relative; top:-170px;">
<P STYLE="text-indent:15px">
The Information Systems Flight is responsible for the operation, maintenance and sustainment of the Wing's wide area network.<BR>
The Network Control Center, or NCC, includes e-mail, Defense Messaging Systems (DMS), file and web server, network security<BR>
and help desk functions. The flight also manages the wing's Communications Security (COMSEC), Records Management, NATO Subregistry<BR>
and Computer Systems Management programs. Our flight, made up of over 70 personnel in four different career fields, supports the nearly<BR>
6,000 personnel on-base and at our geographically separated units.</P>
</DIV>
</DIV>A plain SPAN tag is an inline element. However, when you apply a DISPLAY attribute to it, you make it a block element. Hence, you get a line break.But if you copy and paste the info into a web page, you'll
notice that the SPAN elements are all on the same line.
I tried to do the same thing with the list items, by placing them all in a division and spanning them out, but I ended up having to use relative positioning to make them stop line-breaking.
What I'm trying to say is, the one's that are in block style ALL stay on the same line without me positioning them to do so.Use this:
display:inline;Hmm.. possibly I am just retarded, but that doesn't seem to work.
I've tried applying the inline display to a division surrounding my list items, and to spans that contain the list items.Hmm, maybe you can't use display:inline; with relative positioning then. What you could try is removing the relative positioning and put all of your divs into another block div and position that where you want it, then apply widths to all of your div's with li's in to get the correct horizontal positioning that you require.
I hope this makes sense but if it doesn't here's an example of what I mean:
<div style="position:relative;left:100px;">
<div style="display:inline;width:100px;">
<li>Hi</li>
<li>There</li>
</div>
<div style="display:inline;width:100px;">
<li>Hello</li>
<li>Again</li>
</div>
</div>They first thing thing I always do when playing around with a tableless layout is design to a W3C spec for HTML and CSS. I usually shoot for XHTML 1.0 and CSS 2.0. You could use HTML 4.01 transitional or strict if you like. You can validate your code at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
The reason I make sure pages validate to a W3C standard is that browsers as of about 2001 all utilize doctype switching, meaning that if your pages validate as a web standard for HTML and CSS, then it "forces" the browser into standards compliance mode.
If your pages do not validate as standardized HTML and/or CSS, the browser will work in quirks mode, and I've found that each browser then can have its own "quirks," making it exeedingly difficult to predict how each browser will react to the code I write.
I know my post isn't the code to solve your problem, but it is the first step in the right direction.
Some usefull links:
<!-- m --><a class="postlink" href="http://www.w3.org/">http://www.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3schools.com">http://www.w3schools.com</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> // I really like this site for dealing with tableless layouts.
I'm really having trouble understanding how SPAN and DIV are helping me, though.
It was my understanding that SPAN could be placed on the same line as another SPAN and they wouldn't break to the next line.
So I put two SPANs in a DIV and I got a line-break. I also continue to have to use relative positioning to get things where I want them ( as an direct result of the SPANs breaking lines).
I mean.. what am I doing wrong?
<STYLE>
.zeBox {display:box; font-size:12px; background-color:#007BF9; color:#FFFFFF; height:35px; width:140px; border: solid 1px #000000;}
.zeBox1 {display:box; font-size:12px; background-color:#007BF9; color:#FFFFFF; height:35px; width:180px; border: solid 1px #000000;}
.blank {list-style-image:url("/images/icons/structure/_blank.gif");}
</STYLE>
<DIV ALIGN="center">
<H1><STRONG>Information Systems Flight</STRONG></FONT></H1>
<DIV ALIGN="center" CLASS="zeBox">
<B>SCB</B> <BR>
Flight Commander</FONT>
</DIV>
<BR>
<DIV ALIGN="center" CLASS="zeBox">
<STRONG>SCB-1</STRONG><BR>
Flight Superintendent
</DIV>
<BR>
<DIV ALIGN="center">
<SPAN CLASS="zeBox1">
<STRONG>SCBA</STRONG><BR>
Admin Comm
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBB</STRONG><BR>
Network Operations
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBT</STRONG><BR>
Tech Control
</SPAN>
<SPAN CLASS="zeBox1">
<STRONG>SCBI</STRONG><BR>
Info Security
</SPAN>
</DIV>
<DIV STYLE="text-align:left; position:relative; left:125px;">
<LI CLASS="blank"> Internet Services</LI>
<LI CLASS="blank"> Records Management</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"CSM/default.asp">Computer Systems Mgt</A></LI>
<LI CLASS="blank"> NATO Registry</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"Software_Training/default.asp">WGM/Software Training</A></LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-95px;left:315px;">
<LI CLASS="blank"> Network Control Ctr</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"NCC/DMS/default.asp">Electronic Message Ctr</A></LI>
<LI CLASS="blank"> Infostructure</LI>
<LI CLASS="blank"> Network Admin</LI>
<LI CLASS="blank"> Info Protection Ops</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"HelpDesk/default.asp">Help Desk</A></LI>
<LI CLASS="blank"> PC Maintenance</LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-228px;left:505px;">
<LI CLASS="blank"> Tech Control</LI>
<LI CLASS="blank"> Wideband Maintenance</LI>
<LI CLASS="blank"> C2 Systems Admin</LI>
</DIV>
<DIV STYLE="text-align:left; position:relative; top:-285px;left:695px;">
<LI CLASS="blank"> COMSEC</LI>
<LI CLASS="blank"> <A HREF=http://www.webdeveloper.com/forum/archive/index.php/"IA/default.asp">Info Assurance</A></LI>
</DIV>
<DIV STYLE="position:relative; top:-170px;">
<P STYLE="text-indent:15px">
The Information Systems Flight is responsible for the operation, maintenance and sustainment of the Wing's wide area network.<BR>
The Network Control Center, or NCC, includes e-mail, Defense Messaging Systems (DMS), file and web server, network security<BR>
and help desk functions. The flight also manages the wing's Communications Security (COMSEC), Records Management, NATO Subregistry<BR>
and Computer Systems Management programs. Our flight, made up of over 70 personnel in four different career fields, supports the nearly<BR>
6,000 personnel on-base and at our geographically separated units.</P>
</DIV>
</DIV>A plain SPAN tag is an inline element. However, when you apply a DISPLAY attribute to it, you make it a block element. Hence, you get a line break.But if you copy and paste the info into a web page, you'll
notice that the SPAN elements are all on the same line.
I tried to do the same thing with the list items, by placing them all in a division and spanning them out, but I ended up having to use relative positioning to make them stop line-breaking.
What I'm trying to say is, the one's that are in block style ALL stay on the same line without me positioning them to do so.Use this:
display:inline;Hmm.. possibly I am just retarded, but that doesn't seem to work.
I've tried applying the inline display to a division surrounding my list items, and to spans that contain the list items.Hmm, maybe you can't use display:inline; with relative positioning then. What you could try is removing the relative positioning and put all of your divs into another block div and position that where you want it, then apply widths to all of your div's with li's in to get the correct horizontal positioning that you require.
I hope this makes sense but if it doesn't here's an example of what I mean:
<div style="position:relative;left:100px;">
<div style="display:inline;width:100px;">
<li>Hi</li>
<li>There</li>
</div>
<div style="display:inline;width:100px;">
<li>Hello</li>
<li>Again</li>
</div>
</div>They first thing thing I always do when playing around with a tableless layout is design to a W3C spec for HTML and CSS. I usually shoot for XHTML 1.0 and CSS 2.0. You could use HTML 4.01 transitional or strict if you like. You can validate your code at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
The reason I make sure pages validate to a W3C standard is that browsers as of about 2001 all utilize doctype switching, meaning that if your pages validate as a web standard for HTML and CSS, then it "forces" the browser into standards compliance mode.
If your pages do not validate as standardized HTML and/or CSS, the browser will work in quirks mode, and I've found that each browser then can have its own "quirks," making it exeedingly difficult to predict how each browser will react to the code I write.
I know my post isn't the code to solve your problem, but it is the first step in the right direction.
Some usefull links:
<!-- m --><a class="postlink" href="http://www.w3.org/">http://www.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3schools.com">http://www.w3schools.com</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m --> // I really like this site for dealing with tableless layouts.