Help needed please with HTML

1

Good Day all,

I need some help. Being really silly I think and I bet its a piece of cake but i have 4 buttons on my HTLM website
HOME,ABOUT,PORTFOLIO,CONTACT
What I need to know is what do I have to do so when I click on one of those buttons it will take me to that page, or rather scroll down to that section of the website?

Thanks in Advance
Justin

1 Like
2

You will have to use an a tag that links to your div. For example: <a href="#portfolio">Click to go to my Portfolio</a> and somewhere else on your page you should have a div (or another element) with an ID of portfolio (or anything else you want, matching the href="#[ID-of-element]" part).

3

Hi! :slight_smile:

You can get what you are looking for from here - https://www.w3schools.com/html/html_links.asp

Check the “Creating a Bookmark” section from the link above. Here’s a screenshot below.

Bookmark.png852Ă—789 17 KB

So, all you need to do is create some content in your page and give it an ID attribute. Then provide the ID value in the anchor tags in your navigation menu.

Hope that helps!

Cheers,
Nitin

1 Like
5

@NitinNair89 @BenGitter

Thanks for the feedback I will try this now.

6

Is this right:

  <button id="about">About</button>
  <a href="#about"></a>
7

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Yes, this should be correct.

1 Like
8

Simple example: http://codepen.io/benjaminvanzwienen/pen/Npvwmm

9

@BenGitter Awesome thanks

10

Flip i am not getting this. I have done what was said…
Is there now something I have to do in CSS?

11

Do you have a CodePen? Or could you copy your code?

12

this is the link:
@BenGitter
this is the link to my code pen. Very basic at the moment.

13

You would need something like this:

<a href="#test">Click here!</a>
<div id="test"></div>
14

There are two problems here:

  1. In HTML, any tag that applies to content must enclose the content to which it applies. So <h1>sometext</h1> will make sometext a heading, but sometext<h1></h1> won’t. You have your <a> tags, but they enclose zero content, so the clickable area is zero pixels.
  2. You’ve used the id attribute on the buttons themselves, so the links point back to the buttons, not content on the page.

There are also some other problems in your code:

  1. Styles, metadata, etc. should go inside the <head> tag, not <header>. <header> “represents a group of introductory or navigational aids” (source). Codepen treats everything you type in the editor as <body> content anyway (click “Settings” to add <head> content). A minimal HTML document, meanwhile, consists of <!DOCTYPE HTML><html><head></head><body></body></html>.
  2. “Protfolio” -> “Portfolio”
1 Like
15

Just use this

<a href="link_to_about_page"><button id="about">About</button></a>
16

Hi,
You can also use this, in your button’s code :

Home
About
...
Contact

this will scroll to your divs elements :

..content of your about div...

<div id="div_contact>..content of your contact...</div>
</pre>
17

@djebar-fermas Thank you for the help. I will try it later on this afternoon. Don’t know why i am battling with this.

18

i think the code should look this way
About
corret me if am wrong

19

I forked your pen where u can see how to setup sections and jump to them


Hope that helps !

20

Wow Awesome. Thank you for that.