Links are Outside the Border

#1

Why doesn’t the red border encompass the 2 links at the bottom?

Screen Shot 2020-12-29 at 7.49.44 PM
Screen Shot 2020-12-29 at 7.49.44 PM1138×508 66.8 KB

<html lang="en">
<head>
   <title>Messing With Page Layouts</title>
   <link rel="preconnect" href="https://fonts.gstatic.com"> 
   <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,[email protected],300&display=swap" rel="stylesheet">
   <style>
       h1   {
           text-align: center;
           font-family: 'Indie Flower', cursive;
       }
       h2   {
           text-align: left;
           font-family: 'Open Sans Condensed', sans-serif;
       }
       p    {
           text-align: justify;
       }
       .links   {
           margin: 50px;
       }
       .overall {
        border: 5px solid rgb(187, 76, 76);
    border-radius: 15px;
    margin: 10px 5px;
    padding: 4px;
       }
       .allwords    {
        padding: 10px;
       }
   </style>
</head>
<body>
    <div class="overall">
    <div class="allwords">
        </div>
        <h1>Road Construction Equipment</h1>
        <h2>Specialized Winter Usage</h2>
        <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to international competitors, in large part because there’s been little direct government support in Canada, industry executives say.</p>
        </div>
        <div>
            <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
            <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
        </div>
    </div>
    </div>
    
</body>
</html>
#2

Because the border is on overall and they’re not in it. Right now overall ends after the p. But if I had to guess you have two </div>s in there that probably shouldn’t be, the one that immediately closes allwords, and the one after the p closing overall.

#3

Screen Shot 2020-12-30 at 8.52.22 AM
Screen Shot 2020-12-30 at 8.52.22 AM1366×1726 320 KB

#4

“A” is a closing tag that closes the empty allwords

#5

Yikes! Didn’t notice that! OK - so how about this approach? Instead of trying to keep track of 3 dozen or so divs, is it acceptable to use other tags like section / headers and maybe some others that I don’t even know of, to avoid the confusion inherent in using many tags with the same name? I tried it with this code, got the result that I wanted with a lot more clarity.

<html lang="en">

<head>
  <title>Messing With Page Layouts</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link
    href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,[email protected],300&display=swap"
    rel="stylesheet">
  <style>
    h1 {
      text-align: center;
      font-family: 'Indie Flower', cursive;
      background-color: rgba(172, 85, 138, 0.322);

    }

    h2 {
      text-align: left;
      font-family: 'Open Sans Condensed', sans-serif;
    }

    p {
      text-align: justify;
    }

    .links {
      margin: 50px;
    }

    .overall {
      border: 5px solid rgb(187, 76, 76);
      border-radius: 15px;
      margin: 10px 5px;
      padding: 40px;
    }

    .allwords {
      padding: 10px;
    }
  </style>
</head>

<body>
  <section class="overall">
    <div>
      <h1>Road Construction Equipment</h1>
      <h2>Specialized Winter Usage</h2>
      <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
        international competitors, in large part because there’s been little direct government support in Canada,
        industry executives say.</p>
    </div>
    <div>
      <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
      <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
    </div>
  </section>
</body>

</html>
#6

Yes, especially if you’re using them as they’re intended to be used :wink: Here’s a quick article I googled that talks about this (I’m assuming its pretty good though I haven’t fully read it myself):

https://www.semrush.com/blog/semantic-html5-guide/

#7

Unless you absolutely have to, you should try to avoid targeting elements like div directly in your CSS. Give each element a meaningful identifier like a class value or (rarely) an id value and have your CSS target the identifier. Even if you do break up your divs into article and section elements, give them a name and target them more specifically. It will save time troubleshooting bugs in the long-run :slight_smile:

#8

Thanks to you both for the input. I will study the site provided in the link. As to your response Kirupa, I assume that you are happy with the code below. I am referring particularly to the class identifier “overall” in the opening section tag. Since I only have one section, there really was no need for a class identifier in this instance - you could simply target section in CSS. But you are saying that for any container - I should be using a class identifier - it’s better form. Have I got that right?

<body>
  <section class="overall">
    <div>
      <h1>Road Construction Equipment</h1>
      <h2>Specialized Winter Usage</h2>
      <p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to
        international competitors, in large part because there’s been little direct government support in Canada,
        industry executives say.</p>
    </div>
    <div>
      <a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
      <a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
    </div>
  </section>
</body>

[/quote]

#9

Screen Shot 2020-12-31 at 8.11.06 AM
Screen Shot 2020-12-31 at 8.11.06 AM1236×1396 167 KB

#10

Usage can be subjective. It can help to check out the docs for the different elements. For example for nav on mdn:

  • It’s not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links; typically the <footer> element often has a list of links that don’t need to be in a <nav> element.

So you could if you wanted to and it felt appropriate, but also not necessary. I could see it being used with jobs, contact, and legal, given that they’re different sections within the current site, but I wouldn’t expect it to be used for the follow us links.

As you get deeper into web dev, it can also help to pay attention to the impacts on accessibility these tags have. It’s not something you think about at first, but ultimately becomes important, especially in having ADA compliant web content. Afterall, you wouldn’t want to get sued. :astonished:

#11

In addition to @senocular’s and @kirupa’s excellent advice, I also recommend formatting your code in VS Code. In Windows, pressing [Alt+Shift+F] works for me.

When the code is correctly formatted, it may help you more quickly see where a particular

ends and, as a result, determine why it’s not working the way you expect it to work.
#12

I was slowly approaching the same conclusion on my own - that to some extent, the usage of tags is arbitrary - but it’s good to have that confirmed by those with experience in the subject.
" I also recommend formatting your code in VS Code." - I do use VSC for writing code but I’m not sure what your phrase means. Are you simply recommending VSC as the program with which to write code or does formatting refer to a process in VSC once you have already written your code?

#13

VSC has a formatting feature for formatting your code. On windows, the keyboard shortcut for this is, as abergquist said, Alt+Shift+F. You can also right-click and select “Format Document”

image

Doing this will help show the hierarchies of the elements through indentation.

#14

Wow! Talk about having your eyes opened! That Format Document feature is super impressive! Suddenly, the overall layout has tons more clarity - very, very helpful - thanks.

1 Like