[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Alternating color rows help needed

Posted on 2006-04-27
17
Medium Priority
?
198 Views
Last Modified: 2012-06-21
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>



0
Comment
Question by:valicon
  • 7
  • 7
  • 2
16 Comments
 

Expert Comment

by:8ball629
ID: 16559285
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
 
LVL 12

Author Comment

by:valicon
ID: 16561960
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
 
LVL 8

Expert Comment

by:radnor
ID: 16563174
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 8

Expert Comment

by:radnor
ID: 16563244
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
 
LVL 12

Author Comment

by:valicon
ID: 16563277
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
 
LVL 8

Expert Comment

by:radnor
ID: 16563421
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
 
LVL 12

Author Comment

by:valicon
ID: 16563981
The center function does not seem to work.
0
 
LVL 8

Expert Comment

by:radnor
ID: 16564035
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
 
LVL 8

Expert Comment

by:radnor
ID: 16605697
Valicon,

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

Radnor
0
 
LVL 12

Author Comment

by:valicon
ID: 16614528
Sorry!  I was pulled away for a bit!  I will try it again today, but I was having some issues with the alignment.
0
 

Expert Comment

by:8ball629
ID: 16617392
What are your issues? :)
0
 
LVL 12

Author Comment

by:valicon
ID: 16887242
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
 
LVL 12

Author Comment

by:valicon
ID: 16887275
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
 
LVL 8

Accepted Solution

by:
radnor earned 2000 total points
ID: 16887328
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
 
LVL 12

Author Comment

by:valicon
ID: 16887432
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
 
LVL 8

Expert Comment

by:radnor
ID: 16887480
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month19 days, 7 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question