CSS and XHTML file structure

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

I tough my self CSS and XHTML and I kind of have a way of putting a site together but I was wondering if anyone has read any articles or anything that explains a good way to structure a XHTML file. Or if anyone has any personal input.

[EDIT]

The main reason I'm asking this is because I'm interested in what the "standards" are. Here is an example of a piece I just did.

Image

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Travis Person" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />   
   
    <title>Control Panel</title>
</head>
 
<body>
 
<div id="master">
    <div id="headerContainer">
        <h1>Welcome to the MyMediaGuy Control Panel</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
        <div id="log-info">
            <span>Logged in as USER [<a href="#">logout</a>]</span>
        </div>
    </div>
    <div id="mainContainer">
        <div id="alerts">
            <ul>
                <li>Alert</li>
            </ul>
        </div>
        <div id="intro">
            <p>
            Intro Para
            </p>
        </div>
        <dl>
            <dt>title</dt>
            <dd>
                <span>statment</span>
                <ul>
                    <li>list item</li>
                    <li>list item</li>
                </ul>
            </dd>
            <dt>title</dt>
            <dd>
                <span>statment</span>
                <ul>
                    <li>list item</li>
                    <li>list item</li>
                </ul>
            </dd>
        </dl>
    </div>
</div>
 
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.     <meta name="author" content="Travis Person" />
  7.     <link rel="stylesheet" type="text/css" href="style.css" media="screen" />   
  8.    
  9.     <title>Control Panel</title>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <div id="master">
  15.     <div id="headerContainer">
  16.         <h1>Welcome to the MyMediaGuy Control Panel</h1>
  17.         <ul>
  18.             <li><a href="#">Home</a></li>
  19.             <li><a href="#">Home</a></li>
  20.             <li><a href="#">Home</a></li>
  21.             <li><a href="#">Home</a></li>
  22.         </ul>
  23.         <div id="log-info">
  24.             <span>Logged in as USER [<a href="#">logout</a>]</span>
  25.         </div>
  26.     </div>
  27.     <div id="mainContainer">
  28.         <div id="alerts">
  29.             <ul>
  30.                 <li>Alert</li>
  31.             </ul>
  32.         </div>
  33.         <div id="intro">
  34.             <p>
  35.             Intro Para
  36.             </p>
  37.         </div>
  38.         <dl>
  39.             <dt>title</dt>
  40.             <dd>
  41.                 <span>statment</span>
  42.                 <ul>
  43.                     <li>list item</li>
  44.                     <li>list item</li>
  45.                 </ul>
  46.             </dd>
  47.             <dt>title</dt>
  48.             <dd>
  49.                 <span>statment</span>
  50.                 <ul>
  51.                     <li>list item</li>
  52.                     <li>list item</li>
  53.                 </ul>
  54.             </dd>
  55.         </dl>
  56.     </div>
  57. </div>
  58.  
  59. </body>
  60. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I've been reading a lot of books on web standards lately, and your code looks pretty good to me (although what's with the transitional doctype? :wink: )

The book I'm reading right now, Web Standards Creativity, has a lot of great info and it's a collection of a bunch of different authors, so you get a good overview of how the experts do it.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

:D Editor put that in there lol

Thanks, I'll have to check that book out.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Quote:
although what's with the transitional doctype?


I'd rather use a transitional than strict DOCTYPE for anything other than FAQ or dictionary type pages that really have no functionality other than simple Q&A.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

joebert wrote:
I'd rather use a transitional than strict DOCTYPE for anything other than FAQ or dictionary type pages that really have no functionality other than simple Q&A.

Wouldn't it be better to start with strict doctype and then change to transitional when and if you need to? For example, I like to design a site with all strict, but if I decide to use an iframe on one of the pages (like for a google map or something), then I'll change that one page to transitional. I really haven't found all that many instances where I need to use transitional, though...
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

The Strict DTD promotes a separation of structure and presentation, which makes a site so much easier to maintain. Trabnsitional is a bit more chalenging i think sometimes:)
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

SpooF wrote:
The main reason I'm asking this is because I'm interested in what the "standards" are.

CSS was introduced so that the HTML tags actually represent the type of content and not the formatting, for eg. em for emphasis, address for contact addresses. In that context, I would advise against using definition list tags (like those in the code you posted above) unless you are actually defining some terms, because the layout aspect can anyway be controlled using CSS.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

jameson5555 wrote:
joebert wrote:
I'd rather use a transitional than strict DOCTYPE for anything other than FAQ or dictionary type pages that really have no functionality other than simple Q&A.

Wouldn't it be better to start with strict doctype and then change to transitional when and if you need to? For example, I like to design a site with all strict, but if I decide to use an iframe on one of the pages (like for a google map or something), then I'll change that one page to transitional. I really haven't found all that many instances where I need to use transitional, though...


That's exactly why I only use it for those types of pages. :D

I went through the whole trying to get everything to fit with strict, it just makes my life soo much easier to stay away from strict except with certain extremely basic types of pages where the content is likely to never, or very rarely change.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I tend to do the same joebert ... at first it was the other way around though.

@kc0tma: that book looks sweet ... I gotta get a credit card for stuff like that, because I can't buy anything online ... ever ...
  • engadven
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 23
  • Loc: UK

Post 3+ Months Ago

I prefer transitional as it gives more flexibility on content but it's only a small point.
Have you seen the standard CSS grid structures. Google and Yahoo have examples but there are several others. Just search Google.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Why use anything but strict? (preferably of the html flavour)

With a strict doctype you have the browser (hopefully) rendering the page in the most standards-compliant manner that it is capable of. Sounds like a good thing to me. Now, if you are interested in the whole "web standards thing" then stay strict. I'm not a standards-Nazi by any stretch of the imagination (I know that the page as seen in a browser window by its end user is what really matters), but this would seem the logical course of action.

A transitional doctype actually triggers a browser in to doing funny things (quirks mode and almost-standards mode). Wouldn't that pesky box-model problem in IE than keeps appearing at Ozzu over and over again finally vanish if we all used strict doctypes?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

The thing I have against STRICT is that I can't use "target='_blank'" which completely sucks, and on most pages I do, I'll have a link at the bottom, pointing towards my website and I would like it to open up in a new window ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

I believe the resolution to that RT is to not use an xhtml doctype (there are many reasons why you shouldn't be using xhtml).

I also think very carefully about new windows, as many people find them quite annoying. If the purpose of the new window is to somehow trap visitors on your pages, then you are opening new windows for the wrong reasons imho. I'd use them for certain situations only - like opening a google map with a ton of placemarks or displaying images over 1 or 2 MB in size.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Ah okay I see the point that you're making there ... If a visitor wanted to open something up in a new tab they could do it themselves ... The only thing is, some users don't even know they could do that (unfortunately) and then they get taken to a whole new page ... but I guess they'll just have to learn the "hard" way ...

This really got me thinking now ...
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Also, you can use a really small amount of JavaScript to make links open in a new window when you feel it really is appropriate. Plus, then you have the added benefit of being able to control what the new window looks like (size, menus, etc.)

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.