No transforms won’t help you as the move items visually only just like relative positioning. They don’t move the element physically into a new flow of the document. Absolute positioning removes items from the flow and can only be used in controlled situations where the flow of the document is already taken care of.
Try to let elements naturally occur at the point you want using flexbox, or some other layout method and then you just need small margins or padding to space them out. Don’t use margins with high numbers because that means you have done it wrong. Most margin will just nudge elements to make space but once you say something like margin-left:300px the chances are you’ve done it wrong.
I have previously given you examples where I have coded your elements without the need for magic numbers or and limited positioning rules. If you design properly then you don’t need to always position things. You just make sure they are in the right place via the structure you use. For example you placed all those little square images individually with relative positioning when you could have used flexbox (or indeed floats) to align them horizontally and let them wrap without any positioning at all. However you have to build the html in a way that allows you to do that.
I can’t really teach you how to do it you just have to go away and practice
Yes that would be better than relative positioning because you already have the clock taking up space in the flow so absolutely placing something on top is fine in this instance.
I can’t really teach you how to do it you just have to go away and practice
Hoping someone can, cause I can’t even teach myself. I’m just getting it all messed up. I tried removing position:relative totally, along with the top: and left: on the square images you were mentioning. It just threw off a couple of the other square images.
I think you need to take a step back as you are battling concepts outside of your skill level or knowledge.
You really need to take a small course on CSS layout techniques so that you get a basic understanding of the structure you need in order to lay things out successfully on a page. There are many free courses around or the paid ones on Sitepoint are very good.
You really need to spend a few weeks just getting to grips with the basic concepts rather than just throwing random rules at content until it appears to fit your needs.
I have been trying to teach you but even though I repeatedly tell you not to use things like relative positioning you continue to use it for virtually every element on your page. I realise that’s because you don’t yet understand how to layout pages properly and you are just doing it piecemeal. You really need to step away and work through some tutorials and examples and then things may start to make sense.
That element has a fixed height of 297px yet to have decided to put every single item in your column inside that div! It was just supposed to wrap the calendar and is only 297px. How can you expect content that is about 1000px (or more) tall to fit inside properly? That’s not CSS that’s just common sense to know that there would be a problem there.
You also place separate elements on top of other separate elements instead of creating and grouping a proper structure for the task in hand. All those follower images are magic numbered into place one at a time. They could have all been lined up with a few lines of code and no positioning.
As I said I can tell you how things should be but I can’t make you learn. You have to do that for yourself. I have given you in depth instruction on how pages are laid out and how you should approach things so now its up to you to go away and practice some methods and then you can come back and start tidying up your code.
Other than that everything else in that wrapper looked like it belonged. I don’t have a good eye for spotting code that doesn’t belong in a particular div, so I still might have missed more.
Blockquote You’ve put it inside the .calendar-wrapper div, along with all the other things Paul pointed out which don’t belong there.
Yes, I’m aware of that issue. Will get to that soon. Haven’t forgotten. But I’m bothered with the fact that Paul says I’m using magic numbers. I want to fix this. I just don’t see how.
There is little point (it seems to me) in “fixing” the layout with the HTML structure incorrect, and then correcting the HTML structure and fixing the layout all over again.
As I’m sure we’ve said before, start by getting the basic HTML structure correct, and then add CSS. You don’t wallpaper your walls and then go back to fix the holes in the underlying plaster, but that’s what you’re trying to do here.
You don’t wallpaper your walls and then go back to fix the holes in the underlying plaster
Course not. It’s not my intention. I guess I’m doing that without knowing I am.
start by getting the basic HTML structure correct, and then add CSS
If only I could find examples of this. I don’t know what I’m missing out. The issues I’m seeing for now are : removing the HTML from the calendar-wrapper, which will then require me to rearrange the other elements as they will fall out of place, and then figuring out how I can avoid using positioning so often. This one is still a challenge.
All we’re saying is to think about the structure of your site logically. There are no “examples” as such. You have been given advice on this already, by me and by Paul.
You just need to slow down and take it step by step. Trying to do everything at once will never work, and trying to fix the layout before you sort out the HTML is a waste of time.
Take everything which is not part of the calendar out of .calendar-wrapper. What is the next item in your column? Put a wrapper around all the elements connected with that (if there isn’t a wrapper there already). Move on to the next item and repeat, until everything is in it’s own “box” and can be taken out or moved around without affecting anything else. Remember to check your code in the HTML Validator to catch any typos or other errors.
Now you can move on to styling things so they look the way you want them to. Again, deal with one item at a time, in a logical order.
.