HTML layout feedback and freebie! (Update 1.1)

Posted 7 months, 26 days ago (Edited 7 months, 24 days ago) by LemonTea

Yo! So I just made my first ever from-scratch layout!! Currently I'm using my character Inka Bambi as a guinea pig, so check out her profile to see a filled out version!

The design is to have a different 'section' for every time you press space, so you can focus on one part at a time, but if you wish you can pick it apart at your benefit. If you do use it, make sure to check back once in a while to see any updates!

Updated coding is here! This is just Bambi's profile because I was too lazy to replace all the pictures so it wouldn't mess up the spacing tfw. It has some character development ideas, but feel free to change anything you want.

No credit necessary, but I would like some help in making it more accessible! I think you have to have moderate knowledge of coding to use it, which isn't the best.

Thank you for checking this thread out <3

I find the overall design really cute and the idea with the "sections" is pretty neat! And while I literally don't know anything about coding myself I often see layouts that spill all over each other once you use a lower resolution or have your browser smaller. Sadly it's here too. In this case it's the Likes/Dislikes/Fears table with the picture that goes alongside it as well as the picture and table after that one.

Not sure if you care or are bothered but I just wanted to point it out in case you weren't aware!

(i assume the feedback in the title means you'd like feedback on this... if i'm misundersatnding, please disregard this post!)

i like the cloud backgrounds you use for your tables! and the overall concept is cute. here are a few things i noticed:

- i'd change the table borders so the colors better mach the cloud colors

- don't use set widths for your table, unless you are putting them within a set width container. i find the best thing is to use percentages, or just let the tables determine their own width by content & set certain percentages to the table cells so they remain proportional. on my bigger laptop screen the layout is not too wide for me, but instead there are large gaps between the images and the tables

- there are very large gaps between your content which loo a bit off. i checked and it looks like you're putting a lot of paragraphs tags? i dont think such large gaps are need, it breaks up the page a bit! also, instead of using p tags with a break pasted in, you can just use line breaks (br)

unfortunately i'm at work rn so i can't view your coding doc b/c my job blocks google docs so i can't look directly at your coding doc. i think you got a nice start here, you just need to work on the spacing a bit!

Thank you two so much!! Yes I really do need other people's criticism in order to further anything so this is great!!

KnightOfSpring that's probably because the WYSIWG doesn't work properly, since the editor is a different size to the page. It was so annoying reloading my test page just so I could see what it 'really' looks like >:Y

Wicked Ahhh line breaks and percentages... that makes so much more sense. 100% bc of my lack of Expertise™. I'll fix that up later today, thank you!!

I was also so worried about the backgrounds and pictures I forgot the borders X( thanks for reminding me!! This was a very productive thread :¬)

Updated with the above suggestions!

Sadly I still get the same issue once I make the browser window smaller. Not sure if you can ultimately 100% fix this I'm no expert. It's just that once the browserwindow is small enough that the table+picture is wider the picture gets put into the next row. 

so today i had some time to look through the HTML and there were quite a few things i saw... a made some edits, i dont have time to go through the entire thing but i modified the top half heavily so hopefully that will helps as reference

some notes
- you were using way more span & header tags than needed!
-i took off the set widths from the table, they will determine their own width based on content. when you have the table with a set width + an image with a set width, it's what causes the issue knightofspring was talking about. by taking off the table widths, they can scale
-i made the images float instead of the tables. in general don't have your content bodies float, it can lead to spacing issues
- i got rid of those giant line break gaps & gave the tables margins. you can increasee margin size to increase spacing around elements
- becuase of the nature of the likes table (being three lists with not a lot of content) it's width often isn't wide enough to entirely filly up the space. i flipped the sides of all the images so that likes table could float in the center... idk this is just a personal choice thing, not a coding thing you have to follow LOL you can just swap the floats arond

I love this theme but it's too awkward to use without enough art to fill in the blank areas of each section. ;n;