Add text to footer

[ladans37]

Took out the margin and now it’s sitting in the same spot as when I had put it in. No more gap. But I do want it to go above the word count.

[SamA74]

@ladans37

Ok, so why is there a big gap?

I have not seen all the HTML & CSS, so I can’t say.
The browser’s inspect tools should help you find out.

[ladans37]

Ok, well, it’s not there now. But it isn’t in the place where I want it to be either.

[ladans37]

I’ve also noticed that the word count went from 506 to 502 when I put the ::after element in. I guess it doesn’t consider pseudo elements.

[ladans37]

Ok I finally worked it out with

.post-body::after {
    content: '~ ♡ 🧡 ♡ ~';
    display:block;
    position:absolute;
    top:2260px;

}

b {
    position:relative;
    top:40px;
}

b is the word count element as in :

 $(document).ready(function() {
    $('.post-body').each(function(i) {
        var iTotalWords = $(this).text().split(' ').length;
        $(this).append("<b>" + iTotalWords + " words </b>");
        $("b").css({"font-family": "Open Sans, Arial, sans-serif"});
        $("b").css({"color": "#fff"});
        $("b").css({"font-size": "16px"});
        $("b").css({"text-shadow": "2px 1px 1px #ad8970, 4px 3px 1px #6d513e, 6px 5px 8px #735038"});
    });
});

[TechnoBear]

And as you can see, that works beautifully for me.

[ladans37]

@TechnoBear I see it’s sitting in the middle of text for you . Strange.

[TechnoBear]

@ladans37

Strange.

Not really.

As I believe has been pointed out to you on a number of occasions now, your approach to design is to use “magic numbers”, which will work on your screen with your font size settings, but will not work at other screen sizes, or if people increase font size. Your site is badly broken at my screen resolution, and presumably at many others, too.

If you’re serious about building a site for other people to view, then I’d suggest you slow down a bit, stop thinking about adding animations and fancy effects, and first get a good grasp of the basics of responsive design.

[PaulOB]

@ladans37

But I do want it to go above the word count.

Then apply it to the word count element instead (b element) in the correct place without any silly magic numbers all the time.

.post-body b::before {
    content: '~ ♡ 🧡 ♡ ~';
    display:block;
}

It will now appear above the word count without doing anything special at all. (The b element really should have a class and should be inside a block element not on its own like that.)

(AS an aside: Don’t move things with relative positioning. I’ve explained this to you before so if you don’t know why its wrong then don’t do it )

[ladans37]

@PaulOB

“I’ve explained this to you before”

You explained why it’s wrong?

.post-body b::before {
    content: '~ ♡ 🧡 ♡ ~';
    display:block;
}

I’ll try that out

[TechnoBear]

@ladans37

You explained why it’s wrong?

DIV Wrappers

You completely misunderstand the use of position:relative and what it does :). That’s not just you making this mistake but most beginners get this wrong and indeed some so called professionals. In 99% of cases you will never need to move things with co-ordinates using position:relative. When you apply position:relative and then say left:100px you are saying that this element should move from the left by 100px. However, and this is a big caveat, the element always maintains its position in the…

[ladans37]

In 99% of cases you will never need to move things with co-ordinates using position:relative.

Well, only other way I can think of,and have done is using margins if that’s what you’re referring to.

[ladans37]

I’m not trying to ignore you, nor the things you’re pointing out to me, that I should consider. I really appreciate it. I’m just clueless on how to fix “broken”, and could use some guidance and help with that. I think that’s why sometimes when I put in a new element, others fall out of place . I know I’ve seen that happen many times.

[ladans37]

In your example above you did not need to relatively move #box at all but simply use margins to move it across and down and maintain the flow of the document.

As you had said , and as I had mentioned earlier ,

Well, only other way I can think of,and have done is using margins if that’s what you’re referring to.

[TechnoBear]

What @SamA74 was trying to get you to think about earlier was not the gap itself, but what was causing the gap. These things don’t appear spontaneously; something in your code created that situation. So rather than throwing magic numbers at it - be they margins or positioning - to try to fill in the gap, your approach should be to discover what is creating the gap and try to resolve the issue there.

Of course, resolving all the issue in your page is going to be a big task. If you’re willing to learn, we can help you through it, but you do need to be willing to learn the basics and not keep jumping ahead of yourself.

[ladans37]

So rather than throwing magic numbers at it - be they margins or positioning - to try to fill in the gap, your approach should be to discover what is creating the gap and try to resolve the issue there.

I’m already doing this, some of the time. Yes, I am willing to learn. I just need the guidance. You tell me what to do, and I’ll be more than happy to do it, and to do it right. All I need is for y’all to tell me.

[ladans37]

Ok I just replaced my code with @PaulOB 's , by putting this in

.post-body b::before {
    content: '~ ♡ 🧡 ♡ ~';
    display:block;
}

Worked out well

[ladans37]

@TechnoBear I understand. You’re right. Erik is saying that it’s resolved in #37. I think he means the issue on the .post-body::before, and not the layout.