Skip navigation
NeoGen Hawk
NeoGen Hawk
Currently Being Moderated

Setting line colour to table

Aug 5, 2012 1:07 PM

Hi,

 

I need to specify a line colour to just one line in a table, this is the page: http://www.nick-lawrence.co.uk/testimonials.html I want to split the different testimonials up by a black line, there will be more as I add to them.

 

Any help greatly appreciated.

 

Thanks

 

 

 

Nick

715 Views   13 Replies   Latest reply: NeoGen Hawk, Aug 7, 2012 10:26 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Aug 5, 2012 1:14 PM   in reply to NeoGen Hawk
    Report

    Change this -

     

    Paul and Mia</p></td>

          </tr>

          <tr>

     

    to this -

     

    Paul and Mia</p></td>

          </tr>

       <tr>

         <td colspan="2"><hr></td>

       </tr>

          <tr>

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    2. Ken Binney,
    Aug 5, 2012 4:23 PM   in reply to MurraySummers
    Report

    Hi Murr -

     

    Could OP just put the <HR> at the end of the <td> without adding extra rows/cells?

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Aug 5, 2012 5:01 PM   in reply to Ken Binney
    Report

    Sure....

     
    |
    Mark as:
  • NeoGen Hawk
    Currently Being Moderated
    4. NeoGen Hawk,
    Aug 6, 2012 1:08 AM   in reply to Ken Binney
    Report

    Many thanks Murray,

     

    Ken do you mean like this:

     

    Paul and Mia</p></td>

          </tr>

       <tr>

         <td colspan="2"><hr></td>

     

    ?

     

    Many thanks

     

     

    Nick

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Aug 6, 2012 1:40 AM   in reply to NeoGen Hawk
    Report

    The images on the left -  do they relate to the quote - or are they just decorative?

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    6. Ken Binney,
    Aug 6, 2012 3:34 AM   in reply to NeoGen Hawk
    Report

    No Nick,

     

    put the <HR> at the end of the cell containing the signature

     

    <p class="testimonial"> <br>

            Paul and Mia</p> <HR> </td>

          </tr>

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    Aug 6, 2012 4:01 AM   in reply to Ken Binney
    Report

    Ken Binney wrote:

     

    No Nick,

     

    put the <HR> at the end of the cell containing the signature

     

    <p class="testimonial"> <br>

            Paul and Mia</p> <HR> </td>

          </tr>

    Hi Ken,

     

    I was questioning as to if the images on the left side some how related to the quotes on the right side.

     

    If you look at the set up each quote is in its own <td> cell so depending on the length of the quote there will be an unequal space after each quote. Inserting the <hr> after the last <p> tag may look a bit odd.

     

    IF the images on the left ARE NOT related to the text on the right then the quotes don't need to be in their own <td> cell so the <hr> after the end of each quote would work well.

     

    IF the images on the left DO related to the text on the right then it may be better to create the rule by adding a border to the top of the <h2> tag. This will then create a line adjacent to the end of the image on the left, which may look better presented.

     

    Just a thought.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    8. Ken Binney,
    Aug 6, 2012 7:49 AM   in reply to osgood_
    Report

    Hi back Os...good hearing from you.

    As usual, all very good options.

     

    Nick,  please take note.

     
    |
    Mark as:
  • NeoGen Hawk
    Currently Being Moderated
    9. NeoGen Hawk,
    Aug 6, 2012 7:57 AM   in reply to Ken Binney
    Report

    Hi Guys,

     

    Thanks for all your input, apologies for the delay in replying I have been out and about so unable to reply.

     

    To update the question and clarify it the images on the left need to be with the quote, so the line would probably be better going all the way across would this then be the best method:

     

    <p class="testimonial"> <br>

            Paul and Mia</p> <HR> </td>

          </tr>

     

    Or would it be better to do this: 'to create the rule by adding a border to the top of the <h2> tag' and if so how wopuld I do it?


    Many thanks

     

     

     

    Nick

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    10. osgood_,
    Aug 6, 2012 8:23 AM   in reply to NeoGen Hawk
    Report

    NeoGen Hawk wrote:

     

    Or would it be better to do this: 'to create the rule by adding a border to the top of the <h2> tag' and if so how wopuld I do it?


     

    I'd say you're going to better off with a top border on the h2 tag:

     

     

    Use the below as the table html instead of what you have now:

     

     

    <table class="testimonial">

    <tr>

    <td><img src="http://www.nick-lawrence.co.uk/images/testimonials/mia-001.jpg" width="267" height="400" alt="mia"></td>

    <td class="testimonialText">

    <h2 style="border: none;">Paul &amp; Mia</h2>

    <p>Hi Nick<br>

    <br>

    The album is amazing. You have done a brilliant job with it and we are both so happy!!!  Thank you so much for all your help on the day and with the album.<br>

    <br>

    Regards<br>

    </p>

    <p><br>

    Paul and Mia</p></td>

    </tr>

    <tr>

    <td><img src="http://www.nick-lawrence.co.uk/images/testimonials/robina-001.jpg" width="267" height="400" alt="robina"></td>

    <td class="testimonialText">

    <h2>Richard &amp Robina</h2>

    <p>Dear Nick,<br>

    <br>

    Many thanks for a great day, within minutes of meeting you at our pre wedding shoot we knew that you would be able to create something unique and special. I hate my photo being taken but you made us feel so relaxed and at ease, your professionalism and imaginative photography created photographs that we didn't think would even be possible. The album is simply stunning, everything we could have wanted and more.<br>

    <br>

    Thanks again, we had the best day ever.<br>

    <br>

    Lots of love<br>

    <br>

    Robina and Rich xxx</p></td>

          </tr>

        </table>

     

     

     

    Then use this as the css instead of what you have now:

     

     

     

    .testimonial h2 {

        margin: 0;

        padding: 20px 0 20px 0;

        color:#000;

        border-top: 1px solid #000;

    }

    .testimonial p {

    color: #000;

    }

    .testimonialText {

        padding: 0 20px 0 20px;

        background-color: #FAFAFA;

        width: 100%;

    }

    .pic {

        width: 267px;

    }

     
    |
    Mark as:
  • NeoGen Hawk
    Currently Being Moderated
    11. NeoGen Hawk,
    Aug 6, 2012 11:19 AM   in reply to osgood_
    Report

    Hi osgood,

     

    Many thanks for your help, I've made the changes but must have done something wrong as it looks completely different. http://www.nick-lawrence.co.uk/testimonials.html The background has gone and the lines are not really lined up, what I'm looking for is this:

     

    screenshot.jpg

     

    This is what I had:

     

    }

    .testimonial {

              padding: 0 10px 0 10px;

              color: #000;

              font-family: Arial, Helvetica, sans-serif;

              margin-left: auto;

              margin-right: auto;

              border-width: 0 0 0 0;

              border-collapse : collapse;

              text-align:justify

    }

    .testimonial td { vertical-align:top; }

     

    And I changed it for this:

     

    }

    .testimonial h2 {

        margin: 0;

        padding: 20px 0 20px 0;

        color:#000;

        border-top: 1px solid #000;

    }

    .testimonial p {

    color: #000;

    }

    .testimonialText {

        padding: 0 20px 0 20px;

        background-color: #FAFAFA;

        width: 100%;

    }

    .pic {

        width: 267px;

    }

     

     

    Many thanks

     

     

     

    Nick

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    12. osgood_,
    Aug 6, 2012 11:43 PM   in reply to NeoGen Hawk
    Report

    Hi Nick

     

    If you want the horizontal lines to go from edge to edge then use the css below:

     

    .testimonial td {

        vertical-align: top;

        padding: 0;

    }

    .testimonial h2 {

        margin: 0;

        padding: 20px 0 20px 20px;

        color:#000;

        border-top: 1px solid #000;

    }

    .testimonial p {

    color: #000;

    padding-left: 20px;

    }

    .testimonialText {

        padding: 0 20px 0 20px;

        background-color: #FAFAFA;

        width: 100%;

    }

    .pic {

        width: 267px;

    }

     
    |
    Mark as:
  • NeoGen Hawk
    Currently Being Moderated
    13. NeoGen Hawk,
    Aug 7, 2012 10:26 AM   in reply to osgood_
    Report

    Hi osgood,

     

    Perfect, just what I was after many thanks.

     

     

    Nick

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points