dertermenter wrote:

I’ve learnt classes and how to make a button, how can I make it so the buttons go to a link when you press it?

dertermenter wrote:

my website so far

I’ve learnt classes and how to make a button, how can I make it so the buttons go to a link when you press it?

<a href="https://scratch.mit.edu/projects/editor"><button>Scratch Online Editor</button></a>

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:

Chiroyce wrote:

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:

I did the opposite, link inside the button
https://github.com/derter-menter/derter-menter.github.io/pull/4

dertermenter wrote:

Chiroyce wrote:

Socialix wrote:

From what I did, you can put the button inside a link and it will redirect you to a site if you press it:

I did the opposite, link inside the button
https://github.com/derter-menter/derter-menter.github.io/pull/4

I was working on this when you did the pull, so the pull has conflicts. You seemed to have added a class that makes all buttons text colour white - this is perfect, but my code doing it doesn’t work. Please may you (or anyone) do another PR making the text colour on buttons white?

/* This makes all elements having the class name "a" become white in colour. This isn't what you want. */
.a {
   color: white;
}
/* On the other hand, this line of CSS will make sure that all links (anchor tags) are white in colour */
a {
   color: white;
}
/* The above code works fine, but now all links on the page are white in colour. To fix this, you can modify the selector so that only links inside buttons are white in color */
button a {
   color: white;
}

dertermenter wrote:

Please may you (or anyone) do another PR making the text colour on buttons white?

helloworldbyeworld wrote:

I have a suggestion. Maybe you could make the info text in a sans-serif font? You can also use Google Fonts for more fonts that you can use on the website.

helloworldbyeworld wrote:

(#31)
I also have some other suggestions.

1. Maybe wrap the link buttons and the welcome text in a div to make a top bar?
2. Maybe make the link buttons have some border-radius so they are rounded and add a ~2-5px border for them so they look nicer?
3. Maybe add some more space between the welcome and the text?

MagicCrayon9342 wrote:

To make the text a bit nicer looking you could add a fixed width and height div and put the text in it and either put it on the left center or middle. It'll look great i promise.

helloworldbyeworld wrote:

I also have some other suggestions.

1. Maybe wrap the link buttons and the welcome text in a div to make a top bar?
2. Maybe make the link buttons have some border-radius so they are rounded and add a ~2-5px border for them so they look nicer?
3. Maybe add some more space between the welcome and the text?

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners. And getting a good color. For that Tailwind would be good

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners

dertermenter wrote:

I could do 3, don’t know how to do the first two

Chiroyce wrote:

(#35)

MagicCrayon9342 wrote:

It's generally not that easy to make a navbar that actually touches the corners

It's easy, set margin and padding on the root to 0; then stretch the navbar's div to 100vw; and preferred amount of vh;

dertermenter wrote:

I could do 3, don’t know how to do the first two

I can make a PR #2 for now…

MagicCrayon9342 wrote:

root? huh? i don't know of a root tag.

* {
    margin: 0;
    padding: 0;
}

Chiroyce wrote:

MagicCrayon9342 wrote:

root? huh? i don't know of a root tag.

Asterisk (*) means all elements, so if you add this to the to the CSS file, then the browser-set margins will be reset. Not root, sorry, I meant the asterisk (*).

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

dertermenter wrote:

Trying to make a dark mode, then a button to switch between the two. How can I change the text colour in just 1 CSS file?