Welcome to the GoFuckYourself.com - Adult Webmaster Forum forums.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so please, join our community today!

If you have any problems with the registration process or your account login, please contact us.

Post New Thread Reply

Register GFY Rules Calendar
Go Back   GoFuckYourself.com - Adult Webmaster Forum > >
Need some help with CSS and divs Need some help with CSS and divs
Discuss what's fucking going on, and which programs are best and worst. One-time "program" announcements from "established" webmasters are allowed.

 
Thread Tools
Old 04-24-2020, 02:53 PM   #1
Smack dat
So Fucking Banned
 
Industry Role:
Join Date: Jul 2016
Posts: 4,613
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]
Smack dat is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 04-24-2020, 07:10 PM   #2
machinegunkelly
Confirmed User
 
machinegunkelly's Avatar
 
Join Date: Jun 2003
Posts: 3,277
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.
machinegunkelly is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 04-25-2020, 02:13 PM   #3
Smack dat
So Fucking Banned
 
Industry Role:
Join Date: Jul 2016
Posts: 4,613
Quote:
Originally Posted by machinegunkelly View Post
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.
Smack dat is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 04-25-2020, 02:38 PM   #4
RyuLion
ClubDomCash.com
 
RyuLion's Avatar
 
Industry Role:
Join Date: Mar 2003
Location: San Diego
Posts: 32,177
Quote:
Originally Posted by machinegunkelly View Post
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
RyuLion is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 04-28-2020, 11:23 AM   #5
machinegunkelly
Confirmed User
 
machinegunkelly's Avatar
 
Join Date: Jun 2003
Posts: 3,277
Quote:
Originally Posted by Smack dat View Post
Thankyou. Hope it works.
__________________
dead.
machinegunkelly is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 05-03-2020, 06:10 AM   #6
Smack dat
So Fucking Banned
 
Industry Role:
Join Date: Jul 2016
Posts: 4,613
Quote:
Originally Posted by machinegunkelly View Post
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?
Smack dat is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 05-04-2020, 01:12 PM   #7
machinegunkelly
Confirmed User
 
machinegunkelly's Avatar
 
Join Date: Jun 2003
Posts: 3,277
Quote:
Originally Posted by Smack dat View Post
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.
machinegunkelly is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Old 05-04-2020, 02:26 PM   #8
Smack dat
So Fucking Banned
 
Industry Role:
Join Date: Jul 2016
Posts: 4,613
Quote:
Originally Posted by machinegunkelly View Post
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!
Smack dat is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote
Post New Thread Reply
Go Back   GoFuckYourself.com - Adult Webmaster Forum > >
Need some help with CSS and divs Need some help with CSS and divs
« Previous Thread | Next Thread »

Bookmarks

Tags
image, view], [click, review, css, rubbish, https://ibb.co/0hzszz6, code, div, deals, block;, https://ibb.co/0ccsbxh, background, urlimages/readmore.png, height, 38px;, padding, a.readmore, readmore.png, 19px;, span, display, no-repeat;, length, formatting



Advertising inquiries - marketing at gfy dot com

Contact Admin - Advertise - GFY Rules - Top

©2000-, AI Media Network Inc



Powered by vBulletin
Copyright © 2000- Jelsoft Enterprises Limited.