Alternating color rows help needed

I have the following code that displays a user directory. I would like to have  both columns pretty much centered on the page with a gutter between the columns. I would also like to have the rows alternating colors for easier readability. Any help would be great.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Beta</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="5.css" type="text/css" />
<style type="text/css">
h2 {text-decoration: underline}
a:hover{
color:black;
}

.lc {
     position:absolute;
     left:0px;
     display:inline;
}
.rc  {
     position:absolute;
     left:200px;
     display:inline;
}
.lc1 {
     position:absolute;
     left:400px;
     display:inline;
}
.rc1  {
     position:absolute;
     left:600px;
     display:inline;
}


</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
</head>
<body>

<div id="header"><center>
  <img src="../_assets/img/front.jpg" alt="" width="800" height="57" border="0" /></center>
</div>


 <div id="container" >
      <div id="banner" ><a href=""></a>
            <h1>Beta</h1>
                  </div>
      <div id="outer" >
             <div id="inner">
                   <div id="left" >

<p>
               </div>

<div id="frame">



<fieldset id="searchbox">
      <legend><a href="">Search</a></legend>
      <form action="" name="searchbox">
            <input type="submit" value="search" />
            <input type="text" />
      </form>

</fieldset>
   </div>



<ul id="navigation">
<li><a href="index5.html" id="home">Menu Item</a></li>
<li><a href="page1.html" id="products">Menu Item</a></li>
<li><a href="forum\forum.asp" id="services">Menu Item</a></li>
<li><a href="page2.html" id="fun">Menu Item</a></li>
<li><a href="calendar.html" id="calendar">Menu Item</a></li>
<li><a href="empdir.html" id="current">Menu Item</a></li>
<li><a href="page3.html" id="training">Menu Item</a></li>
</ul>


               <div id="content" >
        <p>
        <h1>User Directory</h1>
            <p>
            <br>
           <b>Administration</b>
           <br>
           <br>

<span class="lc">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>
<span class="rc">102342</span><br />

<br>
  <br>
  <b>Sales</b>
<br>
 <br>
<span class="lc">xxxxxxxxxxxxxx</span>
<span class="rc">162057</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">13542</span><br />

<br>
  <br>
 
            <div style="clear:both;"></div>



</div>



            </div><!-- end inner -->
      </div><!-- end outer -->
       <div id="footer">
              
</h1></div>
</div><!-- end container -->
</body>
</html>



LVL 12
valiconAsked:
Who is Participating?
 
radnorConnect With a Mentor Commented:
I only did the 1st 2 lines!  They can alternate, but that's up to you.  Sure you can do it.

<span class="lc red_line">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1 red_line">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc blue_line">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1 blue_line">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>         <---------------   <class="lc red_line">
<span class="rc">102342</span><br />
0
 
8ball629Commented:
I tried a few different angles using the HTML you already have and it seems putting your user information in a table is the best route to go, it allows you to  alternate colors by row and keep everything aligned very well.  So I've changed some of your code (not all of it and ended up with the columns in the center with a bar in the middle to seperate them with alternating colors.  I hope this is what you wanted...

EDITED CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Beta</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="5.css" type="text/css" />
<style type="text/css">

h2 {text-decoration: underline}
.cell{ background-color: #CCCCCC; padding: 3px; }
.cellOdd{ background-color: #E2E2E2; padding: 3px; }

a:hover{
color:black;
}

.contentTable{ margin: 0px auto 0px auto; }

</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
</head>
<body>

<div id="header"><center>
  <img src="../_assets/img/front.jpg" alt="" width="800" height="57" border="0" /></center>
</div>


 <div id="container" >
     <div id="banner" ><a href=""></a>
          <h1>Beta</h1>
               </div>
     <div id="outer" >
           <div id="inner">
                <div id="left" >

<p>
             </div>

<div id="frame">



<fieldset id="searchbox">
     <legend><a href="">Search</a></legend>
     <form action="" name="searchbox">
          <input type="submit" value="search" />
          <input type="text" />
     </form>

</fieldset>
   </div>



<ul id="navigation">
<li><a href="index5.html" id="home">Menu Item</a></li>
<li><a href="page1.html" id="products">Menu Item</a></li>
<li><a href="forum\forum.asp" id="services">Menu Item</a></li>
<li><a href="page2.html" id="fun">Menu Item</a></li>
<li><a href="calendar.html" id="calendar">Menu Item</a></li>
<li><a href="empdir.html" id="current">Menu Item</a></li>
<li><a href="page3.html" id="training">Menu Item</a></li>
</ul>


             <div id="content" >
        <p>
        <h1>User Directory</h1>
          <p>
          <br>
           <b>Administration</b>
           <br>
           <br>
<table class="contentTable" cellspacing="0" cellpadding="0" width="80%" border="0">
<tr>
<td class="cell">
xxxxxxxxxxxxxxxxxxx
</td>
<td class="cell" style="border-right: 2px solid #000000;">
10423
</td>
<td class="cell">
xxxxxxxxxxxxxxxxx
</td>
<td class="cell">
10450
</td>
</tr>
<tr>
<td class="cellOdd">
xxxxxxxxxxxxxxxxxx
</td>
<td class="cellOdd" style="border-right: 2px solid #000000;">
109996
</td>
<td class="cellOdd">
xxxxxxxxxxxxxxx
</td>
<td class="cellOdd">
141000
</td>
</tr>
<tr>
<td class="cell">
xxxxxxxxxxxxx
</td>
<td class="cell" style="border-right: 2px solid #000000;">
102342
</td>
<td class="cell">
&nbsp;
</td>
<td class="cell">
&nbsp;
</td>
</tr>
</table>

<br>
  <br>
  <b>Sales</b>
<br>
 <br>
<span class="lc">xxxxxxxxxxxxxx</span>
<span class="rc">162057</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">13542</span><br />

<br>
  <br>
 
          <div style="clear:both;"></div>



</div>



          </div><!-- end inner -->
     </div><!-- end outer -->
      <div id="footer">
           
</h1></div>
</div><!-- end container -->
</body>
</html>
END CODE

Remember, I only changed part of it (administration section), the other part is very similar.
0
 
valiconAuthor Commented:
Thanks for the reply. Looks great!  the only thing is that forn the gutter I would like white space as opposed to the black line, is that possible?
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
radnorCommented:
WOW!!!  That code, I've seen it before.....  :)  Glad you can use it!

Will this work?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Beta</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="5.css" type="text/css" />
<style type="text/css">
h2 {text-decoration: underline}
a:hover{
color:black;
}
.red_line {
      background: red;
      width: 100%;
}
.blue_line {
      background: blue;
      width: 100%;
}
.lc {
     position:absolute;
     left:0px;
     display:inline;
}
.rc  {
     position:absolute;
     left:200px;
     display:inline;
}
.lc1 {
     position:absolute;
     left:400px;
     display:inline;
}
.rc1  {
     position:absolute;
     left:600px;
     display:inline;
}


</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
</head>
<body>

<div id="header"><center>
  <img src="../_assets/img/front.jpg" alt="" width="800" height="57" border="0" /></center>
</div>


 <div id="container" >
     <div id="banner" ><a href=""></a>
          <h1>Beta</h1>
               </div>
     <div id="outer" >
           <div id="inner">
                <div id="left" >

<p>
             </div>

<div id="frame">



<fieldset id="searchbox">
     <legend><a href="">Search</a></legend>
     <form action="" name="searchbox">
          <input type="submit" value="search" />
          <input type="text" />
     </form>

</fieldset>
   </div>



<ul id="navigation">
<li><a href="index5.html" id="home">Menu Item</a></li>
<li><a href="page1.html" id="products">Menu Item</a></li>
<li><a href="forum\forum.asp" id="services">Menu Item</a></li>
<li><a href="page2.html" id="fun">Menu Item</a></li>
<li><a href="calendar.html" id="calendar">Menu Item</a></li>
<li><a href="empdir.html" id="current">Menu Item</a></li>
<li><a href="page3.html" id="training">Menu Item</a></li>
</ul>


             <div id="content" >
        <p>
        <h1>User Directory</h1>
          <p>
          <br>
           <b>Administration</b>
           <br>
           <br>

<span class="lc red_line">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc blue_line">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>
<span class="rc">102342</span><br />

<br>
  <br>
  <b>Sales</b>
<br>
 <br>
<span class="lc">xxxxxxxxxxxxxx</span>
<span class="rc">162057</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">13542</span><br />

<br>
  <br>
 
          <div style="clear:both;"></div>



</div>



          </div><!-- end inner -->
     </div><!-- end outer -->
      <div id="footer">
           
</h1></div>
</div><!-- end container -->
</body>
</html>
0
 
radnorCommented:
Will not repost all, but this will leave white in the middle...

.red_line {
      background: red;
      width: 275px;
}
.blue_line {
      background: blue;
      width: 275px;
}

ADMIN NUMBERS....

<span class="lc red_line">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1 red_line">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc blue_line">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1 blue_line">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>
<span class="rc">102342</span><br />
0
 
valiconAuthor Commented:
It's BACK!  The code is back!  LOL  yes that works great...is there any way to center the entire list on the page?
0
 
radnorCommented:
Glad to see it working and in use!!!  

Sure, add this:

New class you'll have to play with for exact center.
.center_it {
      position: absolute;
      left: 50%;
      margin-left: -300px;
}

what this is doing....  Let's go to the center of the screen (left:50%).  Now, let's back off (go to the left, 300px (margin-left: -300px).  You MUST have the MINUS some number otherwise you'll be moving RIGHT more!

I added this JUST AFTER the <div id="content"> and BEFORE the <div style="clear both...>

<span class="center_it">
        <p>
        <h1>User Directory</h1>
          <p>
          <br>
           <b>Administration</b>
           <br>
           <br>

<span class="lc red_line">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1 red_line">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc blue_line">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1 blue_line">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>
<span class="rc">102342</span><br />

<br>
  <br>
  <b>Sales</b>
<br>
 <br>
<span class="lc">xxxxxxxxxxxxxx</span>
<span class="rc">162057</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">13542</span><br />

<br>
  <br>
</span>
0
 
valiconAuthor Commented:
The center function does not seem to work.
0
 
radnorCommented:
Come on now, you know me little better than that.....  Try this.  I did not want to post ful code but.  I think you may have missed a closing tag or something.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Beta</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="5.css" type="text/css" />
<style type="text/css">
h2 {text-decoration: underline}
a:hover{
color:black;
}
.center_it {
      position: absolute;
      left: 50%;
      margin-left: -300px;
}
.red_line {
      background: red;
      width: 275px;
}
.blue_line {
      background: blue;
      width: 275px;
}
.lc {
     position:absolute;
     left:0px;
     display:inline;
}
.rc  {
     position:absolute;
     left:200px;
     display:inline;
}
.lc1 {
     position:absolute;
     left:400px;
     display:inline;
}
.rc1  {
     position:absolute;
     left:600px;
     display:inline;
}


</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
</head>
<body>

<div id="header"><center>
  <img src="../_assets/img/front.jpg" alt="" width="800" height="57" border="0" /></center>
</div>


 <div id="container" >
     <div id="banner" ><a href=""></a>
          <h1>Beta</h1>
               </div>
     <div id="outer" >
           <div id="inner">
                <div id="left" >

<p>
             </div>

<div id="frame">



<fieldset id="searchbox">
     <legend><a href="">Search</a></legend>
     <form action="" name="searchbox">
          <input type="submit" value="search" />
          <input type="text" />
     </form>

</fieldset>
   </div>



<ul id="navigation">
<li><a href="index5.html" id="home">Menu Item</a></li>
<li><a href="page1.html" id="products">Menu Item</a></li>
<li><a href="forum\forum.asp" id="services">Menu Item</a></li>
<li><a href="page2.html" id="fun">Menu Item</a></li>
<li><a href="calendar.html" id="calendar">Menu Item</a></li>
<li><a href="empdir.html" id="current">Menu Item</a></li>
<li><a href="page3.html" id="training">Menu Item</a></li>
</ul>

             <div id="content" >
<span class="center_it">
        <p>
        <h1>User Directory</h1>
          <p>
          <br>
           <b>Administration</b>
           <br>
           <br>

<span class="lc red_line">xxxxxxxxxxxxxxxxxxx</span>
<span class="rc">10423</span>
<span class="lc1 red_line">xxxxxxxxxxxxxxxxx</span>
<span class="rc1">10450</span><br />
<span class="lc blue_line">xxxxxxxxxxxxxxxxxx</span>
<span class="rc">109996</span>
<span class="lc1 blue_line">xxxxxxxxxxxxxxx</span>
<span class="rc1">141000</span><br />
<span class="lc">xxxxxxxxxxxxx</span>
<span class="rc">102342</span><br />

<br>
  <br>
  <b>Sales</b>
<br>
 <br>
<span class="lc">xxxxxxxxxxxxxx</span>
<span class="rc">162057</span>
<span class="lc1">xxxxxxxxxxxxxxx</span>
<span class="rc1">13542</span><br />

<br>
  <br>
</span>
          <div style="clear:both;"></div>



</div>



          </div><!-- end inner -->
     </div><!-- end outer -->
      <div id="footer">
           
</h1></div>
</div><!-- end container -->
</body>
</html>
0
 
radnorCommented:
Valicon,

Did you try this?  I tested it with IE and FF.  Just checking on it's status.

Radnor
0
 
valiconAuthor Commented:
Sorry!  I was pulled away for a bit!  I will try it again today, but I was having some issues with the alignment.
0
 
8ball629Commented:
What are your issues? :)
0
 
valiconAuthor Commented:
I apologize for my absence. This project was on the back burner for a few weeks. The code above for some reason does not work. I am sure that it is me and not the code :)) Any other suggestions?
0
 
valiconAuthor Commented:
I placed the code above on a page by itself and only the first two lines are highlighted. The pattern does not repeat all the way down the page.
0
 
valiconAuthor Commented:
Thanks!  I have got the code working now, there was an error in the span class lines. Now that I fully understand the above I think I can get it to work!  Thanks for putting up with me :))
0
 
radnorCommented:
I'm sure you can.  You are defining TWO styles per line!

The other thing you can do is put the name/extention data in an array and loop through it.  If you did this, I'd put it in an EXTERNAL JS file and call it.  Would make editing it easier...

.02


Thanks for the close of the question.  If you need more help, ask.  That's what we are here for.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.