14 {{ upvoteCount | shortNum }}
14 {{ upvoteCount | shortNum }}

<div> and </div> with no class or id

by Lloyd Buchinski
11 replies
  • WEB DESIGN
    • |
Just looking at the source code of some of the forum pages, you see things like <div>Join Date: Jul 2006</div>. I've never used a div all by itself without a class or id. How do you define what you want it to do?

I tried googling div without class or id, and didn't come up with anything useful. The pages just talked about the differences between them.

Edit: that's the pages from this forum if you want to see more examples. Just look at the source of this page.
#&lt or div&gt #&ltdiv&gt #< or div> #<div> #class
  • Profile picture of the author LocoDice
    It would be interesting to see what else this is wrapped in. Can you paste more of the code (i.e. 10 lines above and below)? Perhaps you can isolate the <div> as something else unique?
    Signature
    codefixit.com - Help with your HTML, Wordpress and Web Hosting problems - No fix, no fee.
    {{ DiscussionBoard.errors[7219098].message }}
  • Profile picture of the author Vishalicious
    what i seen is there is main div then sub-div means div class="blah" then div without and id or class so it will automatically takes div of main class="blah". i might be wrong here.
    also you can call div with no class or id with help of JavaScript
    Signature
    Outsource Your Offline Business Projects. Just Send me a PM :)
    {{ DiscussionBoard.errors[7219114].message }}
    • Profile picture of the author oliviacis
      The <div> tag defines a division or a section in an HTML document.
      The <div> tag is used to group block-elements to format them with CSS.


      Pages have parts - sections that serve particular functions - and as a rule those parts have been set with <div> tags.


      The concept of <div> is a very complicated concept. You got to get in deep to understand it.
      {{ DiscussionBoard.errors[7219575].message }}
  • Profile picture of the author SteveJohnson
    Originally Posted by Lloyd Buchinski View Post

    Just looking at the source code of some of the forum pages, you see things like <div>Join Date: Jul 2006</div>. I've never used a div all by itself without a class or id. How do you define what you want it to do?

    I tried googling div without class or id, and didn't come up with anything useful. The pages just talked about the differences between them.
    Take a look through this page: Selectors

    If we know the class of a container, we can target its 'children' - that is, containers within the classed container.
    Code:
    <div class='myclass'>
  <div>div1</div>
  <div>div2<span>span1</span> more text</div>
</div>
    So if I want to make the span text in only the second div bold, I can do this:
    Code:
    div.myclass div:nth-child(2) span { font-weight: bold; }
    I can even target the next div in the document tree that is a 'sibling' of div.myclass:
    Code:
    <div class='myclass'>
  <div>div1</div>
  <div>div2<span>span1</span> more text</div>
</div>
<div>sibling div</div>
    using this:
    Code:
    div.myclass + div { color: red; }
    would turn the text 'sibling div' red.

    There is enough information here: CSS - Web Education Community Group to make your eyes bleed.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7221212].message }}
    • Profile picture of the author ronc0011
      Use "style" like so...

      Code:
      <div style="float:left; width:50%; height:400px; border:1px solid #000;">
<p>Some stuff in your div</p>
</div>
      If you want to define a CSS rule you can either do it in the head section of the document or in a separate CSS file and then call it with a class or ID.
      {{ DiscussionBoard.errors[7221704].message }}
      • Profile picture of the author Lloyd Buchinski
        Thank you Steve, that's straight forward and clear communication, and I appreciate that. That does give one way of styling a div without a class or ID. I haven't looked at the wf (that stands for the Wordpress Forum ) style sheet to see if that's what they are doing.

        Since I'm just poking around here and curious about it, it might take some time before I do.

        Originally Posted by ronc0011 View Post

        If you want to define a CSS rule you can either do it in the head section of the document or in a separate CSS file and then call it with a class or ID.
        Yes, I do both of those and they aren't a problem. What I am wondering about though is seeing exactly this in the wf source.

        Code:
        <div>Join Date: Jul 2006</div>
        It is not called with a class or id. It also does not have the inline style like the example you gave, just <div> and then text and the closing tag.

        I got a shock when I quoted your post. About 4 kb of tags to go with half a kb of text. The VB wysiwyg really loads it on. (I assume that is where they are coming from.)
        Signature

        Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

        The KimW WSO

        {{ DiscussionBoard.errors[7226980].message }}
  • Profile picture of the author gcampton
    While there's typically nothing wrong with doing this, it's simply poor coding standards.
    Makes it harder to simply call a class/id for css function, sure it can still be done but requires more time/code as you can see from what Steve posted, and is generally bad practice in that respect. What happens when a lesser programmer needs to upgrade your code 3 years from now?

    However most still do it, and even I'm guilty of it due to laziness.
    Signature

    ()_()
    (o.O) <<<----- This bunny is more ethical and mostly made of pixels.
    (")("")

    {{ DiscussionBoard.errors[7227101].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by gcampton View Post

      While there's typically nothing wrong with doing this, it's simply poor coding standards.
      Makes it harder to simply call a class/id for css function, sure it can still be done but requires more time/code as you can see from what Steve posted, and is generally bad practice in that respect. What happens when a lesser programmer needs to upgrade your code 3 years from now?

      However most still do it, and even I'm guilty of it due to laziness.
      Disagree. I especially disagree with it being 'poor coding standards'. Part of good coding standards is making your HTML as compact as possible while still being readable, understandable, and effective. IMHO, putting a class or id on any container that might ever need styling violates that - the HTML becomes bloated, not to mention the mental effort that is required in coming up with non-conflicting class or id names.

      If a specific container can be targeted with no conflicts by specifying its parent or even its grandparent, there is no need to put a class or id on the inner container.

      Some 'lesser programmer' trying to modify my code down the road is not my problem. If they can't figure out how I did something, they need to up their game.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[7228391].message }}
  • Profile picture of the author Lloyd Buchinski
    Originally Posted by LocoDice View Post

    It would be interesting to see what else this is wrapped in. Can you paste more of the code (i.e. 10 lines above and below)? Perhaps you can isolate the <div> as something else unique?
    Originally Posted by Lloyd Buchinski View Post

    Just looking at the source code of some of the forum pages, you see things like <div>Join Date: Jul 2006</div>.
    Sorry, I guess I wasn't being completely clear, but I meant the WF pages. Just open any of them and you will find plenty of examples of this.
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[7233510].message }}
  • Profile picture of the author Blakos
    Looks like its working the way <span> and <span2> works.
    {{ DiscussionBoard.errors[7233630].message }}
  • Profile picture of the author Lloyd Buchinski
    I came up with another idea about this and thought I should mention it. I don't want to take away from Steve's comment, which I've filed in case it might come in handy someday.

    The default display for a div is block, but for text it is inline. It seems like the <div></div> tags with a bit of text in them, are just being used like a span tag to start the text in a new line.

    I think it's smart, and more efficient with code than span tags. If you take 3 words in the middle of a paragraph on an html sheet, and put the <div></div> tags around them, they will start a new line on the left. That block display will stretch as far to the right as it can.

    I saw a site that would check the source code of pages to compare the amount of html to the amount of text. A lower percentage of html is supposed to be good, and I always try to keep that efficient.

    Using the div tags this way just seems to me to be a neat tool tip.
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[7332484].message }}

Trending Topics