8 8
8 8

Can one use a DIV with an ID to "wrap" an entire HTML page?

by
carlos123
carlos123
Profile picture of carlos123
carlos123
Posts: Threads: Thanks: Account age: less than a second
6 replies
I am using a CMS by the name of Concrete5 whose admin interface is affected, or can be, by CSS I write and use for the pages on sites I create with it.

For example if I have a CSS statement like so in my CSS file...

ul {
list-style-type: circle;
}

Then not only UL's in my sites but also all UL's in the admin interface of Concrete5 will be affected.

To prevent this I must make my CSS more specific.

While I could just use a DIV with a unique ID inside my pages I also have CSS affecting the html and body tags in my HTML.

Which all brings me to my question.

Can I use a DIV wrapper around my entire page HTML?

Like so...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<div id="my_site">
   <html>
   <head>
   </head>
   <body>
      <ul>
         <li>My first list item</li>
      </ul>
   </body>
   </html>
</div>
So that I could use the following inside my CSS...

#my_site ul {
list-style-type: circle;
}

Affecting only the UL inside my pages and not any other element in any other things like the Concrete5 admin interface.

Does anyone see any problems with this approach? Anybody know of a better way to do this?

Thanks.

Carlos
#div #entire #html #page #wrap
  • Profile picture of the author Happy_Balance
    Happy_Balance
    Happy_Balance
    Profile picture of Happy_Balance
    Happy_Balance
    Posts: Threads: Thanks: Account age: less than a second
    Does anyone see any problems with this approach?
    Problem = Yes
    Using div's outside the body tag is not proper html.* If they (by some chance) display in any browser, don't expect them to work in every browser.
    *As far as I know, If I'm wrong someone please tell me.


    Anybody know of a better way to do this?
    Have you tried this?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
....EDIT....
  </head>
    <body>
<div id="my_site">
  <div id="header">
My header Here
 </div>
<div id="Main">
Hello World!!!  :o)
<br /> 
      <ul>
         <li>My first list item</li>
      </ul>
</div>
  </div>
   </body>
   </html>
    EDIT:
    This says you can have content outside of the body (using javascript), but I personally am not in a hurry to use it. :p
    Signature

    Every Day Is Fun! :)

  • Profile picture of the author SteveJohnson
    SteveJohnson
    SteveJohnson
    Profile picture of SteveJohnson
    SteveJohnson
    Posts: Threads: Thanks: Account age: less than a second
    Personally, I'd just use a class on the body tag, that way you can target anything you want ( incidentally, if you use a DOCTYPE declaration, it has to be the first line of the file ) :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>title here</title>
    </head>
    <body class='content'>
        body content here
    </body>
</html>
    Then your css for, say, a list on the content side would be:
    Code:
    body.content ul { style: stuff; }
    easy schmeezy
    Signature

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

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

    • Profile picture of the author Happy_Balance
      Happy_Balance
      Happy_Balance
      Profile picture of Happy_Balance
      Happy_Balance
      Posts: Threads: Thanks: Account age: less than a second
      Originally Posted by SteveJohnson View Post

      ...
      ( incidentally, if you use a DOCTYPE declaration, it has to be the first line of the file ) :

      ...easy schmeezy
      I made a little mistake while re-arranging his example. Thanks for noticing.
      Signature

      Every Day Is Fun! :)

    • Profile picture of the author carlos123
      carlos123
      carlos123
      Profile picture of carlos123
      carlos123
      Posts: Threads: Thanks: Account age: less than a second
      Originally Posted by SteveJohnson View Post

      Personally, I'd just use a class on the body tag, that way you can target anything you want...
      That's an excellent idea Steve! Thanks (and thanks to for the rest of the responses).

      I wonder if that is how the Thesis theme in WordPress does it. They use a .custom class prepended to any CSS that you want to target within a site created with their theme.

      But they don't prepend the "body" part.

      They just use the class name before any CSS.

      Carlos
  • Profile picture of the author phpdev
    phpdev
    phpdev
    Profile picture of phpdev
    phpdev
    Posts: Threads: Thanks: Account age: less than a second
    Use this code to apply styles to a particular element in the div.

    For example div id is "MyDiv" then use

    #MyDiv ul
    {
    ..
    }
    Signature
    Ali Usman
    PHP, MySql, WordPress, API Programming, E-Commerce Site, Payment Integration, Twilio, SMS Marketing, Custom Development, Wordpress, Joomla, Interspire, BigCommerce, Volusion, 3dCart and many more...
    sales@bluecomp.net
  • Profile picture of the author SteveJohnson
    SteveJohnson
    SteveJohnson
    Profile picture of SteveJohnson
    SteveJohnson
    Posts: Threads: Thanks: Account age: less than a second
    You don't HAVE to put 'body' in front of it; it adds a tiny bit of specificity in case you have another tag with the same class, and sometimes helps your css be a little more readable. I don't do it all the time, just when I think that down the road there MAY be a class name conflict.
    Signature

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

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

Trending Topics