SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First Design With More Advanced XHTML & CSS

    Well, I have been doing HTML and CSS for years and about a year ago I got into XHTML but it wasn't until about two weeks ago that I picked up The Art & Science of CSS from SitePoint which is an amazing book by the way, anyways... I finally finished coding a design of mine in a more advanced manner than what I'm used to. The design is at...

    http://www.creativedefault.com/sites/ShadowPines

    Right now it looks pretty good in Firefox and Safari, I'm on a Mac so I can't view in IE but a friend of mine says it looks fine. But I just have some questions.

    1.) In the validation, it fails (I was expecting this) but I don't understand the errors in it besides the last one (I'm pretty sure <h7> doesn't exist even though it works...).

    2.) In the third column (light grey), the <p>'s under the weather all work with "margin-bottom: 2px;" but it looks as if the one for the third doesn't work (the one for Later), the same thing happens after the special paragraph before the links.

    I was just wondering if anyone could help me out with those and if I can get anything that'd be great!

    Looking for some help as well as constructive criticism, thanks!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot nest a block-level H6, DIV or UL element inside a P element. A paragraph is one or more sentences of text. It doesn't make sense to put a heading, a DIV or a list inside it.

    You cannot nest a block-level H6 element inside an inline-level SPAN element. That's like putting your shoes inside your socks.

    And there is no H7 element type. Why in the world would you need 7 heading levels?!
    Your heading structure seems completely arbitrary. You've got an H5 following the H1! What happened to levels 2, 3 and 4?

    As for constructive criticism, I suggest you try to learn a bit about semantic markup and CSS. You've got a lot of unnecessary DIVs and classes in there, and the markup doesn't make much sense at all. It seems as if you've picked the markup elements based on how they're rendered by default, rather than based on what they mean.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the errors I'm getting are for having block elements within inline elements? And when using headers, they should only be used for text?

    So for the headers that I have as images, should I classify those as p's or div's? I always get confused whether to use p's or div's. Also, I understand what you're getting at in your criticism, but could you please give me an example of somewhere in my design that is an unnecessary div and classes?

    Should I use more pseudo elements and such instead of doing new classes and id's? I also don't understand what you mean by your last statement, and I'm somewhat confused when you say that my markup doesn't make sense.

    Sorry if I'm asking for a lot, but I know you guys are professionals and I'm trying to learn as much as I can so that I can maybe find a job in the field one day if this is where I choose to go.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Creative Default View Post
    So the errors I'm getting are for having block elements within inline elements?
    Yes, and you're also using block elements inside certain types of block elements that can only have inline children (like P).

    Quote Originally Posted by Creative Default View Post
    And when using headers, they should only be used for text?
    A heading can contain text and inline elements (like EM). Images are inline elements, so they're valid as content of a heading.

    Quote Originally Posted by Creative Default View Post
    So for the headers that I have as images, should I classify those as p's or div's?
    If they are headings, they should be marked up as headings.
    Otherwise, if the text equivalent (the ALT attribute) of the image constitutes a paragraph, then you could mark it up with P.
    A DIV is a generic block-level element with neutral semantics, and can be used as a last resort if there's no semantically appropriate element type available.

    Quote Originally Posted by Creative Default View Post
    I always get confused whether to use p's or div's.
    It's quite simple: a P denotes a paragraph – one or more sentences that deal with a particular idea – while DIV denotes a division (part) of the document.

    Quote Originally Posted by Creative Default View Post
    Also, I understand what you're getting at in your criticism, but could you please give me an example of somewhere in my design that is an unnecessary div and classes?
    I don't know if any DIV is unnecessary, but there seem to be a lot of them. Also, every other element seems to have an ID or a class. That might be necessary, but you can often do without many of them by using contextual selectors in your CSS.

    One thing, though, is that your class names are very presentational. That's not a good idea, because if you want to change the design you'll either have to change the class names as well, or you'll end up with a very confusing style sheet.

    I'd also recommend that you don't use 'camelCase' identifiers. IDs and class names are case sensitive, even in HTML. If you mistype 'conCenter' as 'concenter' in your CSS, the styles won't apply. This sort of error can be very difficult to spot. I personally use lowercase only, with hyphens separating the words (e.g., 'primary-navigation').

    Quote Originally Posted by Creative Default View Post
    Should I use more pseudo elements and such instead of doing new classes and id's?
    I don't see how you could do that, but as I said, you can often use contextual selectors in CSS instead of assigning an ID to every element you need to style.

    Quote Originally Posted by Creative Default View Post
    I also don't understand what you mean by your last statement, and I'm somewhat confused when you say that my markup doesn't make sense.
    Don't get me wrong; you are definitely heading in the right direction. There are some things that look odd, though. Like the fact that the first heading on the page is an H3, which is followed by an H1 and then an H5. Then there's another H1, followed by an H4 and a bunch of H6's. Finally, there's an H4 and a non-existing H7. That gives you an outline like this:
    Code:
    0.0.1  First heading
    1 Second heading
    1.0.0.0.1 Third heading
    2 Fourth heading
    2.0.0.1 Fifth heading
    2.0.0.1.0.1 Sixth heading
    2.0.0.1.0.2 Seventh heading
    2.0.0.1.0.3 Eighth heading
    2.0.0.1.0.4 Ninth heading
    2.0.0.2 Tenth heading
    2.0.0.2.0.0.1 Invalid heading
    A normal outline looks something like this
    Code:
    1 Document heading
    1.1 First section
    1.1.1 First subsection
    1.1.2 Second subsection
    1.2 Second section
    1.2.1 First subsection
    1.2.1.1 First sub-subsection
    1.2.1.2 Second sub-subsection
    1.3 Third section
    ...
    You normally shouldn't have more than one H1 on a page, unless you really have two completely different topics (in which case it might be better to split it into two pages).

    You shouldn't skip heading levels, because it doesn't make semantical sense. Try checking the 'Show outline' box in the W3C validator, and you'll see if your heading levels make sense.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, that makes a lot of sense and explains a lot. I think I'm gonna try recoding it again to try to cut down the clutter.

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Paragraph is a block element. Therefore, it isn't illegal to nest other block-levels within it. Not that you should just to clarify.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Paragraph is a block element. Therefore, it isn't illegal to nest other block-levels within it.
    It is invalid to nest block-level elements within a paragraph. Check the DTD!

    Code:
    <!ELEMENT P - O (%inline;)* -- paragraph -->
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just reading through these posts and realised again how on one hand building a website can be done either very simply ro also very complex.

    I have built mine using a number of methods but one learnt from Rachel Andrew (SitePoint Author) is to put all the text and infor down in a semantic manner and then style using CSS. Takes a bit getting one's mind around it as I tend to want to first make my columns et. and then add the info. I use both but am sure that from an accesibility perpective the former is far better.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    One thing that should be mentioned is that "complex" is not always, and with web design is actually usually not the best way to go. You should design your site first on paper, or at the very least in Photoshop or Fireworks. Then look carefully and try to figure out how you can create that design using the minimal number of elements, also regarding semantics. Then you build your site.

    Keep in mind that every character, space, return, etc. that you put adds an additional byte to your file size. A single byte itself isn't a big deal, but when you have thousands of unnecessary and excessive bytes, it can really start to add up not only for you, but for your end user as well.

    Also, the simpler the code, the more likely it will work properly across multiple browsers the first time. With really complex code, you usually have to spend several more hours trying to correct all of the little quirks in various browsers (usually just IE if you've done it correctly).

    Now, having said all of that, I'm not saying you shouldn't use complex code if the site calls for it. Design your site first without thinking about code at all. You are simply creating a picture. Worry about the code after you are done with that. Creating an initial mock-up, regardless how detailed or simple can really make things a lot easier.

    One thing people are always surprised about is how much paper I actually use when I go to code things for either the web or applications. It really does help. Pictures say a lot more than text and code can when you are first designing things.


Bookmarks

Posting Permissions

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