how do i fix this text? :(

[seallover]

hello! so, i (foolishly) used a layout builder, and the code came out slightly... wonky. i (somehow) managed to fix most of it, but couldn't figure out what was wrong with the "likes" part :( how do i fix this?? thank you in advance!!

[Dan Q]

Much easier to debug if you copy-paste us the code or, even better, put it online so we can look at it in a browser!

[seallover]

Much easier to debug if you copy-paste us the code or, even better, put it online so we can look at it in a browser!

ohhhhh i'm sorry!! do you mean linking the site itself by putting it online?? i'm still trying to learn what is what, hope it's not too stupid of a question! 

[Dan Q]

There are no stupid questions. We all get stuck sometimes!

Personally, I find seeing a problem on an actual web page easiest to debug. I can use the browser's debug tools (like Inspect Element and the like!) to instantly see why something is behaving the way it does.

If it's not online yet, copy-pasting the code into a [​code]...[​/code] block is second-best. It's much easier to read code when I can highlight it, copy-paste bits into another file, etc.

Working from a screenshot of code is hardest. After all, the problem might not even be in the bit that's in the screenshot! Maybe there's a stray bit of CSS somewhere that's affecting the problem element? Or maybe there's an element that didn't get closed properly half way up the page! This makes working from screenshots of code very hard!

So in short - for me at least:

1. A link to a broken web page is easiest to fix,
2. The code from a broken web page is next-easiest,
3. A screenshot of broken code is pretty difficult, and
4. A description of the problem with no context at all is a BIG challenge! (you do see people who say e.g. "my page is broken but it was fine yesterday; what changed?" and give no clues at all!)

[seallover]

There are no stupid questions. We all get stuck sometimes!

Personally, I find seeing a problem on an actual web page easiest to debug. I can use the browser's debug tools (like Inspect Element and the like!) to instantly see why something is behaving the way it does.

If it's not online yet, copy-pasting the code into a [​code]...[​/code] block is second-best. It's much easier to read code when I can highlight it, copy-paste bits into another file, etc.

Working from a screenshot of code is hardest. After all, the problem might not even be in the bit that's in the screenshot! Maybe there's a stray bit of CSS somewhere that's affecting the problem element? Or maybe there's an element that didn't get closed properly half way up the page! This makes working from screenshots of code very hard!

So in short - for me at least:

1. A link to a broken web page is easiest to fix,
2. The code from a broken web page is next-easiest,
3. A screenshot of broken code is pretty difficult, and
4. A description of the problem with no context at all is a BIG challenge! (you do see people who say e.g. "my page is broken but it was fine yesterday; what changed?" and give no clues at all!)

got it, thank you!! the problem is that there is too much space between the "likes" text and the part where i specify my likes, and i have no idea why/how that happened... hope that made sense! here's the link: https://f0li3-a-d3ux.neocities.org/

[668]

It seems like something to do with the id you gave the likes div, the gap decreases when i gave the likes text the same id as the dislikes text in inspect element.

Code

id_1779747598414:
z-index: 90; width: auto; height: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; position: static; overflow-wrap: break-word; display: block; margin: 0px; background-color: rgb(255, 255, 255); font-size: 17pt;

id_1779748353294:
z-index: 90; width: auto; height: auto; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; position: static; overflow-wrap: break-word; display: block; margin: 0px; font-size: 17pt;

Could it be that the height property is wrong?

[Melooon]

Could it be that the height property is wrong?

That is part of it, you need to remove that, you also have a bunch of random empty tags like a <p> a BR and a <div> between your title and your list, those are adding extra space too.

I'm guessing you're using some kind of site generator because this code is whack
EDIT - aha!

so, i (foolishly) used a layout builder

So crappy layout builder code is a particular vibe and having spacing issues is part of the charm you get from those. I'ddd frankly not bother trying to fix it manualy, this code is so low quality it would be easier, and you'd learn better stuff, starting from scratch if you want to hand code pages - that said I really do quite like the layout builder mood, so maybe just keep using a layout builder for this page, and hand code other pages on the site!

[668]

That is part of it, you need to remove that, you also have a bunch of random empty tags like a <p> a BR and a <div> between your title and your list, those are adding extra space too.

The <p> tag did nothing when i tested removing it, so I presume they likely are using a site generator or low quality layout builder:

[larvapuppy]

As a general note after looking at your code, I would recommend renaming all of the elements that are called something like "id_483289479238" to something more identifiable, like "likes_dislikes_section", "main_content", etc. That way when you go to edit your html and css files you will know much easier what part of the page you are working on.

If you have multiple elements that you style identically throughout a page/site you can use a class rather than an id. Using a class lets you name multiple elements the same thing and apply identical styling to them all at once. I think this would be helpful with this page since you have the two lists, one for likes and one for dislikes, and they look more or less the same.

So for example, I would make the following changes to this box with the id of "id_1779747513835" ~

Spoiler

(this one)

Right now the box div opening tag is like this:

Code

<div id="id_1779747513835" style="font-size:14px">

I would change it to something like this (you can name it whatever you want, but like I said before, it's better to make it descriptive so that when you come back to it later you will know what part of the webpage you're working on simply by looking at the code).

Code

<div class="likesdislikeslist">

Then change the opener tag for the dislikes box to the same thing so that they both have the same styling and you don't have to edit them twice.

You'll have to replace the name of the ID in the CSS file as well so that the same styling carries over with the new name. Just do ctrl+F (command+F on mac) to search your document and type in:
#id_1779747513835.
Then you can change that within the CSS file to:
.likesdislikeslist
The # in front of the element's name is for IDs, and the period in front of the element's name is for classes.

Notice that I got rid of the font size styling in the tag. I think it would be more convenient to add this under the class in your CSS file rather than keeping it inline with the html. Again, if you want to fiddle with the font size on both your likes list and your dislikes list, having it in one place is more convenient because you can just change it once rather than awkwardly jumping between two spots in the html.

You can take this same principle and apply it to all of your elements that have the weird numbered IDs to make everything nice and neat and tidy.

[close]

Ok, I did a colour coded thing too... don't mind me if this is too much information. 

This is the section of your html file that relates to your question ~

Spoiler

• Yellow is what I already went over in the 1st spoiler.
• Purple: I recommend you change this <p> to a <h3> element. The <h3> element is the 3rd most important heading. You already have a <h1> element for your page title and a <h2> element for your "Howdy Everybody" greeting, so why not? Plus, it's a good habit to use the proper semantic html elements instead of making everything a <p> or <div> element. Browsers have their own defaults for styling each element so it does matter which one you use. It's better for accessibility as well to use these more descriptive html elements.
• Red: All of these are the elements that I've identified as either unnecessary or that cause the extra spacing. The <div> has a "br" tag inside of it. The "br" is a line break. In HTML it does the same thing that you would expect hitting "enter" on your keyboard to do, hence the extra space. The <div> containing is unnecessary because it does not contain anything we want, so we can get rid of both. The red highlighted <p> element is a paragraph, and although it is empty, it still has its own margin and padding associated with it, so it causes space. The <span> element is for isolating specific parts of text without creating a line break, but you don't seem to have styled this part any different from the rest of the list, so we don't need it.
  
  • Incidentally, if you still want some space between the header and the list of likes, you can go into the css file and play around with the "margin-bottom" property for the header.
    
• Grey: You have a list here, but you have it structured as a bunch of <div>s. It's helpful to change this to using a main "ul" (unordered list, aka a list with bullets rather than numbers) tag which encircles a bunch of "li" (list item) tags. This will let you style it properly and also allows your browser to parse it as a unified list rather than a bunch of unrelated sections. My next two points explain how and why this is cool and fun to do.
  
  • (I also suggest you add a descriptive class name to the ul html tag so that you can style it in your css file like I talked about before)
    
• Orange: here are all the <div>s that I was talking about that you can change into "li" tags to achieve the fun effect explained in my next point.
• Green: The effect you are going for with the asterisks can be achieved more neatly with css. You can change the bullet for your lists in css to different bullet shapes, symbols, or even little icons. First remove the asterisks. Then go to your css file. If you added a class name for the list in your html, you can add the "list-style-type" property to that class like so:
  

[/list]

Code

.likesdislikes {
list-style-type: "*";
}

You can change the bullet for your list to any symbol this way. There's also a way to make your bullet an image:

Code

list-style-image:url(INSERT THE IMAGE URL HERE);

[close]

edit; in my 2nd spoiler above the 2nd last code block there is a " [ / list ] " that won't go away when I delete it, ignore this... it's not part of the code I'm suggesting, it's the forum post code hating on me :p