Skip navigation
NeoGen Hawk
Currently Being Moderated

Variable Page and Table Properties in CSS

Aug 3, 2012 3:17 AM

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

 
Replies
  • Currently Being Moderated
    Aug 3, 2012 4:04 AM   in reply to NeoGen Hawk

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 4:16 AM   in reply to NeoGen Hawk

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 4:20 AM   in reply to NeoGen Hawk

    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;

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 4:31 AM   in reply to osgood_

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 5:33 AM   in reply to NeoGen Hawk

    <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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 5:43 AM   in reply to NeoGen Hawk

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 6:06 AM   in reply to NeoGen Hawk

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 6:11 AM   in reply to osgood_

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 6:29 AM   in reply to NeoGen Hawk

    td { padding:10px; }

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 7:12 AM   in reply to NeoGen Hawk

    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.

     


     


     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 9:39 AM   in reply to NeoGen Hawk

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

     

    td { vertical-align:top; }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points