I can't center <ul> in my tribute page

HTML-CSS
1

Here i send my codepen for the tribute page, i can’t center the

2

This may just be a codepen thing and your code may work as is in other interpreters, but i would reccomend you take any < link > elements and enter them in the CSS settings (where the little cog is). And I can get the text from the list to center by using ul{
text-align: center} but it leaves the dots at the left side. edit: as humbleAssassin had said, give the ul a width value and then align it center and the buttons should come with :smiley:

1 Like
4

It is taking full width right now . give it some width and it will work.

1 Like
5

Better way is to use “inspect element” and see what are the properties it is bearing currently. Initially it may seem hard but you will figure out from so many guide on youtube about it.

1 Like
6

plus give it a margin auto… text align will give problem if your goal is to start text from same line and whole thing to be in centre.

1 Like
7

Ahh, I didnt even think abt that because I dont use it. Good idea I will probably do that in the future.

1 Like
9

thanks a lot @HumbleAssassin any idea about the font?, i tried also in my smartphone and it doesn’t work.

10

keep it outside the style tags… it is html head part and keeping something inside style element is same as you put it in style.css so your font link should be directly in body and if you use it in real project … directly in head tag.

11

Hello alejandroperez1981,

The problem here is that you are not meant to have <style></style> tags inside the HTML section of Codepen, or any other online code playground, for that matter.

The basic rule across all those platforms is this: inside the HTML area, only the content that goes between <body></body> is allowed. For styling, you must use the CSS section, and for anything related to JavaScript, you also must use the JavaScript area.

Since we cannot make use of the <head></head>, where we would use the <link> tag to access a font, we must instead use the CSS import feature to access the desired font.

As for importing the “Grenze” font inside the CSS area, you must use

@import url('https://fonts.googleapis.com/css2?family=Grenze:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

at the very beginning of the CSS section. This is important, as import statements have to come before anything else.

As for applying the font, the name of the font must be in quotation marks as such:

body {
  font-family: "Grenze",  serif;
}

And for the ul, you can set

text-align: center

to the div that contains it as such:

#tribute-info {
  text-align: center;
}

I have also noticed that you are making use of JavaScript to make the first header in your document extra large. A very useful mechanism of CSS would actually suit you better:

h1:first-of-type {
  font-size: 6vw;
}

Add this to your CSS section (without altering the existing rule for all h1s), and you can safely remove the declaration in the JavaScript section.

The mechanism I used above is called a pseudo-class, something you will get more comfortable with as you progress through your curriculum. You can imagine that the first h1 (or any other) element has a fake (or pseudo) class attached to it, invisible to our eyes, but known to CSS, called “first-of-type”.

With warm regards,
Onur Bal

12

thanks a lot @onurbal101 it was so usefull!