CSS positioning elements - My greatest stumbling block

HTML-CSS
1

Hi There

Could anyone please provide me on feedback on how to better understand structuring my page and my elements right off the bat? I’m struggling to get a grip on how to best approach positioning elements/ structuring my page, whatever it would be defined as…

I’ve been trying to figure it out myself, but I feel like I keep confusing myself MORE!!! I’m a Charlie Kelly trying to understand a Spa day!

Here is a project I put together while practicing, trying to figure out a way to set elements in line with each other, as every time I tried, the elements would never line up on either side of each other.

https://codepen.io/entheogenick/pen/xNMajZ

If you would be so kind as to look at my HTML too, because I feel like I’m just getting further from any kind of progress… ANY help or criticism would be greatly appreciated.

And if you have any advice on how best to overcome the positioning stumbling block, that would truly be incredible, I’m not expecting a magic fix, I’ll work hard as hell on it, but from the communities side you may have a book or site that would be able to really hold my hand, like a damn child!

Thank you so so much!

2

It’s better if the label and its input(s) are inside the same parent container. That makes applying the layout on each row much easier. Say,

<div class="row">
  <label for="name" ...>Name:</label>
  <input id="name" ...>
</div>

Then you can add flex styles to the .row class.

Also note that <ul> (and <ol>) only accepts <li> as direct children. This is wrong:

<ul>
  <div>...</div>
</ul>
3

ids are meant to be unique. Your labels and dropdown items have repeated ids. Those should be changed to a class if you’re going to use them like that.

4

  1. On Codepen if you press the down arrow to the right of the HTML code box and select “Analyze HTML” it will list the problems.

  2. I’d like to point out that you don’t have to make it like the example project. If you search for form design examples, 8 out of 10 will either have the labels and inputs stacked, or the label won’t be visible and the inputs will have what would have been the label text inside them. There are right and wrong ways of doing this but for now, I’m just pointing out the design part of it.

  3. The form project is pretty good for learning CSS Grid and flexbox.

  4. The more you use CSS the better you will learn it. You can read books/articles and watch tutorials till the cows come home, it won’t help until you start to put it into practice. I’d suggest doing small simple component stuff and playing around with layout techniques using simple colored boxes.

You can also use borders and background colors on elements to better visualize the boxes. Try to get a better understanding of the box model.

/* Give everything a red border */
* {
  box-sizing: border-box;
  border: 1px solid red;
}

I’d strongly suggest learning the developer tools to help guide you.




Form example
https://codepen.io/lasjorg/pen/KLEKpN

1 Like
5

This Sir! This right here is absolutely invaluable! Yeah after doing some more research on the topic and watching it be applied in various videos, I’ve better understood the small simple practical approach to positioning, but your links and info here are phenomenal, thank you so damn much! Have yourself a great week, a brother doesn’t forget these thangs! Much love!

1 Like