Responsive price list - how to shade alternate rows?

Teetime · November 13, 2015

I'm working on a responsive price list for my site. Here is the link: http://www.takeonesolutions.com/Price-List. The code is below. I'm trying to use CSS nth-of-type(odd) to color alternating rows but I'm not getting it right. How is the best way to achieve this?

<body>
<div id = "row">
<div class="item">
<p>This is a short entry.</p>
</div> <!--closing div class for "item"-->

<div class="price">
<p>$100</p>
</div><!--closing div class for "price"-->
</div> <!--closing div class for "row"-->
<div id = "row">
<div class="item">
<p>This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>
</div> <!--closing div class for "item"-->

<div class="price">
<p>$2100</p>
</div><!--closing div class for "price"-->
</div><!--closing div class for "row"-->
  
</body>

* {
    box-sizing: border-box;
}
.item {
    width: 80%;
    float: left;
    padding: 10px
}
.price {
    width: 20%;
    text-align: right;
    float: right;
    padding: 10px
}

.row:nth-of-type(odd) {
    background: green;
}

Allen · November 13, 2015

If it is an unlisted gallery you need the code /n-xxxxxxx at the end of the gallery link.
And also not the customize link.
...../Price-List/n-xxxxxxx

BTW, you can not use a tag, only one can exist on a page and Smug is already using it.
You can only use an ID name once on a page. You have two "row" defined.
Try

Teetime · November 13, 2015

Allen wrote: »

If it is an unlisted gallery you need the code /n-xxxxxxx at the end of the gallery link.
And also not the customize link.
...../Price-List/n-xxxxxxx

BTW, you can not use a <body> tag, only one can exist on a page and Smug is already using it.
You can only use an ID name once on a page. You have two "row" defined.
Try <div class = "row">

Allen, not sure what you mean by n-xxxxxxx. Also, this is a page, not a gallery if that makes any difference.

Thanks for the info re <body> tag and ID name. I've corrected those two items but I'm still not getting color on alternating (or any) rows.

Allen · November 13, 2015

Remove the /customize out of the link for it to work.
http://www.takeonesolutions.com/Price-List

Allen · November 13, 2015

As long as you are writing the html give each row a class. Then in CSS define a height and bg color.
With no height defined I don't think background would apply. Also be careful not to use any class
name that Smug already defines site wide, otherwise you'll be using a lot of "!important" to override.

<div class="rowEven">
  <div class="item">
  <p>This is a short entry.</p>
  </div> 

  <div class="price">
  <p>$100</p>
  </div>
</div> 

<div class="rowOdd">
  <div class="item">
  <p>This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>
  </div> 

  <div class="price">
  <p>$2100</p>
  </div>
</div>

<div class="rowEven">
  <div class="item">
...
...
</div>
<div style="clear: both;"></div>  <!-- clear floats -->

I have found when using floats in any html box that the clear floats is needed at the html end not to
interfere with the rest of the page. I believe a spacer GIF also works.

Teetime · November 13, 2015

Allen, good idea and it works, except "auto" for height doesn't work, and having to explicitly specify a height isn't satisfactory since the row heights vary quite a bit. Is the use of nested classes screwing with the auto height? Any ideas how to fix this?

http://www.takeonesolutions.com/Price-List

Hikin' Mike · November 13, 2015

Try this:

HTML
[html]
<div class="row">

<p class="price">$100</p>

<p class="item">This is a short entry.</p>

</div>

<div class="row">

<p class="price">$2100</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>

<div class="row">

<p class="price">$4000</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>
[/html]

CSS

* {
    box-sizing: border-box;
	}

.row {
	width: 100%;
	margin: 20px auto;
	padding: 20px 20px 40px;
	}
	
		/* even */
	.row:nth-child(2n+1) {
		background: red;
		}
		
		/* odd */
	.row:nth-child(2n) {
		background: green;
		}

.price {
    width: 20%;
    text-align: right;
    float: right;
	}

.item {
    width: 80%;
    float: left;
	}

Teetime · November 13, 2015

Mike, looks like a better way of nesting classes than what I originally had in mind, but still having trouble with the row heights - looks to be constant.

Hikin' Mike · November 13, 2015

When I posted the code, I forgot I added more content using ordered lists and took more height on my testing page.

You are going to have to call a specific height to make it work.

Teetime · November 15, 2015

Hikin' Mike wrote: »

When I posted the code, I forgot I added more content using ordered lists and took more height on my testing page.

You are going to have to call a specific height to make it work.

The problem I'm having with that is you have to specify enough height to vertically span the text on a mobile device. This results in a large amount of shaded space between the bottom line of text and the start of the next row when on a large monitor.

I've decided to go more with Allen's concept but add a horizontal separator line between line items in my price list. But I'm having a problem with that. I would appreciate it if one of you could look at the code and tell me what I'm doing wrong. Basically I've created a wrapper class "service" and I am decorating it with " border-bottom:1px gray solid". My expectation is it would draw a horizontal line beneath each "service" line item, but it is rendering it only once, after the "Packages" category.

http://www.takeonesolutions.com/Price-List

Here is what I would like for it to look like:

Hikin' Mike · November 15, 2015

Why not just add a "line div" between each service?

HTML
[html]
<div class="line"></div>
[/html]

CSS

.line {
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #000;
    }

Hikin' Mike · November 15, 2015

Just to add, your page shows all three lines (border-bottom) You have the same issue as before. You need to specify a height. The code I posted above will work, you'll just have to add it between the services and adjust the padding/margin as necessary.

[html]
<div class="row">

<p class="price">$100</p>

<p class="item">This is a short entry.</p>

</div>

<div class="line"></div>

<div class="row">

<p class="price">$2100</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>

<div class="line"></div>

<div class="row">

<p class="price">$4000</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>
[/html]

Teetime · November 15, 2015

Hikin' Mike wrote: »

Just to add, your page shows all three lines (border-bottom) You have the same issue as before. You need to specify a height. The code I posted above will work, you'll just have to add it between the services and adjust the padding/margin as necessary.

[html]
<div class="row">

<p class="price">$100</p>

<p class="item">This is a short entry.</p>

</div>

<div class="line"></div>

<div class="row">

<p class="price">$2100</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>

<div class="line"></div>

<div class="row">

<p class="price">$4000</p>

<p class="item">This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on. This is a long entry in the price list that will wrap on mobile displays because it goes on and on and on.</p>

</div>
[/html]

Mike, that code looks like the earlier test version. I'm curious, looking at the current code at http://www.takeonesolutions.com/Price-List vs the code in this example, what did I do different that is preventing me from getting the results they show?

Hikin' Mike · November 15, 2015

Your example includes a height. Your page doesn't.

.divInside {
    width:200px;
    [B]height:80px;[/B]
    color:#fff;
    background-color:blue;
}

Teetime · November 15, 2015

Hikin' Mike wrote: »
Why not just add a "line div" between each service?

HTML
[html]
<div class="line"></div>
[/html]

CSS
.line {
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #000;
    }

Mike, when I add your line code in I get the same result (one line under the "Packages" line), so there is something in my code that is wreaking havoc. Can you see anything here? This is the my code before adding your line code. You can see this at http://www.takeonesolutions.com/customize/Price-List:

<div class="heading">
  <div class="no">
  <p><b>No</b></p>  
  </div>
  <div class="item">
  <p><b>Item</b></p>
  </div> 
  <div class="price">
  <p><b>Price</b></p>
  </div>
</div>

<div class="group">
  <h3><strong>Packages</strong></h3>  
</div>

<div id ="p01" class="service">
  <div class="no">
    <b>P01</b>  
  </div>
  <div class="item">
    <b>Video Montage (moving photos set to music)</b>
     <p> • Animate up to 50 customer supplied digital images
     <br>• Color correct and remove "redeye" from photos
     <br>• Provide custom title
     <br>• Set to music
     <br>• Deliver on DVD or Blu-ray, typical length 3-5 minutes</p>
  </div> 
  <div class="price">
  <p>$129.00</p>
  </div>
  <div class="option">
    Additional digital image, each: $1.00	
    <br>Additional copies, DVD or Blu-ray, each: $10.00
    <br>Add scan photos, each: $1.50
    <br>
    <br>
  </div>  
</div> 

<div id="p02" class="service">
  <div class="no">
    <b>P02</b>  
  </div>
  <div class="item">
    <b>Promotional Video</b>
     <p> • Shoot 1/2 day (up to 4 hours) video with one HD camera and shotgun mic using natural lighting and customer provided script and/or shot list
     <br>• Color balance and edit to produce an artful and compelling promotional video for your business
     <br>• Create custom titling, tasteful graphics and effects
     <br>• Deliver on DVD or Blu-ray, typical finished length 1-3 minutes</p>
  </div> 
  <div class="price">
  <p>$600.00</p>
  </div>
  <div class="option">
    Prepare and include professional voice-over from customer supplied script: $100.00	
    <br>Additional copies, DVD or Blu-ray, each: $10.00
    <br>
    <br>
  </div>  
</div> 

<div id="p03" class="service">
  <div class="no">
    <b>P03</b>  
  </div>
  <div class="item">
    <b>Wedding Ceremony and Reception</b>
       <br>• Video 1/2 day (up to 4 hours) using one professional HD camera and shotgun mic, wireless mic on officiant, and natural lighting
  <br>• Color balance and edit to produce an artful documentary of your wedding
  <br>• Include custom titling, tasteful graphics and effects    
  <br>• Include pre-ceremony, ceremony, reception and "highlights" trailer
  <br>• Deliver on DVD, Blu-ray or web, typical finished length 45-60 minutes  

  </div> 
  <div class="price">
  <p>$1000.00</p>
  </div>
  <div class="option">
    <br>Add 2nd HD camera and operator, per hour, (2 hour minimum): $1.00	
    <br>Add additional copies (DVD or Blu-ray), each: $10.00
    <br>
    <br>
  </div>  
</div> 

<div style="clear: both;"></div>  <!-- clear floats -->

.group {
    width: 100%;    
    text-align: center;
}

.service {    
    border-bottom:1px gray solid;
}

.no {
    width: 10%;
    float: left;
    padding: 5px
}
.item {
    width: 60%;
    float: left;
    padding: 5px
}
.option {
    width: 100%;
    float: right;
    text-align: right;
    padding: 5px;
}

.price {
    width: 20%;
    text-align: right;
    float: right;
    padding: 5px
}

Hikin' Mike · November 15, 2015

Give me some time. I copied your code on my testing page....

Hikin' Mike · November 15, 2015

PM sent....

Responsive price list - how to shade alternate rows?

Comments