Need some help with CSS and divs

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Smack dat
    So Fucking Banned
    • Jul 2016
    • 4613
    #1

    Need some help with CSS and divs

    Hi,

    Can anyone help me with a little formatting problem I have?

    There are two problems:

    1. In the image below, the full review links are not lined up. Obviously, this is due to the length of the review snippet above. How can I align them?


    [click to view]

    2. Also, in that image the div image looks rubbish. I think this is the CSS code that deals with it.

    Code:
    a.readmore span {
    display: block;
    background: url(images/readmore.png) no-repeat;
    height: 38px;
    padding: 0 0 0 19px;
}
    This is the readmore.png image. How can I make it look better?


    [click to view]
    Tags: None
    • machinegunkelly
      Confirmed User
      • Jun 2003
      • 3304
      #2
      Code:
      <div class="site">
    <div class="review-container">
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
    </div>
</div>

<style>
    .site {
        max-width: 1170px;
        margin: auto;
        padding: 20px;
        ;
    }

    .review-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }

    .review {
        padding: 20px;
        padding-bottom: 40px;
        position: relative;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    }

    .read-more {
        padding: 10px 30px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        background: #6f9454;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
        border-radius: 25px;
        border: 1px solid #435f2f;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);
        text-decoration: none;

    }

    @media all and (min-width: 992px) {
        .review-container {
            grid-template-columns: 1fr 1fr 1fr;
        }

    }
</style>
      dead.

        Comment

        • Smack dat
          So Fucking Banned
          • Jul 2016
          • 4613
          #3
          Originally posted by machinegunkelly
          Code:
          <div class="site">
    <div class="review-container">
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
    </div>
</div>

<style>
    .site {
        max-width: 1170px;
        margin: auto;
        padding: 20px;
        ;
    }

    .review-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }

    .review {
        padding: 20px;
        padding-bottom: 40px;
        position: relative;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    }

    .read-more {
        padding: 10px 30px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        background: #6f9454;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
        border-radius: 25px;
        border: 1px solid #435f2f;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);
        text-decoration: none;

    }

    @media all and (min-width: 992px) {
        .review-container {
            grid-template-columns: 1fr 1fr 1fr;
        }

    }
</style>
          Thankyou. Hope it works.

            Comment

            • RyuLion
              ClubDomCash.com
              • Mar 2003
              • 32369
              #4
              Originally posted by machinegunkelly
              Code:
              <div class="site">
    <div class="review-container">
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate
            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint
            voluptate quasi sit provident.
            <a class="read-more" href="#">Read More</a>
        </div>
    </div>
</div>

<style>
    .site {
        max-width: 1170px;
        margin: auto;
        padding: 20px;
        ;
    }

    .review-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }

    .review {
        padding: 20px;
        padding-bottom: 40px;
        position: relative;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    }

    .read-more {
        padding: 10px 30px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        background: #6f9454;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
        border-radius: 25px;
        border: 1px solid #435f2f;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);
        text-decoration: none;

    }

    @media all and (min-width: 992px) {
        .review-container {
            grid-template-columns: 1fr 1fr 1fr;
        }

    }
</style>
              Awesome!
              https://ryulion.com/layout.htm

              Adult Biz Consultant A tech head since 1995
              Affiliate Support: Chaturbate | CCBill Live

                Comment

                • machinegunkelly
                  Confirmed User
                  • Jun 2003
                  • 3304
                  #5
                  Originally posted by Smack dat
                  Thankyou. Hope it works.
                  dead.

                    Comment

                    • Smack dat
                      So Fucking Banned
                      • Jul 2016
                      • 4613
                      #6
                      Originally posted by machinegunkelly
                      Ok, first of all I want to say thanks for this code. It works beautifully in the .php file I made.
                      I'm just not sure how I would put this into my theme though. Any idea?

                        Comment

                        • machinegunkelly
                          Confirmed User
                          • Jun 2003
                          • 3304
                          #7
                          Originally posted by Smack dat
                          Ok, first of all I want to say thanks for this code. It works beautifully in the .php file I made.
                          I'm just not sure how I would put this into my theme though. Any idea?
                          it's hard to say,based on exactly 0 information about the theme or system, you will need to edit your theme for sure with my code and it will look something like this. good luck!

                          Code:
                          <div class="review-container"> 

    // Start your loop of reviews .. 
    <?php foreach ($reviews as $review) { ?>
        <div class="review">
            <?php echo $review->description; ?>
            <a class="read-more" href="<?php echo $review->link; ?>">Read More</a>
        </div>
    <? } ?> 

</div>
                          Study existing code to pull the correct values..
                          And of course, my CSS must be added to your CSS file

                          As a side note, you may want to remove the 'site' class I used, when using this code, I set a max width to it, that may not match your site, or theme.
                          dead.

                            Comment

                            • Smack dat
                              So Fucking Banned
                              • Jul 2016
                              • 4613
                              #8
                              Originally posted by machinegunkelly
                              it's hard to say,based on exactly 0 information about the theme or system, you will need to edit your theme for sure with my code and it will look something like this. good luck!

                              Code:
                              <div class="review-container"> 

    // Start your loop of reviews .. 
    <?php foreach ($reviews as $review) { ?>
        <div class="review">
            <?php echo $review->description; ?>
            <a class="read-more" href="<?php echo $review->link; ?>">Read More</a>
        </div>
    <? } ?> 

</div>
                              Study existing code to pull the correct values..
                              And of course, my CSS must be added to your CSS file

                              As a side note, you may want to remove the 'site' class I used, when using this code, I set a max width to it, that may not match your site, or theme.
                              Many thanks!

                                Comment

                                Previous template Next
                                Working...