More learning opportunities then 
3 Likes
Perhaps at this stage you could explain what it is you hope to gain from this thread, as we have reached 222 posts with little visible progress?
Paul has given you a working basic layout with valid code (apart from a tiny typo in the CSS, @PaulOB 
), but you seem reluctant to use it. Your own code has multiple errors which will require fixed. Now, it’s perfectly possible to work through all of those, learning as you go, but I have the impression you’re too impatient for that, and want the quickest solution. Certainly, you have seemed reluctant to read and learn about various CSS techniques, something which would not only help you now, but stand you in good stead going forward.
As things stand, there is little any of us can do to help, as we cannot see the code you are using. Paul suggested four days ago that you should put it in a codepen so we could see it and advise properly, rather than just guessing at what you’re doing, but you’ve chosen not to do so. You have also failed to answer many of the questions which people have asked in an attempt to assist you.
So please, before we go any further, answer these questions.
- How do you plan to proceed from here?
- What assistance do you expect from this thread?
- Are you willing to co-operate by sharing the code you are working on, and by answering questions?
4 Likes
Well I’m working with the Pen Paul has sent, and it seems to be going well. The validation is from the page source by the way, and not Tumblr.
Only the assistance of creating the 3 column layout, which, obviously Paul got me going with.
I’d be happy to share the code if still helpful. I am impatient at times, yeah.
I certainly agree with you saying that there’s nothing wrong with being a beginner, but I also feel that there’s nothing wrong with getting some help. Is why I felt I needed a boost to get going, so I can continue on my own.
We always need to see the code if you have a problem and are asking for assistance with it.
If, as seems to be the case, you are now using Paul’s code from post 222, then we know that works. If something you add causes problems, or doesn’t behave as expected, then we would need to see the full code you are using to see what has happened and help you fix it. Screenshots don’t really tell us anything, except that there is a problem.
Please remember to keep validating your code - both HTML and CSS - after each item you add, to keep on top of errors.
Nothing at all - that’s why the forums exist. 
But if you’re asking for help, you need to state the issue clearly and co-operate with those trying to assist. (You might find this article helpful: https://zellwk.com/blog/asking-questions/ .)
3 Likes
Please remember to keep validating your code - both HTML and CSS - after each item you add, to keep on top of errors.
I will try my best. Thank you for sharing the link, I’ll look into it soon .
We always need to see the code if you have a problem and are asking for assistance with it.
If, as seems to be the case, you are now using Paul’s code from post 222, then we know that works. If something you add causes problems, or doesn’t behave as expected, then we would need to see the full code you are using to see what has happened and help you fix it. Screenshots don’t really tell us anything, except that there is a problem.
Totally understand. Yes, I am using Paul’s code. I’m working with the one-element-at-a-time approach, so as to be careful with how it’s placed. For example, yesterday, I tried adding my clock, and it did not go well. It pushed off my calendar’s header some. So I figured, maybe I need to put it in one piece at a time, as it has many parts .
As Paul explained elsewhere, each of your sections should be in a <div></div> of its own, so it can be moved or repositioned as a whole, without disturbing other elements. Hopefully you are remembering to follow that advice.
1 Like
Yes, I understand. They usually are in <div></div> tags. I don’t remember ever leaving one out of them. Some even have either wrappers or containers.
Obviously lol. But here,
Is where I’m sometimes confused, as you say
If something you add causes problems, or doesn’t behave as expected, then we would need to see the full code you are using to see what has happened and help you fix it.
I’ve also found this helpful
1 Like
The forums are a place for public discussion, so as I’ve explained to you elsewhere, the correct place to ask questions on the forum is in a public thread. That makes the discussion available to anybody else with a similar question. Emails and PMs are not in the spirit of the forums and should therefore not be used here.
The article I linked to was intended as a general guide to asking questions, not something I expected you to take verbatim as applying in every respect to the forums.
By “full code”, I mean everything which is relevant to the problem at hand. Posting odd snippets of CSS without the relevant HTML is no help, and posting insufficient code to replicate the issue is of no help.
Have you read the Forum Posting Basics?
2 Likes
I understand . No I haven’t, but I will.
Try just putting the clock into codepen by itself and getting it all to work there first. Remove the absolute positioning from #clock and set it to position:relative and then remove the co-ordinates and margins.
It will npw be in the flow and you can then position the smaller components on top as required. There will be issues as you have transformed it smaller which means the rest f the page will still think the clock is at the original size.
I’ve added it to the codepen I did above as a rough guide but you should try for yourself in codepen first,
2 Likes
@PaulOB I see that you do have a position and margin set in this part
#clock {
padding: 10px;
max-width: 100%;
min-width: 280px;
overflow: hidden;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
box-sizing: content-box;
}
As for this one
/* don't know what this is
#clock:after {
content: '';
position: absolute;
width: 400px;
height: 20px;
border-radius: 100%;
left: 50%;
margin-left: -200px;
bottom: 2px;
z-index: -1;
}
*/
That is the shadow to the clock. It’s behind it, so can’t be seen really. I can eliminate it though.
Yes the position:relative is there so that the child absolute elements have a reference point for their coordinates. Without that in place you’d be placing any child elements in relation to the viewport which has been the main basis of your problems all along.
Now when you move the html for the clock then everything inside is automatically moved with it.
2 Likes
Ok. Well I’m having a terrible time putting in the am/pm part. I’m pretty sure the code is correct, as far as I know
<div id="corner"></div>
<button id="btnPrev" type="button">⟢</button>
<button id="btnNext" type="button">⟣</button>
<div id="divCal"></div>
<div id="clock" class="light">
<div class="display">
<div class="weekdays">
</div>
<div class="ampm">
</div>
</div>
</div>
</a>
</div>
</div>
/*-------------------------
AM/PM
--------------------------*/
#clock .ampm {
position: absolute;
bottom: 20px;
right: 8px;
font-size: 75%;
font-family: Segoe UI, Arial, Verdana, "Digital-7";
}
It just won’t show up anywhere. I even tried changing position:absolute to relative, top: instead of bottom:
Oh… just realized that
<div id="corner"></div>
is not relevant. Didn’t mean to copy that one.
Ok this is very VERY strange. The AM/PM will only show up…at least the background color I added to it, if I type something in between its tags <div class="ampm">123123123</div> .
Very unusual. Never encountered this before. Not even in my test page, or CodePen.