SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Mumbai
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS - First Try - w3 validation issues

    Hi guys,

    I have been buzzing through these forums trying to pick up on CSS...been a hardcore tables guy till I started working with CSS a couple of months ago...

    Finally, I was truly inspired by Paul OB's 3 column fluid layout, I have searched far and wide for a good way to do that, nothing works as simple and easy as his. So decided to give it a go. You will see my test design here.
    http://www.bombaynetworks.com/css/test.html

    Now the design seems to be working fine in my browser, I haven't tested in any others yet since I have a number of other issues.

    First - W3 tears my HTML apart, I am making a fundamental mistake in my syntax or definition of the page or elements. Could someone please help. I've come so far, can't go back to tables now, but if it doesn't validate what's the point!!

    This is the page
    http://www.bombaynetworks.com/css/test.html

    This is the CSS
    http://www.bombaynetworks.com/css/style1.css

    This is the validation
    http://validator.w3.org/check?uri=ht...ss%2Ftest.html

    Also - what is a recommended resource for understanding CSS syntax and elements. I have a serious lack of logic....so need some place with a lot of show with the tell. Not just plain documentation. Things like what elements, what goes with what and what goes without.

    I am doing a lot of things now that seem to work but I don't fully understand yet. Hopefully by the time I finish a few designs I will actually "know what I'm doing" with CSS. Right now CSS is doing me.

    #thanks .regards {

    P.S. - Any help, tips, suggestions or citisism of page will be really appreciated. Also if you see any issues with the page in other browsers(with a tip on how to fix it of course ).

  2. #2
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lots of the validation errors are simple HTML to XHTML transition mistakes.
    All tags have to be closed , even the old 'single' tags. So <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> becomes <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> a <br> tag becomes <br />.
    all atributes have to be inside quotes eg. class=mainlevel-nav becomes class="mainlevel-nav".
    ALL (yes even spacers) have to have alt tags (blank alts (eg alt"") do work, but shouldn't be overused).
    Getting these cleaned up should make the other errors easer to spot in the validation report.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Mumbai
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaaahhh!

    That's it, will get to it...i'm sure I will see better results,

    thanks mediaman

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    As mediaman says most of the errors are simple basic errors and have nothing to do with the css at all following his advice above will fix nearly all of them for you (should take minutes to do).

    Also - what is a recommended resource for understanding CSS syntax and elements. I have a serious lack of logic....so need some place with a lot of show with the tell. Not just plain documentation. Things like what elements, what goes with what and what goes without.
    I favour trial and error lol and lots and lots of reading. It really is a matter of reading and then applying and then understanding. The more layouts you do the better you get at it and the more it makes sense.

    Read the FAQ sticky thread section and it will answer all the common problems that you will encounter and also explain the why and the wherefore. Its vital to have a basic understanding of the different positioning systems and how floats work. So read up on these first and make sure you understand the concepts. Theres no need to remember all the syntax as you can soon get that right (or look it up) but its the basic concept of what works in the context of your layout.

    A lot of people lately have been coming unstuck by trying to position their layouts with relative postioning and haven't understood the concept at all and in what situations relative positioning should be used. So get a basic understanding of how elements work and then you can construct your layout using the right tools for the job.

    Theres plenty of info out on the web as well so google for eric meyer, zeldman, p.i.e., quirksmode, cssdiscuss (and others I can't think of).

    Paul

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Mumbai
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul OB

    Read the FAQ sticky thread section and it will answer all the common problems that you will encounter and also explain the why and the wherefore
    Just started on this, I think this is going to turn into a lifetime commitment.

    I don't understand the relative positioning bit fully either, or maybe I do . Just using whatever's working. Even if I do understand a concept, I have forgotten it by the time I move on to the next. I see this isn't going to be easy and time is the only constraint.

    But the errors all gone, brilliant - I HAVE BEEN VALIDATED!!

    thanks mediaman and Paul OB, it was a simple tip, and it occured to me, but when starting out those are the most elusive, made me look harder.

    I still have errors in the stylesheet, Paul OB, I'm sure you will know what to do with this, it's the


    Line: 0 Context : * Parse Error - *html #left {padding-bottom:27px ;margin-right:-3px;}
    http://jigsaw.w3.org/css-validator/v...usermedium=all
    Those are the only 4 errors, not sure if they were there from the beginning...*html, how can I fix this?

    I also have some questions -

    As I said I don't fully understand everything I do, been designing for a decade now, so I can modify almost anything on the internet to suit my requirements.

    In the stylesheet

    http://www.bombaynetworks.com/css/style1.css

    If you look at the header I have defined subelements, such as

    #header{
    position:absolute;
    top:0;
    left:0;
    ....
    }

    #header #box {
    width:100%;
    height:72px;
    margin: 0px 0px 0px 0px;
    ....

    That's coz that's how I thought the container and the contained elements should be defined.

    In the body

    Now should I define

    #buttons {
    float: right;
    margin: 0px;
    padding: 0px;
    width: 100%;
    position:relative;
    }

    ul#mainlevel-nav

    similarly within the "centercontent" div, like such

    #centercontent #buttons
    float: right;
    margin: 0px;
    padding: 0px;
    ...

    I really haven't figured the logic of this yet. Does doing this restrict the contained div. Doesn't just placing one div within another div achieve the same thing.

    Also, I read somewhere a <div> element may contain a <p> element but not the vice versa, or something like that, I got an error something to that effect in my validation report as well, just deleted the <p>

    thanks again guys for your time and efforts in giving me a helping hand in my CSS quest

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Those are the only 4 errors, not sure if they were there from the beginning...*html, how can I fix this?
    Those are the only 4 errors, not sure if they were there from the beginning...*html, how can I fix this?

    The star (universal) selector is just like and other selector in that it requires whitespace around the selector otherwise it merges in with the following style to make something that doesn't exist.

    * html not *html (I know that the child selector can have no space but the universal selector requires space because it in fact replaces any other element. You wouldn't write div p {color:red} as divp (color:red} because there is no tag called divp.)

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,


    Code:
    #header #box {
    width:100%; 
    height:72px;
    margin: 0px 0px 0px 0px;
    ....
    
    That's coz that's how I thought the container and the contained elements should be defined.
    Well apart from the facts that id's are unique to the page and can only be used once so it doesn't matter if you select the full path e.g. #header #box because #box would still target the box correctly. In your style #box would only be styles when its also inside #header, which is fine because thats what you wanted.

    However, if it were a class such as #header .box then you would be unable to re-use the class box anywhere else on your page unless you redefined it again.e.g. #footer .box . So if the class is to be re-used then just define it as .box and you can use it anywhere. When you pre-fix it with another selector then you limit its use to that selctor only.

    However, specifying #header #box is quite useful when you look through the stylesheet as it identifes exactly where the element applies especially when you come back to update the stylesheet at a later date.

    You can also try to simplify things by targeting them without creating extra divs and classes or id's. If you just have say one image in the header you could just style it with #header img {margin-left:100px} etc and not have to add any extra code or nestings or identifiers to the html. Some people think they have to wrap everthing in a div whereas elements should preferably be wrapped in semantic html h1,p etc. A div is just a generic container used to group items together or to create something that doesn't exist normally in the html.

    Also, I read somewhere a <div> element may contain a <p> element but not the vice versa, or something like that, I got an error something to that effect in my validation report as well, just deleted the <p>
    divs are block elements and can contain other block elements such as other divs p's or anything elese you want. A paragraph is a special type of block level tag in that it can only contain inline elements (span, anchors etc). The logic is simple - either a selection of text is a paragraph or its not. If you nest a paragraph inside a paragraph you have in fact got 2 paragraphs so there is no need to nest at all. (The same applies to the heading tags).

    Its good practice not to have bare text inside a div but to wrap that text inside the suitable html element such as a p, li, h1, h2 etc so that it makes semantic sense on its own.

    I don't understand the relative positioning bit fully either, or maybe I do . Just using whatever's working.
    Relative positioning is simple It simply moves the element in relation to itself. However (heres the crux of the matter) when you move an element with relative positioning you are in fact just placing a copy of the element onto the page. The original element remains on the page as "white space" in the original position. As far as anything on the page is concerned the element is where it always was and other elements will treat it as if it is still there. The element at the new position will have no effect on surrounding content except to overlap it if it gets in its way

    Therefore there will appear to be a hole in the page where the element was. If you had a header on your page that was 200pixels high and you moved it downwards by 200px using relative positioning, then the next element you enter on the page would start at 200pixels from the top of the page leveing a 200px white gap above it. However it would start in the same place as the element you moved so everything would be on top of each other. Great if thats the effect you want and thats how relative is usually used to produce effect but preserve the original flow of the document.

    Hope that hasn't confused you further

    Paul

  8. #8
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Mumbai
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks, it worked . Cool stuff, feels good being validated

    Hope that hasn't confused you further
    On the contrary, it all makes so much more sense now. I really appreciate your taking the time to put it all down so simply. Your post is saved and marked for many future references . Just the answers I needed and concepts I have been trying to clear for months now. Everywhere I looked, the pro's were giving tips for other pro's to implement...know what I mean, hacks, cracks and other such stuff...

    Once again - you cannot imagine how many of my questions you have answered for me, I really appreciate the time and detailed reponse.


    Thanks Paul OB

    Off to polish mah nu found skills.....
    ...down the road to web enlightenment (in the words of zengarden)


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
  •