Two "a" tags not showing up on new lines

Code Help HTML/CSS/JS
1

I can’t figure out why two a tags are showing up on the same line. I’d like help trying to make them on separate lines.

The link is: https://replit.com/@RedCoder/WonderEd?v=1

2

@RedCoder can you provide an image of what you see and where to find it? I having trouble finding a page with two a tags showing up on the same line.

1 Like
3

Lines 16 and 17.

<a class="subNav" href="index.html">Home</a>
<a class="subNav" href="explore.html">Explore</a>

You can put a <br> tag in between to create a line break, like this:

<a class="subNav" href="index.html">Home</a><br/>
<a class="subNav" href="explore.html">Explore</a>
4 Likes
4

You can also wrap it in a div or use display: block. This is because a elements are inline by default

3 Likes
5

Sorry for the confusion! I’m working on the explore/math.html page.
You can see the page here.

6

@RedCoder like @element1010 said you can use the </br> tag.

<a>text</a>
</br>
<a>More text</a>

The lines will be separated. You can add more of them for bigger gaps.

1 Like
7

I tried this but it did not work

8

@RedCoder can you provide an image of your code / code snippet.

9

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>WonderEd | Math</title>
  <link href="../style.css" rel="stylesheet" type="text/css" />
  <link rel="icon" type="image/x-icon" href="../images/favicon.png">
  <script type="text/javascript " src="../script.js"></script>
</head>

<body>
<nav>
  <img class="subNav" src="../images/logo.png" alt="WonderEd Logo" title="WonderEd Logo">
  <a class="subNav" href="../index.html">Home</a>
  <a class="subNav" href="../explore.html">Explore</a>
</nav>
<div class="sec1">
  <h1 class="sec1">Mathematics</h1>
  <div class="articles">
    <a href="math/addition.html" class="article">
      <h3 class="article">Addition</h3>
      <p class="article">Learn to add numbers together!</p>
      <!-- <img class="article" src="../images/logo.png"> -->
    </a>
    <a href="math/subtraction.html" class="article">
      <h3 class="article">Subtraction</h3>
      <p class="article">Learn to subtract numbers!</p>
      <!-- <img class="article" src="../images/logo.png"> -->
    </a>
  </div>
</div>
</body>

</html>

CSS:

/* Articles */
.articles {
  width: 100%;
  height: auto;
  display: flex;
}

/* a.article {width: 100%;} */
a.article {
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  color: black;
  transition: 0.3s;
  width: 100%;
  min-width: 100%;
  height: 100px;
  font-family: "Montserrat";
}

a.article:hover {
  color: grey;
  transition: 0.3s;
}

h3.article {
  display: flex;
  justify-content: left;
  margin-left: 15px;
}

p.article {
  display: flex;
  justify-content: left;
  margin-left: 15px;
}

img.article {
  display: flex;
  justify-content: right;
}
10

@RedCoder what line are the a tags at? It could also be the CSS: display: flex;/justify-content: left; they move the content around.

11

That’s the HTML for the two a tags.

And that’s the CSS

12

@RedCoder you haven’t seemed to put a </br> tag. Here is the code for that:

<div class="articles">
    <a href="math/addition.html" class="article">
      <h3 class="article">Addition</h3>
      <p class="article">Learn to add numbers together!</p>
      <!-- <img class="article" src="../images/logo.png"> -->
    </a>

    <!-- Line Break Here-->
    </br>

    <a href="math/subtraction.html" class="article">
      <h3 class="article">Subtraction</h3>
      <p class="article">Learn to subtract numbers!</p>
      <!-- <img class="article" src="../images/logo.png"> -->
    </a>
  </div>
13

I did, but removed it later. It did not put the two on separate lines, though I agree and that was my first thought too. Any other ideas?

14

@RedCoder can you invite me to the Repl and I can check it out and fiddle around?

15

Sure! Just invited you!

17

I fixed the problem by getting rid of a display: flex; causing the stuff to double up.

2 Likes
18

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.