Jump to content
Please Use CODE Tags

HTML funny searchbox behavior

straight_stewie
By straight_stewie
in Programming
 Share
Posted

So when I click anywhere on the line the search box is in, it goes to the "profile.html" page. Disregard the naming, I'm actually a beginner and am just using this to try to learn some basic HTML and CSS. The "cssTest.css" page is currently blank and does no formatting.

  

<!DOCTYPE html>
<html>
  <head>
    <title>Just Playing Around</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="cssTest.css" media="screen">
  </head>
  <body>
    <!--The navigation section. Duh. Will hopefully get embedded on the right of the top tool bar-->
    <article>
      <nav class="surrounding" class="top" id="navTop">
        <ul>
	  <li><a href="settings.html">Settings</li>
	  <li><a href="friends.html">Friends</li>
	  <li><a href="profile.html">Profile</li>
        </ul>
      </nav>
    </article>

    <!--This section will hold the top tool bar-->
    <section class="surrounding" class="top" id="top">
      <form> <!--Fix this later, obviously-->
	<label><input type="search" name="searchTop" placeholder="Type something to search"></label>
      </form>
    </section>

    <!--This section will hold the left tool bar-->
    <section class="surrounding" class="side" id="left">
    </section>

    <!--This section will hold the right tool bar-->
    <section class="surrounding" class="side" id="right">
    </section>

    <!--This section will hold the center of the page-->
    <section class="feed" id="feed">
    </section>
  </body>
</html>

 

ENCRYPTION IS NOT A CRIME

Link to comment
https://linustechtips.com/topic/615716-html-funny-searchbox-behavior/
Share on other sites
Link to post
Share on other sites
Posted
42 minutes ago, straight_stewie said:

SOLVED: It helps to close your <a> elements, lol.

It also helps of you close out the tag immediately after putting one. So that you wont end up forgetting that you need to close one tag (or curly brace/parenthesis/brackets).

CPU: Intel Core i5-6600k 4.4GHz | Motherboard: Asus ROG STRIX Z270F Gaming | Cooler: Cryorig H7 | RAM: GSkill Ripjaws V 8GB 2x4 3200 MHz | GPU: MSI GTX 1070 Gaming X | PSU: Seasonic G-550w 80+ Gold Certified, Semi Modular | Storage: 250GB Samsung 850 EVO, 1TB Western Digital Caviar Blue | Case: NZXT S340 Elite (Black/Red) | Monitor: BenQ XL2411 144hz | Keyboard: Corsair STRAFE RGB Cherry MX Silent | Mouse: Corsair M65 Pro RGB

 

I'd like to make a Chemistry joke, but all the good ones ARGON. *nudgenudge *winkwink

Link to post
Share on other sites
Posted
  • Author
Just now, FRN said:

It also helps of you close out the tag immediately after putting one. So that you wont end up forgetting that you need to close one tag (or curly brace/parenthesis/brackets).

That's normally what I do, but for some reason I was thinking that <a> was self closing. That's what I get for doing it 1:00AM my time.

ENCRYPTION IS NOT A CRIME

Link to post
Share on other sites
Posted

It's only a minor issue, but <nav> shouldn't be inside <article> - the <article> element is intended for the primary content of the page, so each post on here is an article. You probably want to use <header> instead. You should probably also replace some of your <section>s with either <div>s or <aside>s (or, for the main content, <main>, but it should only be used once in the page).

It's not a big issue at all, but it's better to get rid of bad habits now than to let them get embedded in your mind.

HTTP/2 203

Link to post
Share on other sites
Posted
  • Author
Just now, colonel_mortis said:

 

It's only a minor issue, but <nav> shouldn't be inside <article> - the <article> element is intended for the primary content of the page, so each post on here is an article. You probably want to use <header> instead. You should probably also replace some of your <section>s with either <div>s or <aside>s (or, for the main content, <main>, but it should only be used once in the page).

 

So it should probably look more like this? 

<body>
  <nav class="surrounding top" id="navTop">
    <ul id="navList">
      <li><a href="settings.html">Settings</a></li>
      <li><a href="friends.html">Friends</a></li>
      <li><a href="profile.html">Profile</a></li>
    </ul>
  </nav>
  
  <!--Top tool bar-->
  <div class="surrounding top" id="top">
    <!--My top bar here-->
  </div>
  
  <!--Left tool bar-->
  <div class="surrounding left" id="left">
    <!--My left bar here-->
  </div>
  
  <!--right tool bar-->
  <div class="surrounding right" id="right">
    <!--My right bar here-->
  </div>
  
  <main class="feed">
    <article id="articleOne">
    </article>
    <article id="articleTwo">
    </article>
    <!--And so on...-->
  </main>
</body>

 

Just now, colonel_mortis said:

It's not a big issue at all, but it's better to get rid of bad habits now than to let them get embedded in your mind.

That's always a good point. I was able to do that when learning c# (my first language), but HTML and CSS is proving to be much more difficult for me. I appreciate the advice.

ENCRYPTION IS NOT A CRIME

Link to post
Share on other sites
Posted
4 hours ago, straight_stewie said:

So it should probably look more like this?

 

That's always a good point. I was able to do that when learning c# (my first language), but HTML and CSS is proving to be much more difficult for me. I appreciate the advice.

Yeah, that looks better.

HTTP/2 203

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×