Results 1 to 5 of 5

Thread: Div Confusion

  1. #1

    Thread Starter
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    39,165

    Div Confusion

    I'm just getting into Razor pages, which is probably unrelated to this question, but I'm new to both Razor and pretty much new to HTML. I did do a bit of work in it a few years back, and have now forgotten much, so I'm not quite sure where this confusion is arising from.

    I have a page that has a menu on it, and I was adding a hero image above that menu. This is in the _layout.cshtml page, such that the image is on all pages.

    At first, I created a div with a hero-image class like so:

    Code:
    <div class="hero-image">
    
    </div>
    I did it this way thinking that I'd put something else in there, such as text, but then I realized that I just wanted the image (which happens to have text on it already, but that's irrelevant). Therefore, I thought I could simplify by changing the above to this:

    Code:
    <div class="hero-image" />
    To my surprise, this greatly altered the appearance. In fact, the image was now below the menu (which is some <nav> tags immediately below this div). Changing it back to the way I had it before restored it as I wanted it. I always thought the second example was just a shorthand way of restating the first example. Apparently, I was wrong, but what am I not understanding here?
    Last edited by Shaggy Hiker; Jan 11th, 2024 at 04:19 PM.
    My usual boring signature: Nothing

  2. #2
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,214

    Re: Div Confusion

    Some tags aren't valid when "self-closed". Div is one of them AFAIK. I think the rule of thumb is if it is a container you should have an explicit closing tag.

  3. #3
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,621

    Re: Div Confusion

    And self closing div does not make sense, have a look here:
    https://stackoverflow.com/questions/...iv-and-div-div
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  4. #4

    Thread Starter
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    39,165

    Re: Div Confusion

    Makes sense to me...though it's clearly not valid. It's a container, but in this case it contains nothing, and is really just a host for the background image of the class.

    Still, I see that it isn't legal html, so that's the answer.
    My usual boring signature: Nothing

  5. #5
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,214

    Re: Div Confusion

    Quote Originally Posted by Shaggy Hiker View Post
    Makes sense to me...though it's clearly not valid. It's a container, but in this case it contains nothing, and is really just a host for the background image of the class.
    In my book I call that not nothing.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width