21 Replies Latest reply: Aug 3, 2012 9:47 AM by NeoGen Hawk RSS

    Variable Page and Table Properties in CSS

    NeoGen Hawk

      Hi all,

       

      My website has a few tables in which I have setup in Dreamweaver, now when I check the pages with http://validator.w3.org I get numerous errors namely in the following pages:

       

      http://www.nick-lawrence/contact_us.html

      http://www.nick-lawrence.co.uk/portfolio.html

       

      How can I remove the errors by setting the properties in CSS for the specific tables rather than being a global value?

       

      The following pages have problems with tabbing and alignment:

       

      http://www.nick-lawrence/sitemap.html

      http://www.nick-lawrence/packages.html

       

      Again how do I set specific values rather than affecting the global parameters?

       

      Finally in the name of consistency I'm trying to get all the pages to have the same header to look like this one: http://www.nick-lawrence.co.uk/index.html except this one looks rubbish when viewed on certain browsers and tablets etc because the main header is a jpg file sized to 1260px so I've split it in to 2 jpg files but can't get it to look the same as can be seen here: http://www.nick-lawrence.co.uk/index2.html I need the right hand logo to be justified to the right of the pade and the lefthand one to be left justified.

       

      Any help would be greatly appreciated.

       

      Many thanks

       

       

       

      Nick

        • 1. Re: Variable Page and Table Properties in CSS
          osgood_ MVP

          Portfolio page - personally I would'nt worry about the 'width' being obsolete. That's just complete bollocks on the part of the WC3. Got to take what they say with a pinch of salt and move on.

           

          If you did want your page to validate further then you would have to give the table an 'id' (I've given it the 'id' of gallery (see below)). Also you would need to use some inline css styling to set one <td> to have the text aligned in the center of the cell and another <td> to align the text to the right (see inline styling below). Also you dont need the <div> tags that are wrapped around your <p> tags so I have removed them. Honestly though nothing in your current page is going to affect its performance. The 'lightbox' attribute on the <a> tag needs to be there for the lightbox to work, its just a WC3 failure to acknowledge anything else, other than what they say, as being accepatable. I don't treat validation that seriously, just write clean code and youre good to go!

           

           

          <div class="content">

              <table id="gallery">

                <tr>

                  <td><h1>Gallery</h1></td>

                  <td style="text-align: center;">

                    <p class="content">click on image to see the full size photo</p>

                  </td>

                  <td style="text-align: right;">

                    <h3><a href="portfolio2.html">Next <span class="line">&gt;&gt;</span></a></h3></td>

                </tr>

              </table>

           

          Then add the below css to your stylesheet:

           

          #gallery {

              width: 1260px;

          }

          #gallery td {

              width: 420px;

          }

          • 2. Re: Variable Page and Table Properties in CSS
            osgood_ MVP

            Whats the matter with the header in index2.html? Not sure what you mean by you can't get it to look the same, same as what? Looks to me as though its doing exactly as you require it to do.

            • 3. Re: Variable Page and Table Properties in CSS
              MurraySummers ACP/MVPs

              For the first two pages, what you are getting is not errors - they are warnings that notify you that you have used obsolete markup in those tables.  The pages will be rendered properly, at least in the current set of browsers and probably beyond that.  There will be small risk in just leaving it.  Me?  I would change it for my pages, but that's because I like to have valid markup to the extent that I can make it be so.

               

              As for the tabbing and alignment issue, can you explain more about what is troubling you there?

               

              Finally, I think 1260px is too wide (by ~300px) for a general public site.

               

              The easy way to fix your header would be to split the image into two small pieces, make the right image be the background image of the container, and use the background-position style to move it to the right:

               

              background-position:right top;

              • 4. Re: Variable Page and Table Properties in CSS
                osgood_ MVP

                As far as I can see you have set the 'container' <div> which houses all your code to be 80% of the browser window width and have set a max-width of 1260px and a minimum width. Yet you specify the header table to be 1260px wide when you should be specifying it as 80% to match the width of your container, then set its max-width to 1260px if you want to although I can't see a reason for this. Maybe I guess if the browser window gets too wide.

                • 5. Re: Variable Page and Table Properties in CSS
                  NeoGen Hawk Community Member

                  Thanks guys for your help and advice above, it will take me a bit to read and digest it but I may be back shortly with more questions ;o)

                   

                   

                  Many thanks

                   

                   

                   

                  Nick

                  • 6. Re: Variable Page and Table Properties in CSS
                    NeoGen Hawk Community Member

                    Hi osgood,

                     

                    With regards to index2.html I have put a table in but to get the right hand side to justifiy to the right I've used the align="right" in the HTML but would rather try to get it resolved in CSS, this is what I'm not sure how to do, how to specify just that column to right justify?

                     

                    Many thanks

                     

                     

                     

                    Nick

                    • 7. Re: Variable Page and Table Properties in CSS
                      MurraySummers ACP/MVPs

                      <div style="width:1200px;overflow:hidden;"><img width="250" style="float:right;"><img width="185" style="float:left;"></div>

                       

                      It's as simple as that.

                      • 8. Re: Variable Page and Table Properties in CSS
                        NeoGen Hawk Community Member

                        Hi Murray,

                         

                        What I'm trying to do is to get rid of all the error mesages and warnings through a better understanding of CSS, so where it is giving me an error or a warning I'm trying to correct it.

                         

                        The tabbing error it is giving me is:

                         

                        Line 44, column 10: Element ol not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)

                        <ol>

                         

                        What I'm after is:

                         

                          1. This
                          2. Type
                          3. Of
                          4. List

                         

                        The alignment error is because I have aligned the text in dreamweaver rather than in CSS, but I'm struggling with specific properties rather than global properties in CSS but I think I'm getting there with 'classes' I think I need to set a class for the text on the site map page and then align this centrally in CSS.

                         

                        I have split the logo in to two seperate parts now, so will try what you suggest,

                         

                        Many thanks

                         

                         

                         

                        Nick

                        • 9. Re: Variable Page and Table Properties in CSS
                          MurraySummers ACP/MVPs

                          Change this -

                           

                          <ol>

                                <ol>

                                  <li>Pre Wedding shoot with your choice of 5 prints up to 12&rdquo; x 8&rdquo;</li>

                                  <li>Whole day of photography – Including a 2nd Photographer/Assistant</li>

                                  <li>Your choice of wedding album from our collection with 15 double-sided pages (30 pages) for your selected photos</li>

                                  <li>24&rdquo; x 24&rdquo; framed print or canvas</li>

                                  <li>Two high quality albums and 10&rdquo; x 10&rdquo; framed prints for parent&rsquo;s gifts</li>

                                  <li>A DVD with all the photos from the day suitable for printing</li>

                                  <li>Personalised slideshow of your pictures set to music</li>

                                  <li>Access to your photos on our online gallery to share with your friends and family</li>

                                </ol>

                              </ol>

                           

                          to this -

                           

                          <ol>

                             <li>Pre Wedding shoot with your choice of 5 prints up to 12&rdquo; x 8&rdquo;</li>

                                  <li>Whole day of photography – Including a 2nd Photographer/Assistant</li>

                                  <li>Your choice of wedding album from our collection with 15 double-sided pages (30 pages) for your selected photos</li>

                                  <li>24&rdquo; x 24&rdquo; framed print or canvas</li>

                                  <li>Two high quality albums and 10&rdquo; x 10&rdquo; framed prints for parent&rsquo;s gifts</li>

                                  <li>A DVD with all the photos from the day suitable for printing</li>

                                  <li>Personalised slideshow of your pictures set to music</li>

                                  <li>Access to your photos on our online gallery to share with your friends and family</li>

                          </ol>


                          And your 'tabbing' error will go away.  It is not proper syntax to have <ol><ol>.  The only tag that can follow <ol> is <li>.  When you are struggling with these messages, take a look at the code and read the message in the context of the code you see at that line #.  You'll figure it out.

                          • 10. Re: Variable Page and Table Properties in CSS
                            NeoGen Hawk Community Member

                            Hi Muray,

                             

                            If I change this it doesn't keep the same layout, it moves the lists back in to the left, I'm trying to keep them in there place tabbed out? Did I miss something?

                             

                            Many thanks

                             

                             

                             

                            Nick

                            • 11. Re: Variable Page and Table Properties in CSS
                              osgood_ MVP

                              Add some left margin (inline example shown below) but preferably do it in your css stylesheet

                               

                              <ol style="margin-left: 30px;">

                               

                               

                               

                              css stylesheet example:

                               

                              ol {

                              margin-left: 30px;

                              }

                              • 12. Re: Variable Page and Table Properties in CSS
                                MurraySummers ACP/MVPs

                                Yep - that's the ticket.  @NeoGen probably had the <ol> tags nested because of the indentation he got by doing that.  Just goes to show the extreme danger of using a WYSIWYG-type interface with no regard for the code.

                                • 13. Re: Variable Page and Table Properties in CSS
                                  NeoGen Hawk Community Member

                                  Many thanks osgood and Murray

                                   

                                  Getting there with your help, just need to sort add Cell padding and spacing to the table in the contact_us page, can this be done is CSS? I can find padding but nothing specific to cell padding or spacing?

                                   

                                  Thanks

                                   

                                   

                                   

                                  Nick

                                  • 14. Re: Variable Page and Table Properties in CSS
                                    MurraySummers ACP/MVPs

                                    td { padding:10px; }

                                    table { border-collapse:separate; border-spacing:10px; }

                                    • 15. Re: Variable Page and Table Properties in CSS
                                      NeoGen Hawk Community Member

                                      Just two things left to sort out and then I'm a happy chappy ;o)

                                       

                                      I'm still struggling to sort out the http://www.nick-lawrence.co.uk/index2.html and getting the right hand image placed without using the align="right" in Dreamweaver, this (<div style="width:1200px;overflow:hidden;"><img width="250" style="float:right;"><img width="185" style="float:left;"></div>) did actually lose me a little bit, I'm still at the early stafges of learning CSS etc and I couldn't figure it out, I don't want to adjust any sizes etc just set the image to the right in the table.

                                       

                                      Many thanks

                                       

                                       

                                       

                                      Nick

                                      • 16. Re: Variable Page and Table Properties in CSS
                                        osgood_ MVP

                                        Change the slogan image to float: right; (see below)

                                         

                                        <img src="images/general/slogan.jpg" alt="" width="346" height="100" style="float: "right;">

                                         

                                         

                                        Inline styling is not exactly the best way to proceed especially where content appears globally.

                                         

                                        Whatever you do it requires some degree of manual manipulation.

                                         

                                        You could also give the image an id to achieve the same result:

                                         

                                        <img src="images/general/slogan.jpg" alt="" width="346" height="100" id="ftRight">

                                         

                                        Then add to your stylesheet:

                                         

                                        #ftRight {

                                        float: right;

                                        }

                                         

                                        Whatever method you use you'll have to add something to the image on each page.

                                         


                                         


                                        • 17. Re: Variable Page and Table Properties in CSS
                                          NeoGen Hawk Community Member

                                          Hi osgood,

                                           

                                          Couldn't get the <img src="images/general/slogan.jpg" alt="" width="346" height="100" id="ftRight"> to work but the second one did, many thanks for your help

                                           

                                           

                                          Regards

                                           

                                           

                                           

                                          Nick

                                          • 18. Re: Variable Page and Table Properties in CSS
                                            NeoGen Hawk Community Member

                                            Thanks all, I think that is the bulk of my problems sorted just the odd tweak here and there.

                                             

                                            Many thanks for all your help and patience.

                                             

                                            Regards

                                             

                                             

                                             

                                            Nick

                                            • 19. Re: Variable Page and Table Properties in CSS
                                              NeoGen Hawk Community Member

                                              Having uploaded the http://www.nick-lawrence.co.uk/testimonials.html page I notice that the white background extends above and below the size of the photo, I'm gathering this is due to either the cell padding or spacing I have set in CSS do I need to specify a different ID for this table and set the parameters for it?

                                               

                                              Also how do I specify the text to be at the top of the cell and not in the middle?

                                               

                                              Many thanls

                                               

                                               

                                               

                                              Nick

                                              • 20. Re: Variable Page and Table Properties in CSS
                                                MurraySummers ACP/MVPs

                                                Also how do I specify the text to be at the top of the cell and not in the middle?

                                                 

                                                td { vertical-align:top; }

                                                • 21. Re: Variable Page and Table Properties in CSS
                                                  NeoGen Hawk Community Member

                                                  Thanks Murray,

                                                   

                                                  Regards

                                                   

                                                   

                                                   

                                                  Nick